/* Drauf & Dran Teamwear / DTF-Kontor
 * dd-mobile.css — Mobile-UX-Utility-Schicht (Welle 1.30.0)
 * © 2026 Jens Richter · jens-richter.com · Alle Rechte vorbehalten.
 *
 * Opt-in. Kein globaler Layout-Override. Nur wiederverwendbare Mobile-Muster:
 * Bottom-Sheet, Drawer, Sticky-Bar, Tabelle→Karten, Touch-Targets, Safe-Area,
 * Sichtbarkeit, Touch-Form, iOS-Autozoom-Fix.
 *
 * Verwendet die bestehenden app.css-Variablen (--accent, --line, --card,
 * --ink, --radius, --shadow-lg …). Nichts hiervon greift, solange eine Seite
 * die .dd-m-*-Klassen nicht aktiv setzt — Ausnahme: der iOS-Autozoom-Fix
 * (global, unkritisch) und die Touch-Target-Mindestgröße über data-Attribut.
 */

:root {
  /* Höhe einer evtl. künftigen Bottom-Nav; heute 0 → Sticky-Bar sitzt unten. */
  --dd-bottom-nav-h: 0px;
  --dd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dd-safe-top: env(safe-area-inset-top, 0px);
  --dd-m-z-sheet: 1300;       /* über Cookie-Hinweis (1200) */
  --dd-m-z-drawer: 1280;
  --dd-m-z-sticky: 1100;
}

/* ============================================================
 * 1) iOS-Autozoom-Fix (global, unkritisch)
 *    iOS Safari zoomt bei Fokus auf Inputs < 16px Schriftgröße.
 *    Nur auf echten Touch-Geräten, damit Desktop-Optik unberührt bleibt.
 * ============================================================ */
@media (max-width: 767px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ============================================================
 * 2) Sichtbarkeits-Utilities
 * ============================================================ */
@media (max-width: 767px) {
  .dd-m-only-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .dd-m-only-mobile { display: none !important; }
}

/* ============================================================
 * 3) Touch-Target — min. 44×44px auf Touch-Geräten
 * ============================================================ */
@media (pointer: coarse) {
  .dd-m-touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
 * 4) Safe-Area-Utilities
 * ============================================================ */
.dd-m-safe-bottom { padding-bottom: var(--dd-safe-bottom); }
.dd-m-safe-top    { padding-top: var(--dd-safe-top); }
.dd-m-safe-sides {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ============================================================
 * 5) Touch-Form — Inputs/Selects/Textareas/Buttons auf ≥44px
 *    Opt-in über Container-Klasse .dd-m-form.
 * ============================================================ */
@media (max-width: 767px) {
  .dd-m-form input:not([type=checkbox]):not([type=radio]),
  .dd-m-form select,
  .dd-m-form textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .dd-m-form textarea { min-height: 88px; }
  /* Radio/Checkbox-Labels als komfortable Tap-Fläche */
  .dd-m-form label.dd-m-choice {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .dd-m-form input[type=checkbox],
  .dd-m-form input[type=radio] {
    width: 22px;
    height: 22px;
    flex: none;
  }
}

/* ============================================================
 * 6) Sticky Action-Bar — persistente untere Aktionsleiste
 *    Nur ≤767px. Sitzt über Safe-Area (+ evtl. Bottom-Nav).
 * ============================================================ */
.dd-m-sticky-bar { display: none; }
@media (max-width: 767px) {
  .dd-m-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--dd-m-z-sticky);
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem calc(.7rem + var(--dd-safe-bottom));
    margin-bottom: var(--dd-bottom-nav-h);
    background: var(--card, #fff);
    border-top: 1px solid var(--line, #e4e7ee);
    box-shadow: 0 -8px 24px -16px rgba(26, 26, 26, .35);
  }
  .dd-m-sticky-bar-btn {
    flex: 1;
    min-height: 48px;
    border: 0;
    border-radius: var(--radius, 10px);
    font-family: var(--font-display, inherit);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    background: var(--accent, #ff3600);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-decoration: none;
  }
  .dd-m-sticky-bar-btn:active { transform: translateY(1px); }
  .dd-m-sticky-bar-btn--secondary {
    flex: 0 0 auto;
    min-width: 48px;
    background: #fff;
    color: var(--ink, #1a1a1a);
    border: 1px solid var(--line, #e4e7ee);
  }
  .dd-m-sticky-bar-amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* Seiten mit Sticky-Bar brauchen unten Luft, sonst verdeckt sie Inhalt. */
  .dd-m-has-sticky {
    padding-bottom: calc(72px + var(--dd-safe-bottom)) !important;
  }
}

/* ============================================================
 * 7) Bottom-Sheet
 * ============================================================ */
.dd-m-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--dd-m-z-sheet);
  background: rgba(13, 13, 13, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dd-m-sheet-backdrop.dd-m-open {
  opacity: 1;
  pointer-events: auto;
}
.dd-m-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--dd-m-z-sheet) + 1);
  background: var(--card, #fff);
  border-radius: 16px 16px 0 0;
  padding: .4rem .9rem calc(1rem + var(--dd-safe-bottom));
  box-shadow: var(--shadow-lg, 0 26px 60px -24px rgba(26, 26, 26, .35));
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1);
  max-height: 82vh;
  overflow-y: auto;
}
.dd-m-sheet.dd-m-open { transform: translateY(0); }
.dd-m-sheet::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--line, #e4e7ee);
  margin: .5rem auto .7rem;
}
.dd-m-sheet-title {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink, #1a1a1a);
  padding: 0 .3rem .6rem;
}
.dd-m-sheet-option {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft, #eceef6);
  padding: .95rem .3rem;
  cursor: pointer;
  color: var(--ink, #1a1a1a);
  font-size: 1rem;
}
.dd-m-sheet-option:first-of-type { border-top: 0; }
.dd-m-sheet-option:active { background: rgba(0, 0, 0, .03); }
.dd-m-sheet-option-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--paper, #f7f8fc);
  color: var(--accent, #ff3600);
}
.dd-m-sheet-option-icon svg { width: 22px; height: 22px; }
.dd-m-sheet-option-text { display: flex; flex-direction: column; gap: .1rem; }
.dd-m-sheet-option-label { font-weight: 600; }
.dd-m-sheet-option-hint { font-size: .82rem; color: var(--muted, #94949a); }
.dd-m-sheet-option--danger .dd-m-sheet-option-icon { color: var(--accent-dark, #d92e00); }
.dd-m-sheet-option--danger .dd-m-sheet-option-label { color: var(--accent-dark, #d92e00); }
.dd-m-sheet-cancel {
  width: 100%;
  margin-top: .6rem;
  min-height: 48px;
  border: 1px solid var(--line, #e4e7ee);
  border-radius: var(--radius, 10px);
  background: #fff;
  color: var(--ink-soft, #3a3f47);
  font-weight: 600;
  cursor: pointer;
}

/* ============================================================
 * 8) Drawer (Off-Canvas, links/rechts)
 * ============================================================ */
.dd-m-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--dd-m-z-drawer);
  background: rgba(13, 13, 13, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dd-m-drawer-backdrop.dd-m-open { opacity: 1; pointer-events: auto; }
.dd-m-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: calc(var(--dd-m-z-drawer) + 1);
  width: min(86vw, 360px);
  background: var(--card, #fff);
  box-shadow: var(--shadow-lg, 0 26px 60px -24px rgba(26, 26, 26, .35));
  padding: calc(1rem + var(--dd-safe-top)) 1.1rem 1.1rem;
  overflow-y: auto;
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.dd-m-drawer--left { left: 0; transform: translateX(-100%); }
.dd-m-drawer--right { right: 0; transform: translateX(100%); }
.dd-m-drawer.dd-m-open { transform: translateX(0); }
.dd-m-drawer-close {
  position: absolute;
  top: calc(.6rem + var(--dd-safe-top));
  right: .6rem;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft, #3a3f47);
  cursor: pointer;
}

/* ============================================================
 * 9) Tabelle → Karten
 *    Pflicht: jede <td> braucht ein data-label. Erste <td> = Card-Titel.
 *    Greift nur ≤767px; Desktop bleibt normale Tabelle.
 * ============================================================ */
@media (max-width: 767px) {
  table.dd-m-table-cards { border: 0; }
  table.dd-m-table-cards thead { display: none; }
  table.dd-m-table-cards,
  table.dd-m-table-cards tbody,
  table.dd-m-table-cards tr,
  table.dd-m-table-cards td { display: block; width: 100%; }
  table.dd-m-table-cards tr {
    border: 1px solid var(--line, #e4e7ee);
    border-radius: var(--radius, 10px);
    margin-bottom: .9rem;
    padding: .3rem .9rem;
    background: #fff;
  }
  table.dd-m-table-cards td {
    border: 0 !important;
    border-top: 1px solid var(--line-soft, #eceef6) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem 0;
    text-align: right;
  }
  table.dd-m-table-cards td:first-child {
    border-top: 0 !important;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink, #1a1a1a);
  }
  table.dd-m-table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted, #94949a);
    text-align: left;
    flex: none;
  }
  /* Zellen ohne Label (z. B. Entfernen-Button) ohne Präfix, rechtsbündig. */
  table.dd-m-table-cards td[data-label=""]::before,
  table.dd-m-table-cards td:not([data-label])::before { content: none; }
  table.dd-m-table-cards td[data-label=""],
  table.dd-m-table-cards td:not([data-label]) { justify-content: flex-end; }
}

/* ============================================================
 * 10) Seitenspezifisch: Kasse-Grid (Welle 1.30.0)
 *     Desktop zweispaltig (Form | Übersicht), Phone einspaltig mit
 *     Bestellübersicht ZUERST (order), darunter das Formular.
 * ============================================================ */
.kasse-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 767px) {
  .kasse-grid { grid-template-columns: 1fr; gap: 22px; }
  .kasse-grid > form { order: 2; }
  .kasse-grid > .form-card:last-child { order: 1; }
}

/* Payment-/Konto-Wahl-Labels als komfortable Tap-Flächen (ohne Markup-Umbau:
 * greift über die bestehende Inline-Struktur via .dd-m-choice am <label>). */
@media (max-width: 767px) {
  .dd-m-form label.dd-m-choice { padding-top: .85rem; padding-bottom: .85rem; }
}