/* AfA-Rechner: mobile result containment.
   Desktop keeps the full table. On phones, the schedule becomes stacked cards
   so a 760px table can never widen the viewport after calculation. */

@media (max-width: 1023px) {
  main:has(table.min-w-\[760px\]) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  main:has(table.min-w-\[760px\]) > div.mx-auto.grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden;
    overflow-x: clip;
  }

  main:has(table.min-w-\[760px\]) > div.mx-auto.grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main:has(table.min-w-\[760px\]) section,
  main:has(table.min-w-\[760px\]) section > *,
  main:has(table.min-w-\[760px\]) .grid > * {
    min-width: 0;
    max-width: 100%;
  }

  main:has(table.min-w-\[760px\]) .overflow-x-auto {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  main:has(table.min-w-\[760px\]) .grid.grid-cols-2 > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Phone layout: one self-contained card per AfA year instead of a wide table. */
@media (max-width: 639px) {
  .overflow-x-auto > table.min-w-\[760px\] {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  .overflow-x-auto > table.min-w-\[760px\] thead {
    display: none;
  }

  .overflow-x-auto > table.min-w-\[760px\] tbody {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.75rem;
  }

  .overflow-x-auto > table.min-w-\[760px\] tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--color-muted) 42%, transparent);
  }

  .overflow-x-auto > table.min-w-\[760px\] tbody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .overflow-x-auto > table.min-w-\[760px\] tbody td::before {
    display: block;
    margin-bottom: 0.16rem;
    color: var(--color-muted-foreground);
    font-size: 0.64rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(1)::before { content: "Jahr"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(2)::before { content: "Methode"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(3)::before { content: "Anfang"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(4)::before { content: "AfA-Satz"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(5)::before { content: "Reguläre AfA"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(6)::before { content: "Sonder-AfA"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(7)::before { content: "Gesamt"; }
  .overflow-x-auto > table.min-w-\[760px\] tbody td:nth-child(8)::before { content: "Restbuchwert"; }

  /* The summary is easier to scan as a single column on very narrow phones. */
  main:has(table.min-w-\[760px\]) .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}