/**
 * Mobile Content-First — Layout utilities
 * Content prvi, filteri/forme collapse
 */

/* Filter panel — collapsed by default on mobile */
.mobile-filter-panel {
  margin-bottom: var(--space-4);
}

.mobile-filter-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-filter-panel-toggle:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.mobile-filter-panel-toggle .filter-count {
  font-size: var(--font-size-xs);
  background-color: var(--accent-primary-muted);
  color: var(--accent-primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.mobile-filter-panel-content {
  padding: var(--space-4);
  margin-top: var(--space-2);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* Bootstrap collapse kontrolira vidljivost; content je uvijek block kad je parent vidljiv */

/* Desktop: filter panel uvijek vidljiv, toggle skriven */
@media (min-width: 768px) {
  .mobile-filter-panel.mobile-only-collapse .mobile-filter-panel-toggle {
    display: none;
  }
  .mobile-filter-panel.mobile-only-collapse .collapse {
    display: block !important;
  }
  .mobile-filter-panel.mobile-only-collapse .mobile-filter-panel-content {
    display: block !important;
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  /* Kalendar (i slično): filteri iza gumba, default zatvoreno i na desktopu */
  .mobile-filter-panel.filter-panel-desktop-collapsible .mobile-filter-panel-toggle {
    display: flex;
    width: auto;
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
  .mobile-filter-panel.filter-panel-desktop-collapsible .collapse:not(.show) {
    display: none !important;
  }
  .mobile-filter-panel.filter-panel-desktop-collapsible .collapse.show {
    display: block !important;
  }
  .mobile-filter-panel.filter-panel-desktop-collapsible .mobile-filter-panel-content {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background-color: var(--bg-elevated);
  }
}

/* Content-first wrapper — na mobile content ide prije filtera */
.content-first-mobile {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .content-first-mobile .content-block {
    order: 1;
  }
  .content-first-mobile .filters-block {
    order: 2;
  }
  .content-first-mobile .form-block {
    order: 2;
  }
}

/* Odometer: forma prva, zatim header, filteri, povijest */
@media (max-width: 767px) {
  .odometer-page {
    display: flex;
    flex-direction: column;
  }
  .odometer-page .odometer-form-first {
    order: 0;
  }
  .odometer-page .odometer-header {
    order: 1;
  }
  .odometer-page .filters-block {
    order: 2;
  }
  .odometer-page .content-block:not(.odometer-header):not(.odometer-trips-block) {
    order: 3;
  }
  .odometer-page .odometer-trips-block {
    order: 4;
  }
}