/* Final homologation responsive guardrails.
 * Keeps the merchant workspaces usable down to 320px without changing business logic.
 */

html,
body {
  max-width: 100%;
}
/* Contain wide results in their table region instead of hiding content globally. */
body { overflow-x: clip; }

.main-content,
.vf-page-content,
.vf-workspace,
.vf-panel,
.card {
  min-width: 0;
}

/* Long identifiers, emails and provider labels must never force a panel wider. */
.vf-panel-head > *,
.vf-setting-row > *,
.vf-callout > *,
.vf-workspace-hero > * {
  min-width: 0;
}

.break-anywhere,
.vf-panel dd,
.vf-callout p {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  /* Django messages: fixed desktop width used to overflow 320px viewports. */
  .toast-container {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  .toast {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 14px !important;
  }

  /* Contextual import action stays available as an icon instead of crushing the topbar. */
  [data-import-context-action] {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }

  [data-import-context-action] span {
    display: none !important;
  }

  /* Shared provider/settings headers can wrap badges instead of overflowing. */
  .vf-panel-head {
    flex-wrap: wrap;
    align-items: flex-start !important;
    row-gap: 10px !important;
  }

  .vf-panel-head > .vf-status {
    margin-left: auto;
  }

  .vf-setting-row {
    align-items: flex-start !important;
  }

  /* Legacy list search fields used a 280px minimum inside cards narrower than that. */
  .min-w-\[280px\] {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Orders date range: icon + start + separator + end fit the available card width. */
  div:has(> input[name="start_date"]):has(> input[name="end_date"]) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
  }

  div:has(> input[name="start_date"]):has(> input[name="end_date"]) > input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Customers date range uses the same compact responsive rule. */
  div:has(> input[name="date_from"]):has(> input[name="date_to"]) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
  }

  div:has(> input[name="date_from"]):has(> input[name="date_to"]) > input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* WhatsApp QR must shrink with the stage instead of retaining a 240/256px hard width. */
  #qr-stage {
    min-height: 280px !important;
    padding: 16px !important;
  }

  #qr-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  #qr-image > div:first-child {
    max-width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  #qr-img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* Primary action groups are easier to tap and cannot overflow narrow forms. */
  .vf-hero-actions .btn {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .vf-page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .vf-workspace-hero,
  .vf-panel-body,
  .vf-panel-head {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #qr-img {
    max-width: 190px !important;
  }
}

/* Metric labels retain their space in two-column mobile cards. */
@media (max-width: 480px) {
  .vf-metrics .card > .flex { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vf-metrics .card .min-w-0 { width: 100%; }
  .vf-metrics .card .tracking-widest { letter-spacing: .04em; overflow-wrap: anywhere; }
}