/* ── Global responsive utilities for AI4CH app pages ── */

img,
video {
  max-width: 100%;
  height: auto;
}

.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* App shell */
@media (max-width: 991px) {
  .ai4ch-topbar {
    flex-wrap: wrap;
    padding: 0.65rem 1rem;
    gap: 0.65rem;
    justify-content: space-between;
  }

  .ai4ch-topbar > .d-flex:last-child {
    width: 100%;
    justify-content: flex-end;
  }

  .ai4ch-content {
    padding: 1rem 1rem 4.75rem;
  }

  .breadcrumb {
    max-width: min(100%, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .ai4ch-content {
    padding: 0.85rem 0.85rem 4.75rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-card .stat-value {
    font-size: 1.65rem;
  }

  .form-hero {
    padding: 1.15rem 1.25rem;
  }

  .form-section {
    padding: 1rem 1.1rem;
  }

  .form-page,
  .form-page-wide,
  .detection-page {
    max-width: 100%;
  }

  .data-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .data-table-toolbar .btn,
  .data-table-toolbar .form-control {
    width: 100%;
  }

  .condition-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .chart-container {
    min-height: 220px;
  }

  #field-map {
    height: calc(100vh - 10rem);
    min-height: 360px;
    max-height: none;
  }

  .stat-card .d-flex.flex-wrap.gap-2 .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }
}

/* Forms & auth */
@media (max-width: 767px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .form-hero .d-flex.align-items-center {
    flex-wrap: wrap;
  }

  .auth-explainer-cta,
  .detection-explainer-cta,
  .detection-agrovet-header {
    flex-direction: column;
    align-items: stretch;
  }

  .detection-explainer-cta .btn,
  .detection-agrovet-header .detection-agrovet-status {
    align-self: flex-start;
  }

  /* Page headers with action buttons */
  .ai4ch-content > .d-flex.justify-content-between.align-items-center,
  .data-table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ai4ch-content > .d-flex.justify-content-between.align-items-center .btn,
  .ai4ch-content > .d-flex.justify-content-between.align-items-center .d-flex.gap-2,
  .data-table-toolbar .btn {
    width: 100%;
  }

  .ai4ch-content > .d-flex.justify-content-between.align-items-center .d-flex.gap-2 {
    flex-direction: column;
  }

  .list-group-item.d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .list-group-item .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .recommendation-card .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .stat-card.p-3.border-top.d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .stat-card.p-3.border-top .pagination {
    justify-content: center;
  }
}

/* Detection & classification */
@media (max-width: 767px) {
  .detection-hero {
    padding: 1.15rem;
  }

  .detection-hero .d-flex.flex-column.flex-md-row {
    gap: 1rem !important;
  }

  .detection-mode-tabs {
    width: 100%;
    justify-content: center;
  }

  .detection-mode-tabs a {
    flex: 1;
    text-align: center;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
  }

  .detection-disease-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
  }

  .detection-disease-header .fw-semibold {
    flex: 1 1 100%;
    font-size: 0.9rem;
  }

  .detection-loader-pipeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .detection-loader-pipeline-label {
    font-size: 0.6rem;
  }

  .detection-loader-card {
    padding: 1.25rem;
  }

  .detection-explainer-actions {
    gap: 0.4rem;
  }

  .detection-explainer-action {
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center;
  }

  .detection-explainer-action-close {
    flex: 1 1 100%;
  }

  .detection-agrovet-grid {
    grid-template-columns: 1fr;
  }

  .detection-agrovet-section,
  .detection-explainer-section {
    padding: 1rem 1.1rem;
  }

  .detection-workflow-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .detection-run-btn {
    width: 100%;
  }

  .detection-step-label {
    display: none;
  }

  .detection-step-line {
    width: 1.25rem;
    margin: 0 0.25rem;
  }

  .detection-file-bar {
    flex-wrap: wrap;
  }

  .detection-file-bar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .detection-file-bar-actions .btn {
    flex: 1;
  }
}

@media (max-width: 575px) {
  .detection-upload-card .p-3.p-md-4 {
    padding: 0.85rem !important;
  }

  .detection-result-media {
    padding: 0.65rem;
  }

  .detection-result-media img,
  .detection-result-media video {
    max-height: min(360px, 50vh);
  }
}

/* Assistant widget */
@media (max-width: 575px) {
  .ai-assistant-panel {
    width: calc(100vw - 1.5rem);
    height: min(520px, calc(100vh - 6rem));
    right: 0.75rem;
  }

  .ai-assistant-root {
    right: 0.75rem;
    bottom: 4.75rem;
  }
}