/* ==========================================================================
   NavRun Mobile-First Responsive Styles
   ========================================================================== */

/* -------------------------------------------------------------------------
   Base Mobile Styles (< 768px)
   ------------------------------------------------------------------------- */

/* Dashboard sections - stack vertically on mobile */
.dashboard-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.dashboard-sections > * {
  width: 100%;
}

/* Ensure cards are full width on mobile */
.card,
.metric-card {
  width: 100%;
}

/* Touch target minimum size for buttons and links (mobile only) */
@media (max-width: 767px) {
  .touch-target,
  .btn,
  .nav-link:not(.dropdown-toggle),
  a.card,
  .activity-filter-chip {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Compact activity card for mobile */
.activity-card-compact {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 60px;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
}

.activity-card-compact:hover,
.activity-card-compact:active {
  background: var(--color-bg-subtle);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.activity-card-compact:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.activity-card-compact-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.activity-card-compact-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
}

.activity-card-compact-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

.activity-card-compact-distance {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.activity-card-compact-distance-unit {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  margin-left: 2px;
}

.activity-card-compact-pace {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.activity-card-compact-duration {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.activity-card-compact-icon {
  display: inline-block;
  margin-right: var(--space-xs);
  font-size: var(--text-lg);
}

/* Hide non-essential content on mobile */
.d-mobile-none {
  display: none !important;
}

/* Stack metric cards single column on mobile */
.row.g-3 {
  display: flex;
  flex-wrap: wrap;
}

.row.g-3 > .col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Mobile-friendly navigation (only when navbar is collapsed) */
@media (max-width: 991px) {
  .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Ensure filter chips wrap properly on mobile */
#activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.activity-filter-chip {
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
}

/* Calendar table mobile optimization */
.calendar-table {
  font-size: var(--text-xs);
}

.calendar-day {
  padding: 4px !important;
  font-size: var(--text-xs);
  min-height: 80px;
}

/* Reduce padding on mobile cards */
.card-body {
  padding: var(--space-md);
}

.card-header {
  padding: var(--space-sm) var(--space-md);
}

/* Make modals mobile-friendly */
.modal-dialog {
  margin: var(--space-sm);
}

/* -------------------------------------------------------------------------
   Tablet Styles (>= 768px)
   ------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* Two-column layouts for tablets */
  .dashboard-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Show desktop content */
  .d-mobile-none {
    display: block !important;
  }

  /* Metric cards in rows of 2 on tablets */
  .row.g-3 > .col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Larger calendar cells */
  .calendar-day {
    min-height: 100px;
    font-size: var(--text-sm);
  }

  /* Restore normal card padding */
  .card-body {
    padding: var(--space-lg);
  }

  .card-header {
    padding: var(--space-md) var(--space-lg);
  }

  /* Modal centering */
  .modal-dialog {
    margin: 1.75rem auto;
  }
}

/* -------------------------------------------------------------------------
   Desktop Styles (>= 1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Multi-column layouts for desktop */
  .dashboard-sections {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Metric cards in rows of 4-5 on desktop */
  .row.g-3 > .col {
    flex: 0 0 20%;
    max-width: 20%;
  }

  /* Larger calendar cells for desktop */
  .calendar-day {
    min-height: 120px;
    padding: 8px !important;
    font-size: var(--text-sm);
  }

  /* Restore full padding */
  .card-body {
    padding: var(--space-xl);
  }
}

/* -------------------------------------------------------------------------
   Large Desktop Styles (>= 1280px)
   ------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  /* Even more columns on large screens */
  .dashboard-sections {
    grid-template-columns: repeat(4, 1fr);
  }

  .row.g-3 > .col {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
}

/* -------------------------------------------------------------------------
   Accessibility & Touch Improvements
   ------------------------------------------------------------------------- */

/* Larger tap targets for interactive elements on mobile */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-link,
  .activity-filter-chip,
  .dropdown-item {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Increase spacing between interactive elements */
  #activity-filters {
    gap: var(--space-md);
  }
}

/* Focus visible for keyboard navigation */
.activity-card-compact:focus-visible,
.activity-filter-chip:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Print Styles
   ------------------------------------------------------------------------- */

@media print {
  .navbar,
  .modal,
  #activity-filters,
  .btn,
  footer {
    display: none !important;
  }

  .card {
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}

/* -------------------------------------------------------------------------
   Native App Overrides (Capacitor shell)
   body.native-app class is added by app.js when running in Capacitor
   ------------------------------------------------------------------------- */
body.native-app footer {
  display: none !important;
}