/* era-mobile.css v2 - Mobile polish + FAB collision fixes */

/* ========== FAB COLLISION AVOIDANCE ========== */

/* Always reserve bottom space for FAB - applies on all screens */
body {
  padding-bottom: 80px !important;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 90px !important;
  }
}

/* Status pills/badges in list rows shouldn't extend to far right - leave room for FAB */
@media (min-width: 769px) {
  /* On desktop, the FAB is bottom-right ~48px. Last item in lists should have right padding. */
  .era-list-row:last-child,
  [data-app-row]:last-child,
  [data-export-row]:last-child {
    padding-right: 70px;
  }
}

/* ========== TOUCH-FRIENDLY DEFAULTS ========== */

@media (max-width: 768px) {
  .era-btn { min-height: 44px; padding: 12px 16px; }
  .era-btn-sm { min-height: 36px; }
  .era-btn-icon { min-width: 44px; min-height: 44px; }

  /* Inputs - prevent iOS zoom */
  .era-input, .era-textarea, .era-select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], textarea, select {
    font-size: 16px !important;
  }
}

/* ========== SAFE AREAS ========== */

@supports (padding: max(0px)) {
  body { padding-bottom: max(80px, env(safe-area-inset-bottom, 80px)) !important; }
}

#eraFab {
  bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}
#eraFabMenu {
  bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 76px)) !important;
}

/* ========== FAB ITEMS ON SMALL SCREENS ========== */

@media (max-width: 480px) {
  .era-fab-item > span {
    display: none !important;
  }
}

/* ========== SIDE PANEL: full-screen on mobile ========== */

@media (max-width: 768px) {
  #eraSidePanel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ========== AI ASSISTANT ========== */

@media (max-width: 480px) {
  #aiHelpPanel {
    width: calc(100vw - 24px) !important;
    height: calc(100vh - 100px) !important;
    bottom: max(90px, env(safe-area-inset-bottom, 0px) + 90px) !important;
    right: 12px !important;
    left: 12px !important;
    max-height: none !important;
  }
}

/* ========== KEYS OVERLAY: hide on touch ========== */

@media (hover: none) and (pointer: coarse) {
  .era-fab-item[data-key="shortcuts"] { display: none !important; }
}

/* ========== TABLES: horizontal scroll ========== */

.era-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ========== CARDS ========== */

@media (max-width: 480px) {
  .era-card {
    padding: 16px;
    border-radius: 12px;
  }
}

/* ========== MODALS slide up from bottom ========== */

@media (max-width: 480px) {
  .era-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .era-modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
  }
}

/* ========== UTILITIES ========== */

* { -webkit-tap-highlight-color: rgba(255, 79, 0, 0.15); }
button, a { touch-action: manipulation; }

@media (max-width: 768px) {
  input, textarea, select { -webkit-text-size-adjust: 100%; }
}

@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

.era-hide-mobile { @media (max-width: 768px) { display: none !important; } }
.era-only-mobile { @media (min-width: 769px) { display: none !important; } }