/*
 * Tables on phones and tablets (2026-09-30).
 * CEO: "The tables in mobile version of Vitallium are displaying very narrow and not
 * readable ... redesign them to be seamlessly and elegantly read in mobile and tablet."
 *
 * Up to 1024 px wide, every table that vitall-mobile-tables.js has marked `vt-cards`
 * shows each row as a card: the first column is the card's title, every other column
 * is a "label : value" line. Wider screens keep the normal table, untouched.
 * A table opts out with data-vt-cards="off".
 */
@media (max-width: 1024px) {
  table.vt-cards,
  #changelist table.vt-cards {
    display: block;
    width: 100% !important;
    table-layout: auto !important;
    border: 0;
    background: transparent;
  }
  table.vt-cards > caption { display: block; }
  table.vt-cards > thead { display: none; }
  table.vt-cards > tbody,
  table.vt-cards > tfoot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  table.vt-cards > tfoot { margin-top: 12px; }

  table.vt-cards > tbody > tr,
  table.vt-cards > tfoot > tr {
    display: block;
    position: relative;
    min-width: 0;
    padding: 6px 14px 8px;
    background: var(--body-bg, #fff);
    border: 1px solid var(--hairline-color, #e3e6e4);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 60, 32, .06);
  }
  table.vt-cards > tbody > tr.selected { background: var(--selected-row, #fffbe6); }
  table.vt-cards > tbody > tr.vt-head,
  table.vt-cards > tbody > tr.empty-form,
  table.vt-cards > tbody > tr[hidden] { display: none; }

  /* One "label : value" line per column */
  table.vt-cards > tbody > tr > td,
  table.vt-cards > tbody > tr > th,
  table.vt-cards > tfoot > tr > td,
  table.vt-cards > tfoot > tr > th {
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
    justify-items: start;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--hairline-color, #eef0ee) !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.45;
  }
  table.vt-cards > tbody > tr > [data-label]::before,
  table.vt-cards > tfoot > tr > [data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--body-quiet-color, #6b7280);
  }
  /* A column without a heading: the value takes the whole line */
  table.vt-cards > tbody > tr > [data-label=""],
  table.vt-cards > tfoot > tr > [data-label=""],
  table.vt-cards > tbody > tr > :not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }
  table.vt-cards > tbody > tr > [data-label=""]::before,
  table.vt-cards > tfoot > tr > [data-label=""]::before { display: none; }
  table.vt-cards > tbody > tr > td:empty { display: none; }

  /* Card title: the first real column */
  table.vt-cards > tbody > tr > .vt-title,
  table.vt-cards > tfoot > tr > .vt-title {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0 !important;
    padding: 6px 34px 8px 0 !important;
    font-size: 15.5px;
    font-weight: 600;
  }
  table.vt-cards > tbody > tr > .vt-title::before,
  table.vt-cards > tfoot > tr > .vt-title::before { display: none; }
  table.vt-cards > tbody > tr > .vt-title + * { border-top: 0 !important; }

  /* Selection tick of list pages: top-right corner of the card */
  table.vt-cards > tbody > tr > td.action-checkbox {
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    padding: 0 !important;
    border: 0 !important;
  }
  table.vt-cards > tbody > tr > td.action-checkbox::before { display: none; }
  table.vt-cards > tbody > tr > td.action-checkbox input { width: 20px; height: 20px; margin: 0; }
  table.vt-cards > tbody > tr > td.action-checkbox + * { border-top: 0 !important; }

  /* Form fields inside cards (line tables of edit pages, checklist runs) use the full width */
  table.vt-cards input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=image]),
  table.vt-cards select,
  table.vt-cards textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    font-size: 15px;
  }
  /* In edit forms the label sits above its field, so the field gets the whole card width */
  table.vt-cards.vt-form > tbody > tr > td,
  table.vt-cards.vt-form > tbody > tr > th {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    justify-items: stretch;
  }
  table.vt-cards.vt-form > tbody > tr > td > input[type=checkbox],
  table.vt-cards.vt-form > tbody > tr > td > label { justify-self: start; }
  /* Name of an existing line (Django's "original" cell) reads as the card title */
  table.vt-cards > tbody > tr > td.original { border-top: 0 !important; padding: 6px 0 2px !important; }
  table.vt-cards > tbody > tr > td.original p { margin: 0; font-size: 14px; font-weight: 600; color: var(--body-fg, #222); }
  table.vt-cards > tbody > tr > td.original + td { border-top: 0 !important; }
  table.vt-cards .related-widget-wrapper { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
  table.vt-cards .related-widget-wrapper > select,
  table.vt-cards .related-widget-wrapper > .select2 { flex: 1 1 180px; min-width: 0; }
  table.vt-cards .select2-container { width: 100% !important; }
  table.vt-cards img { max-width: 100%; height: auto; }

  /* Rows that are one wide message ("Add another", form errors) stay simple */
  table.vt-cards > tbody > tr.add-row,
  table.vt-cards > tbody > tr.row-form-errors {
    padding: 4px 14px;
    box-shadow: none;
  }
  table.vt-cards > tbody > tr.add-row > td,
  table.vt-cards > tbody > tr.row-form-errors > td { border-top: 0 !important; }

  /* Wrappers that used to scroll sideways no longer need to */
  .vt-cards-wrap { overflow: visible !important; }
}

/* Wide pages that are not tables but made list pages scroll sideways */
@media (max-width: 1024px) {
  table.vt-cards { min-width: 0 !important; }
  #changelist .actions label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
  #changelist .actions select { max-width: 100%; min-width: 0; }
  /* The filter panel goes under the list instead of squeezing it from the side */
  #changelist { flex-direction: column; }
  #changelist .changelist-form-container { width: 100%; min-width: 0; }
  #changelist-filter { width: 100% !important; flex: 0 0 auto; margin: 20px 0 0 !important; order: 2; }
}
/* Stock dashboard of the Products page: counters stack on phones */
@media (max-width: 767px) {
  .vt-dash-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vt-dash-3, .vt-dash-2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Tablets: two or three cards side by side */
@media (min-width: 640px) and (max-width: 1024px) {
  table.vt-cards > tbody { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  table.vt-cards > tbody > tr.add-row,
  table.vt-cards > tbody > tr.row-form-errors { grid-column: 1 / -1; }
  table.vt-cards.vt-form > tbody { grid-template-columns: minmax(0, 1fr); }
}