/* ════════════════════════════════════════════════════════════════════════
   sh-pte-mobile.css — Positionseditor als Karten-Liste + Bottom-Sheet
   (≤768px, Partner: sh-pte-mobile.js). Additiv; Desktop unberührt.
   Das Quer-Scroll-Raster bleibt über „⊞ Tabelle" jederzeit erreichbar
   (Funktionsparität, z. B. Spalten-Konfiguration).
   ════════════════════════════════════════════════════════════════════════ */

/* Karten-Schicht existiert nur, wenn das JS sie baut (≤768px). */
.ptm-cards { display: none; }

@media (max-width: 768px) {
  /* Karten-Modus: Raster verborgen (bleibt Datenquelle im DOM),
     Tabellen-Modus („⊞ Tabelle"): klassisches Verhalten. */
  .ptm-active .pte-scroll-wrap { display: none; }
  .ptm-active.ptm-table-mode .pte-scroll-wrap { display: block; }
  .ptm-active .ptm-cards { display: block; padding: 4px 0 2px; }
  /* Tabellen-Modus: nur die Karten verschwinden — die Kopfzeile mit dem
     „▤ Karten"-Umschalter MUSS erreichbar bleiben (sonst kein Weg zurück). */
  .ptm-active.ptm-table-mode .ptm-cards .ptm-card,
  .ptm-active.ptm-table-mode .ptm-cards .ptm-sep,
  .ptm-active.ptm-table-mode .ptm-cards .ptm-empty { display: none; }

  .ptm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 8px;
  }
  .ptm-head__count { font-size: 12.5px; font-weight: 600; color: var(--elmetic-muted, #9A8F84); }
  .ptm-btn {
    border: 1px solid var(--elmetic-border, #EEE5DC);
    background: var(--elmetic-card, #fff);
    color: var(--elmetic-text-2, #463D35);
    border-radius: 10px;
    padding: 8px 12px;
    min-height: 38px;
    font-size: 13px;
  }

  .ptm-card {
    background: var(--elmetic-card, #fff);
    border: 1px solid var(--elmetic-border, #EEE5DC);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 6px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .05);
  }
  .ptm-card--tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ptm-card--tap:active { transform: scale(.985); transition: transform .08s ease; }
  /* Tap-Affordance: Chevron rechts (nur bearbeitbare Karten). */
  .ptm-card--tap { position: relative; padding-right: 26px; }
  .ptm-card--tap::after {
    content: '›';
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 18px; color: var(--elmetic-muted, #9A8F84);
  }

  .ptm-card__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .ptm-card__title { font-weight: 600; font-size: 14.5px; color: var(--elmetic-text, #231C17); min-width: 0; }
  .ptm-card__total { font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ptm-card__art { font-size: 11.5px; color: var(--elmetic-muted, #9A8F84); margin-top: 1px; }
  .ptm-card__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
  .ptm-chip {
    background: var(--elmetic-bg-soft, #F6F1EB);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--elmetic-text-2, #463D35);
  }
  .ptm-chip small { color: var(--elmetic-muted, #9A8F84); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; }

  .ptm-card--group {
    background: var(--elmetic-bg-soft, #F6F1EB);
    border: 0;
    box-shadow: none;
    font-weight: 700;
    font-size: 13px;
    margin: 10px 0 6px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
  }
  .ptm-card--heading { font-weight: 700; }
  .ptm-card--text { color: var(--elmetic-text-2, #463D35); font-size: 13px; }
  .ptm-card--system { opacity: .85; }
  .ptm-sep { border-top: 1px dashed var(--elmetic-border-strong, #E3D9CE); margin: 8px 4px; }
  .ptm-empty { text-align: center; color: var(--elmetic-muted, #9A8F84); font-size: 13px; padding: 18px 8px; }

  /* Sheet-Innenleben (Rahmen/Animation kommt von dialog.modal, sh-mobile-app.css). */
  .ptm-sheet { padding: 14px 16px; }
  .ptm-sheet__title { margin: 0 0 10px; font-size: 16px; }
  .ptm-sheet .field-label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
  .ptm-sheet .field-label input { width: 100%; }
  .ptm-wide { width: 100%; margin: 2px 0 10px; min-height: 44px; }
  .ptm-rowactions { display: flex; gap: 8px; margin: 2px 0 6px; }
  .ptm-rowactions .btn { flex: 1 1 0; min-height: 44px; }
  .ptm-danger { color: var(--elmetic-red, #E73D25); border-color: color-mix(in srgb, var(--elmetic-red, #E73D25) 40%, transparent); }
}