/* All simple data tables become labelled records at the mobile breakpoint. */
@media (max-width: 767px) {
  #root table[data-ge-records] { display: block; width: 100%; min-width: 0 !important; max-width: 100%; }
  #root [data-ge-records] colgroup { display: none; }
  /* Keep real headers available to assistive technology. */
  #root [data-ge-records] > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #root [data-ge-records] > :is(tbody, tfoot) { display: block; width: 100%; }
  #root [data-ge-records] > :is(tbody, tfoot) > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px 16px; border-bottom: 1px solid #dbe6ed; }
  #root [data-ge-records] > :is(tbody, tfoot) > tr:last-child { border-bottom: 0; }
  #root [data-ge-records] > :is(tbody, tfoot) > tr > td { display: block; width: auto; min-width: 0; max-width: 100%; padding: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #root [data-ge-records] td[data-ge-label]:not([data-ge-label=""])::before { content: attr(data-ge-label); display: block; margin-bottom: 5px; font: 600 11px/1.4 Inter, sans-serif; letter-spacing: .02em; color: #526b7d; }
  #root [data-ge-records] td[data-ge-wide] { grid-column: 1 / -1; }
  #root [data-ge-records] td[data-ge-primary] { font-weight: 600; font-size: 14px; order: -1; }
  #root [data-ge-records] td[data-ge-empty] { display: none; }
  #root [data-ge-records] td .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
  #root [data-ge-records] td :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { max-width: 100%; min-width: 0; }
  #root [data-ge-records] td button { min-height: 44px; min-width: 44px; }
  #root [data-ge-records] tr[data-ge-detail] { background: #f0f7fa; margin-left: 12px; border-left: 2px solid #8bcbd9; }
  #root .sf-pan-wrap:has(> [data-ge-records])::before,
  #root .sf-pan-wrap:has(> [data-ge-records])::after { display: none; }
  #root [data-ge-category] { gap: 12px; text-align: left; }
  #root [data-ge-category] > div { min-width: 0; flex-wrap: wrap; }
  #root [data-ge-category] > div > span:first-of-type { flex: 1 1 calc(100% - 24px); }
  #root [data-ge-category] > div > span:not(:first-of-type) { white-space: nowrap; }
}
@media (max-width: 359px) {
  #root [data-ge-records] > :is(tbody, tfoot) > tr { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  #root [data-ge-records] > thead:has(:is(input,button,select,a)) { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  #root [data-ge-records] > thead:has(:is(input,button,select,a)) > tr { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  #root [data-ge-records] > thead:has(:is(input,button,select,a)) th:not(:has(:is(input,button,select,a))) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
  #root [data-ge-records] > thead th:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; }
  #root [data-ge-records] > thead th:has(input[type="checkbox"])::after { content: "Selecionar todos"; font-size: 12px; color: #526b7d; }
}

/* Current stock: fixed reading order, with compact and clearly named actions. */
@media (max-width: 767px) {
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) {
    grid-template-columns: minmax(0, 1fr) minmax(90px, .65fr);
    grid-template-areas: "product product" "sku total" "level level" "expand alert";
    gap: 10px 12px; padding: 16px; align-items: start;
  }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td { order: 0; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(1) { grid-area: expand; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(2) { grid-area: product; line-height: 1.5; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(3) { grid-area: sku; align-self: center; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(4) { grid-area: total; text-align: right; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(5) { grid-area: level; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(6) { grid-area: alert; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:is(:nth-child(1),:nth-child(2),:nth-child(6))::before { display: none; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:is(:nth-child(1),:nth-child(6)) > button {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 8px; border: 1px solid #dbe6ed; border-radius: 8px; color: #365969; background: #f5f9fb;
    font: 500 12px/1.4 Inter, sans-serif;
  }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(1) > button::after { content: "Armazéns"; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr:not([data-ge-detail]) > td:nth-child(6) > button::after { content: "Alerta"; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr[data-ge-detail] {
    grid-template-columns: minmax(0, 1fr) auto; margin: 0; padding: 12px 16px; gap: 12px; align-items: center;
  }
  #root table[data-ge-records][data-ge-stock] > tbody > tr[data-ge-detail] > td[data-ge-wide] { grid-column: auto; }
  #root table[data-ge-records][data-ge-stock] > tbody > tr[data-ge-detail] > td[data-ge-label="Total"] { text-align: right; }
}

/* Parts use the same spacing, reading order and touch targets as stock. */
#root [data-ge-part-card] h3 { line-height: 1.5; overflow-wrap: anywhere; }
#root [data-ge-part-card] .font-mono { overflow-wrap: anywhere; }
#root [data-ge-part-card] :is([data-ge-part-edit],[data-ge-part-delete]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 12px; border: 1px solid #dbe6ed; background: #f5f9fb; color: #365969;
}
#root [data-ge-part-edit]::after { content: "Editar"; font-size: 12px; }
#root [data-ge-part-delete]::after { content: "Excluir"; font-size: 12px; }
#root [data-ge-part-card] [data-ge-part-delete] { color: #b42318; }
#root [data-ge-part-card] .justify-between { flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
  #root [data-ge-parts-list] { display: block; padding: 0; }
  #root [data-ge-part-card] { border: 0; border-bottom: 1px solid #dbe6ed; border-radius: 0; box-shadow: none; }
  #root [data-ge-part-card]:last-child { border-bottom: 0; }
  #root [data-ge-part-card] > .h-1\.5 { display: none; }
  #root [data-ge-part-card] > .p-4 { padding: 16px; }
  #root [data-ge-part-card] .line-clamp-2 { display: block; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr {
    grid-template-columns: minmax(0, 1fr) minmax(90px, .65fr);
    grid-template-areas: "part part" "sku total" "shelf category";
    padding: 16px; gap: 10px 12px; align-items: start;
  }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(1) { grid-area: part; line-height: 1.5; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(1)::before { display: none; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(2) { grid-area: sku; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(3) { grid-area: shelf; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(4) { grid-area: category; }
  #root table[data-ge-records][data-ge-parts-stock] > tbody > tr > td:nth-child(5) { grid-area: total; text-align: right; }
  #root .flex:has(> input[placeholder="Buscar peça..."]) { flex-wrap: wrap; }
  #root input[placeholder="Buscar peça..."] { width: 100%; margin-left: 0; }
}

#root [data-ge-part-card] > .p-4 > .items-start { flex-wrap: nowrap; }
#root [data-ge-part-card] > .p-4 > .items-start > div:first-child { flex: 1; min-width: 0; }

/* Product catalogue follows the stock record hierarchy on small screens. */
@media (max-width: 767px) {
  #root table[data-ge-records][data-ge-products] > tbody > tr[data-ge-product-row] {
    grid-template-columns: minmax(0, 1fr) minmax(80px, .65fr);
    grid-template-areas: "name name" "sku unit" "maker maker" "info info" "actions actions";
    padding: 16px; gap: 10px 12px; align-items: start;
  }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(1),
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(5) { display: none; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(2) { grid-area: name; line-height: 1.5; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(2)::before,
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(8)::before { display: none; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(2) p { max-width: none; margin-top: 4px; color: #526b7d; font-weight: 400; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(3) { grid-area: sku; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(4) { grid-area: maker; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(6) { grid-area: unit; text-align: right; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(7) { grid-area: info; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(7) > div { gap: 6px; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(8) { grid-area: actions; padding-top: 4px; }
  #root [data-ge-products] [data-ge-product-row] > td:nth-child(8) > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #root [data-ge-products] :is([data-ge-product-edit],[data-ge-product-delete]) {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    padding: 8px 12px; border: 1px solid #dbe6ed; border-radius: 8px; background: #f5f9fb; color: #365969;
  }
  #root [data-ge-product-edit]::after { content: "Editar"; font-size: 12px; }
  #root [data-ge-product-delete]::after { content: "Excluir"; font-size: 12px; }
  #root [data-ge-products] [data-ge-product-delete] { color: #b42318; }
  #root table[data-ge-products] > tbody > tr[data-ge-product-group] { display: block; padding: 12px 16px; }
  #root [data-ge-product-group] .uppercase { text-transform: none; letter-spacing: normal; font-size: 13px; line-height: 1.5; }
}