/* Mobile layout fixes */

@media (max-width: 768px) {
  /* iOS zoom prevention */
  input, select, textarea { font-size: 16px !important; }

  /* === FIX 1: Header — hide text, icon-only buttons === */
  .dashboard-header { height: auto !important; padding: 0.35rem 0.5rem !important; }
  .header-content { flex-wrap: nowrap !important; gap: 0.2rem; overflow: hidden; }
  .dashboard-header h1 { font-size: 0.8rem !important; flex-shrink: 0; }
  .dashboard-header h1 i { display: none; }

  .header-actions {
    flex-wrap: nowrap !important;
    gap: 0.15rem !important;
    margin-left: auto;
    overflow: hidden;
  }
  /* Every header button: 30px icon square, no text */
  .header-actions > * {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; max-width: 30px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden;
  }
  .header-actions > * i { font-size: 0.75rem !important; }
  /* Log ud needs pseudo-icon since it has no <i> */
  #logoutBtn { color: var(--danger, #ef4444) !important; }
  #logoutBtn::after { content: '\f2f5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.75rem; }
  /* User email: hide completely */
  .user-info { display: none !important; }

  /* === FIX 2: Layout — stack, no overflow === */
  .dashboard-main { padding: 0 !important; overflow: hidden; }
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    padding: 0.4rem !important;
    overflow: hidden;
  }
  .dashboard-right { order: -1; }

  /* === FIX 3: Downloads — 2x2 grid, hide description === */
  .downloads-section { margin-bottom: 0.4rem !important; overflow: hidden; }
  .downloads-section .section-header { display: none !important; }
  #downloadsGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.25rem !important;
  }
  #downloadsGrid .btn,
  #downloadsGrid a {
    font-size: 0.6rem !important;
    padding: 0.3rem 0.2rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 28px;
  }
  #downloadsDescription { display: none !important; }

  /* === FIX 4: Devices — full width, no clip === */
  .devices-section .section-header h2 { font-size: 0.8rem !important; }
  .device-filters { gap: 0.25rem !important; margin-bottom: 0.4rem !important; }
  .device-filters input { flex: 1; min-width: 0; padding: 0.3rem 0.4rem; }
  .device-filters select { padding: 0.3rem; flex-shrink: 0; }
  .device-card {
    padding: 0.4rem 0.5rem !important;
    gap: 0.3rem !important;
  }
  .device-card .btn-sm { font-size: 0.6rem !important; padding: 0.2rem 0.4rem !important; }

  /* === FIX 5: Preview — visible, proper height === */
  .remote-preview-section { min-height: auto !important; overflow: hidden; }
  .remote-preview-section .section-header h2 { font-size: 0.75rem !important; }
  .preview-screen {
    height: 56vw !important;
    min-height: 180px;
    max-height: 50vh;
  }
  .preview-idle-content h3 { font-size: 0.85rem; }
  .preview-idle-content p { font-size: 0.7rem; }
  .preview-features { display: none; }

  /* === FIX 6: Toolbar — single line, scrollable === */
  .preview-toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem !important;
    padding: 0.25rem 0.4rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar-center .toolbar-btn { width: 26px; height: 26px; font-size: 0.65rem; }
  #connectedDeviceName { font-size: 0.6rem; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar-right .connection-stats { font-size: 0.55rem; }
  .toolbar-right .btn-danger { font-size: 0.6rem !important; padding: 0.15rem 0.3rem !important; }
  #monitorSelectContainer { display: none !important; }

  /* === FIX 7: Stats mini === */
  .stats-grid-mini { grid-template-columns: repeat(4, 1fr); gap: 0.2rem; }
  .stat-mini-value { font-size: 0.7rem; }
  .stat-mini-label { font-size: 0.5rem; }

  /* Chat full width */
  #chatPanel { width: 100% !important; left: 0 !important; }

  /* Activity log smaller */
  .activity-log-section .section-header h2 { font-size: 0.7rem !important; }

  /* Modals: bottom sheet */
  .modal { align-items: flex-end !important; }
  .modal-content {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 85vh; overflow-y: auto;
  }

  /* Login */
  .login-container { padding: 0.5rem; }
  .login-card { padding: 1.25rem 1rem; max-width: 100%; }
  .security-badges { flex-wrap: wrap; gap: 0.2rem; }
}

/* No horizontal scroll ever */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
}

/* Touch devices */
@media (hover: none) {
  .btn:hover, .device-card:hover { transform: none; }
}

/* Landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .dashboard-grid { grid-template-columns: 1fr 1fr !important; }
  .dashboard-right { order: 0; }
  .preview-screen { height: 50vw !important; max-height: 80vh; }
}

/* Safe area */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .dashboard-header { padding-top: calc(0.35rem + env(safe-area-inset-top)) !important; }
  }
}