/* Mobile Screen Fitting Fixes */

/* Compact bottom navigation */
.bottom-nav {
  height: auto !important;
  padding: 4px 0 !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

.nav-item {
  gap: 2px !important;
  padding: 6px 8px !important;
  min-width: 50px !important;
}

.nav-icon {
  font-size: 1.1rem !important;
}

.nav-label {
  font-size: 0.6rem !important;
}

/* Adjust containers to fit with compact navigation */
.has-bottom-nav .dashboard-container,
.has-bottom-nav .card-container,
.has-bottom-nav .invite-container,
.has-bottom-nav .calendar-container {
  height: calc(100vh - 60px) !important;
}

.has-bottom-nav .calendar-content,
.has-bottom-nav .dashboard-content,
.has-bottom-nav .invite-content {
  padding-bottom: calc(60px + 16px) !important;
}

/* Fix specific page containers */
.calendar-container {
  grid-template-rows: auto auto 1fr !important;
}

.dashboard-container {
  grid-template-rows: auto auto 1fr auto !important;
}

/* Ensure no overflow on mobile */
@media (max-height: 700px) {
  .calendar-stats {
    padding: 8px 16px !important;
  }
  
  .stat-card {
    padding: 4px !important;
  }
  
  .stat-number {
    font-size: 1rem !important;
  }
  
  .dashboard-header,
  .calendar-header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }
}

/* Ultra compact for very small screens */
@media (max-height: 600px) {
  .calendar-stats,
  .user-status {
    display: none !important;
  }
  
  .calendar-container,
  .dashboard-container {
    grid-template-rows: auto 1fr !important;
  }
}