/*
 * 6Flaschen WeinApp – Finales Desktop-/Mobile-Release-Hardening
 * Build 8.5.70 · 03.09.2026
 *
 * Letzte, bewusst kleine Schutzschicht gegen Reflow-, Overflow-, Footer- und
 * Actionbar-Probleme. Keine Fachlogik, keine Farben-/Design-Neudefinition.
 */

:root {
  --release-safe-inline: max(12px, env(safe-area-inset-left));
  --release-safe-inline-end: max(12px, env(safe-area-inset-right));
  --release-safe-bottom: max(16px, env(safe-area-inset-bottom));
  --release-mobile-nav-reserve: calc(104px + env(safe-area-inset-bottom));
}

html,
body {
  min-width: 0;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

:is(main, section, article, aside, header, footer, nav, form, fieldset, details, dialog, .app-shell, .app-container, .card, .field, .form-grid, .detail-grid, .public-container) {
  min-width: 0;
}

:is(img, picture, video, canvas, svg) {
  max-width: 100%;
}

picture,
img,
video,
canvas {
  height: auto;
}

:is(h1, h2, h3, h4, p, li, dd, dt, .card-title, .card-text, .page-title, .page-subtitle, .wine-title, .result-wine-name, .archive-wine-name) {
  overflow-wrap: anywhere;
}

:is(input, select, textarea, button) {
  max-width: 100%;
}

/* Dialoge dürfen weder auf kleinen Phones noch bei Browser-Zoom aus dem
   Viewport laufen. */
dialog,
[role="dialog"] {
  max-width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

dialog[open] {
  overflow: auto;
  overscroll-behavior: contain;
}

/* Tabellen bleiben semantische Tabellen. Der Scrollcontainer übernimmt die
   horizontale Ausweichbewegung statt Zeichen-/Wortzerlegung. */
:is(.table-wrap, .admin-table-wrap, .admin-ops-table-wrap, .admin-user-table-wrap, .admin-user-credit-table-wrap, .credit-history-wrap, .credit-history-table, .archive-table-wrap) {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:is(.table-wrap, .admin-table-wrap, .admin-ops-table-wrap, .admin-user-table-wrap, .admin-user-credit-table-wrap, .credit-history-wrap, .archive-table-wrap) :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
}

/* Fixed/floating Controls müssen oberhalb mobiler Navigation und Safe Area
   bleiben. Die Selektoren sind absichtlich auf bereits bekannte Controls
   begrenzt. */
@media (max-width: 900px) {
  body:not(.public-page) {
    padding-bottom: var(--release-mobile-nav-reserve);
  }

  body:not(.public-page) :is(.archive-mobile-top-link, .back-to-top, .ui-floating-control, [data-floating-control]) {
    bottom: calc(var(--release-mobile-nav-reserve) + 8px);
  }

  body:not(.public-page) :is(.sticky-actions, .wizard-sticky-actions, .mobile-sticky-actions, .fixed-actions) {
    padding-bottom: var(--release-safe-bottom);
  }
}

/* 200-%-Zoom/Reflow und kleine Phones: keine erzwungenen Mehrspaltenlayouts
   bei den zentralen Workflows. */
@media (max-width: 760px) {
  body:not(.public-page) .app-shell {
    padding-left: var(--release-safe-inline);
    padding-right: var(--release-safe-inline-end);
  }

  body:not(.public-page) .app-container {
    width: 100%;
    max-width: 100%;
  }

  :is(
    .form-grid,
    .detail-grid,
    .label-upload-grid,
    .credit-kpi-grid,
    .credit-packages,
    .recommendation-grid,
    .wine-recommendation-grid,
    .weincheck-grid,
    .profile-grid,
    .archive-controls-grid
  ) {
    min-width: 0;
  }

  :is(.form-actions, .ui-actions, .auth-actions, .detail-primary-actions, .tasting-result-actions, .private-response-actions) {
    max-width: 100%;
  }

  :is(.form-actions, .ui-actions, .auth-actions, .detail-primary-actions, .tasting-result-actions, .private-response-actions) > :is(button, .btn, .ui-button, a.btn) {
    min-width: 0;
    max-width: 100%;
  }

  .wine-recommendation-page :is(.recommendation-card, .wine-recommendation-card),
  .weincheck-page :is(.weincheck-card, .weincheck-result-card),
  .coastal-profile-page :is(.profile-card, .profile-r19-card),
  .coastal-archive-page :is(.archive-card, .archive-wine-card),
  .tasting-result-page :is(.card, .result-card),
  .detail-coastal-page :is(.card, .detail-card) {
    max-width: 100%;
    min-width: 0;
  }

  /* Native Dialoge benötigen bei Touch einen sicheren Innenabstand. */
  dialog,
  [role="dialog"] {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 480px) {
  :root {
    --release-safe-inline: max(9px, env(safe-area-inset-left));
    --release-safe-inline-end: max(9px, env(safe-area-inset-right));
  }

  body:not(.public-page) :is(.form-actions, .ui-actions, .auth-actions, .detail-primary-actions, .tasting-result-actions, .private-response-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body:not(.public-page) :is(.form-actions, .ui-actions, .auth-actions, .detail-primary-actions, .tasting-result-actions, .private-response-actions) > :is(button, .btn, .ui-button, a.btn) {
    width: 100%;
  }

  /* Pagination darf auf 320–390 px nicht auseinanderlaufen. */
  .archive-mobile-page-nav,
  .archive-pagination,
  .pagination {
    max-width: 100%;
    min-width: 0;
  }

  .archive-mobile-page-nav :is(a, button),
  .archive-pagination :is(a, button),
  .pagination :is(a, button) {
    min-width: 44px;
    min-height: 44px;
  }

  /* Public CTA-/Footer-Gruppen müssen bei Textzoom umbrechen können. */
  body.public-page :is(.public-hero__actions, .public-actions, .public-footer__nav, .public-footer__bottom) {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

/* Desktop: zu breite Aktionsleisten begrenzen, ohne bestehende Spaltenraster zu
   verändern. */
@media (min-width: 901px) {
  body:not(.public-page) :is(.form-actions, .detail-primary-actions, .tasting-result-actions) {
    max-width: 100%;
  }
}

/* Windows High Contrast / Forced Colors: native Grenzen statt unsichtbarer
   Schatten für dialog-/kartenartige Interaktion. */
@media (forced-colors: active) {
  dialog,
  [role="dialog"],
  .card {
    border: 1px solid CanvasText;
  }
}