/* ════════════════════════════════════════════════════════════════ */
/* MOBILE APP EXPERIENCE — ORBITCYB                                 */
/* Loaded LAST — overrides responsive.css + modals.css              */
/* Breakpoints: ≤767px (mobile), ≤1024px (tablet partial)          */
/* ════════════════════════════════════════════════════════════════ */

/* ── Global: bottom nav + FAB hidden on desktop ─────────────────── */
.mob-bottom-nav,
.mob-fab-wrap,
.mob-topbar-notif {
  display: none;
}

/* ════════════════════════════════════════════════════════════════ */
/* PHASE 7 — PERFORMANCE: kill heavy animations on mobile           */
/* Uses body.is-mobile set by device-manager.js                     */
/* ════════════════════════════════════════════════════════════════ */
body.is-mobile [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Reduce animation on any motion-sensitive device */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* MOBILE — FULL OVERRIDES                                          */
/* ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────
     PHASE 1 — FIX responsive.css LAYOUT CONFLICTS
     responsive.css breaks off-canvas sidebar + shows all views.
     We restore correct layout here.
  ────────────────────────────────────────────────────────────── */

  .app {
    flex-direction: row !important;
    position: relative !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* Off-canvas sidebar */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    width: 260px !important;
    height: 100% !important;
    max-height: 100% !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: var(--xl) var(--lg) !important;
    border-right: 1px solid var(--rim) !important;
    border-bottom: none !important;
    z-index: 40 !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    background: var(--panel) !important;
  }

  /* Restore sidebar sections hidden by responsive.css */
  .sb-section,
  .sb-projects,
  .sb-user {
    display: block !important;
  }

  .st-input:checked ~ .app .sidebar      { left: 0 !important; }
  .st-input:checked ~ .app .sidebar-overlay { display: block !important; }
  .st-input:checked ~ .app .content      { overflow: hidden !important; }

  /* ─────────────────────────────────────────────────────────────
     PHASE 3 — VIEWS AS APP SCREENS
     Fix responsive.css `display: block` that shows ALL views.
     Each view = a fullscreen "page", only one visible at a time.
  ────────────────────────────────────────────────────────────── */

  .main {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Content = the scroll container for the active view */
  .content {
    flex: 1 !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 0 !important;        /* flex child must have explicit base height */
    padding-bottom: 64px !important; /* space for bottom nav */
  }

  /* All views: hidden by default — fix responsive.css `display: block` */
  .view {
    display: none !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    padding: var(--lg) var(--md) !important;
    overflow-y: visible !important;
  }

  /* Only the active view is shown */
  .view.active {
    display: block !important;
    animation: mob-view-enter 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  @keyframes mob-view-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* During JS-driven slide transitions, both views get inline styles
     from device-manager.js. The animation above is the fallback. */

  /* ─────────────────────────────────────────────────────────────
     COMPACT TOPBAR
  ────────────────────────────────────────────────────────────── */

  .topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 var(--lg) !important;
    flex-wrap: nowrap !important;
    gap: var(--md) !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: var(--panel) !important;
    border-bottom: 1px solid var(--rim) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  .topbar-actions { display: none !important; }

  .tb-spacer  { flex: 1 !important; }
  .tb-title   { font-size: 14px !important; font-weight: 700 !important; }
  .tb-sub     { font-size: 9px !important; }

  /* Mobile notification button in topbar */
  .mob-topbar-notif {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hamburger-btn {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: var(--hover) !important;
    border: 1px solid var(--rim) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    color: var(--txt) !important;
    font-size: 15px !important;
  }

  /* ─────────────────────────────────────────────────────────────
     PHASE 5 — TOUCH UX
     44px minimum touch targets, remove hover on touch devices
  ────────────────────────────────────────────────────────────── */

  /* Minimum 44px touch target for all interactive elements */
  .btn,
  .nav-item,
  .mob-nav-item,
  .tab {
    min-height: 44px !important;
  }

  .btn        { padding: 0 var(--lg) !important; font-size: 13px !important; }
  .btn-sm     { min-height: 40px !important; padding: 0 var(--md) !important; font-size: 12px !important; }

  /* Remove hover effects — replaced by :active states */
  .btn:hover,
  .kpi-card:hover,
  .proj-card:hover,
  .nav-item:hover,
  .card:hover,
  .stat-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
  }

  /* Real active feedback */
  .btn:active          { opacity: 0.75 !important; transform: scale(0.97) !important; }
  .nav-item:active     { opacity: 0.7 !important; }
  .kpi-card:active     { background-color: #161616 !important; }
  .proj-card:active    { background-color: #161616 !important; }

  /* Prevent iOS tap highlight */
  a, button, label, [onclick] {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Forms: 16px prevents iOS auto-zoom */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 12px var(--md) !important;
  }

  /* ─────────────────────────────────────────────────────────────
     LAYOUTS
  ────────────────────────────────────────────────────────────── */

  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--md) !important;
    margin-bottom: var(--lg) !important;
  }

  .kpi-card   { min-height: 0 !important; padding: var(--md) var(--lg) !important; }
  .kpi-label  { font-size: 10px !important; }
  .kpi-value  { font-size: 22px !important; }
  .kpi-delta  { font-size: 10px !important; }

  .grid-2col,
  .grid-col-right,
  .zt-grid,
  .proj-cards {
    grid-template-columns: 1fr !important;
  }

  .form-grid { grid-template-columns: 1fr !important; }

  .panel-header {
    padding: var(--md) var(--lg) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--sm) !important;
    align-items: center !important;
  }

  .panel-body { padding: var(--md) var(--lg) !important; }

  .filter-bar {
    flex-direction: column !important;
    padding: var(--md) !important;
    gap: var(--sm) !important;
  }

  .filter-row,
  .search-wrap,
  .filter-select {
    width: 100% !important;
    min-width: 100% !important;
  }

  .table-wrap { overflow-x: auto !important; }
  .data-table th,
  .data-table td { padding: var(--sm) !important; font-size: 11px !important; }

  .tab-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: var(--sm) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tab-row::-webkit-scrollbar { display: none; }

  .proj-card   { padding: var(--lg) !important; }
  .upload-zone { padding: var(--xl) var(--lg) !important; min-height: 0 !important; }
  .onboard-logo { display: none !important; }
  .section-hdr  { margin-bottom: var(--lg) !important; }

  #ganttChart,
  .gantt-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ─────────────────────────────────────────────────────────────
     PHASE 4 — FULLSCREEN MODALS ON MOBILE
     Modal overlays become full-screen sheets that slide up
  ────────────────────────────────────────────────────────────── */

  .modal-overlay.active {
    align-items: flex-end !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    animation: none !important;
  }

  .modal,
  .modal.modal-lg,
  .modal.modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    max-height: 92vh !important;
    animation: mob-sheet-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important;
    /* Clean up desktop gradients */
    background: var(--panel) !important;
    border: 1px solid var(--rim) !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5) !important;
  }

  @keyframes mob-sheet-up {
    from { transform: translateY(100%); opacity: 0.8; }
    to   { transform: translateY(0);    opacity: 1;   }
  }

  /* Sheet drag handle */
  .modal::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    background: var(--rim) !important;
    border-radius: 2px !important;
    margin: 10px auto 0 !important;
  }

  /* Modal header — clean up blue gradient, add back button affordance */
  .modal-header {
    padding: var(--md) var(--lg) !important;
    background: none !important;
    border-bottom: 1px solid var(--rim) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--panel) !important;
  }

  .modal-title {
    font-size: 16px !important;
    background: none !important;
    -webkit-text-fill-color: var(--txt) !important;
    color: var(--txt) !important;
  }

  .modal-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }

  .modal-body {
    padding: var(--lg) !important;
    max-height: calc(92vh - 160px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Remove stagger animations in modal body — too slow on mobile */
    animation: none !important;
  }

  .modal-body > *:first-child,
  .modal-body > *:nth-child(2),
  .modal-body > *:nth-child(3) {
    animation: none !important;
  }

  .modal-footer {
    padding: var(--md) var(--lg) !important;
    background: none !important;
    background: var(--panel) !important;
    border-top: 1px solid var(--rim) !important;
  }

  /* ─────────────────────────────────────────────────────────────
     PHASE 9 — VISUAL CLEANUP (anti "AI look")
     Remove exaggerated gradients, skeumorphic shadows
  ────────────────────────────────────────────────────────────── */

  /* Kill excessive backdrop blur on non-modal overlays */
  .sidebar-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Progress bar — no glow */
  .progress-fill {
    box-shadow: none !important;
  }

  /* Remove animations from KPI delta badges */
  .kpi-delta { animation: none !important; }

  /* ─────────────────────────────────────────────────────────────
     PHASE 7 — PERFORMANCE
     Disable expensive effects on mobile
  ────────────────────────────────────────────────────────────── */

  /* AOS disabled via body.is-mobile class above + here as fallback */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Kill box-shadows that cause GPU layers */
  .panel,
  .kpi-card,
  .proj-card {
    box-shadow: none !important;
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* BOTTOM NAVIGATION BAR                                            */
  /* ════════════════════════════════════════════════════════════════ */

  .mob-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: var(--panel) !important;
    border-top: 1px solid var(--rim) !important;
    z-index: 35 !important;
    align-items: stretch !important;
    padding: 0 var(--sm) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  .mob-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
    color: var(--txtD) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    font-family: var(--sans) !important;
    border: none !important;
    background: none !important;
    border-top: 2px solid transparent !important;
    transition: color 0.12s, border-color 0.12s !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    position: relative !important;
    min-height: 44px !important;
  }

  .mob-nav-item i         { font-size: 17px !important; line-height: 1 !important; }
  .mob-nav-item.active    { color: var(--orbit) !important; border-top-color: var(--orbit) !important; }
  .mob-nav-item:active    { opacity: 0.6 !important; }

  .mob-nav-badge {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    min-width: 14px !important;
    height: 14px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    border-radius: 7px !important;
    padding: 0 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* ════════════════════════════════════════════════════════════════ */
  /* FLOATING ACTION BUTTON (FAB)                                     */
  /* ════════════════════════════════════════════════════════════════ */

  .mob-fab-wrap {
    display: block !important;
    position: fixed !important;
    bottom: 68px !important;
    right: 16px !important;
    z-index: 36 !important;
  }

  .mob-fab {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--orbit) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.30) !important;
    transition: transform 0.18s, box-shadow 0.18s !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .mob-fab:active           { transform: scale(0.92) !important; }
  .mob-fab i                { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }
  .mob-fab-wrap.open .mob-fab i { transform: rotate(45deg) !important; }

  .mob-fab-actions {
    position: absolute !important;
    bottom: 60px !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity 0.16s, transform 0.16s !important;
  }

  .mob-fab-wrap.open .mob-fab-actions {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .mob-fab-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mob-fab-action:active .mob-fab-action-btn { opacity: 0.7 !important; }

  .mob-fab-action-label {
    background: var(--panel) !important;
    border: 1px solid var(--rim) !important;
    color: var(--txt) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }

  .mob-fab-action-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
  }

  .mob-fab-action-btn.green { background: var(--orbit) !important; color: #fff !important; }
  .mob-fab-action-btn.grey  { background: #2a2a2a !important; color: var(--txt) !important; }

  .mob-fab-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  .mob-fab-wrap.open .mob-fab-backdrop { display: block !important; }

}

/* ════════════════════════════════════════════════════════════════ */
/* TABLET PARTIAL FIXES (768px – 1024px)                            */
/* ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}