/* ════════════════════════════════════════════════════════════════
   produkte-mobile.css

   Mobile (≤ 800px) styles for produkte.html.
   Prefix: .pm-* (Produkte-Mobile).
   Tokens from tovaglia-design-tokens.css.
   m.html / index.html / cards.html / hub.html: NOT affected.
════════════════════════════════════════════════════════════════ */

@media (max-width: 800px) {

  /* Hide desktop 2-pane grid (cascade-order makes this authoritative — link comes
     after inline <style> block in produkte.html, so no !important needed) */
  .p-body { display: none; }
  .p-header { display: none; }

  /* Mobile root container */
  #p-mobile-root {
    flex: 1; display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--text);
    min-height: 0;
  }

  /* ── Page Header ────────────────────────────────────────── */
  .pm-header {
    height: var(--t-touch-comfy);
    padding: 0 var(--t-mobile-pad-x);
    padding-top: var(--t-safe-top);
    position: sticky; top: 0; z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: var(--t-mobile-gap);
    flex-shrink: 0;
  }
  .pm-back-btn,
  .pm-action-btn {
    min-width: var(--t-touch-min); height: var(--t-touch-min);
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    transition: background 0.15s, border-color 0.15s;
  }
  .pm-back-btn:hover,
  .pm-action-btn:hover {
    background: var(--surface);
    border-color: rgba(122,31,46,0.3);
  }
  .pm-header-title {
    flex: 1; font-size: var(--t-fz-mobile-body);
    font-weight: 500; letter-spacing: 0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 65%;
  }

  /* ── Sub-Header (Tab-Switch) ────────────────────────────── */
  .pm-tabs {
    display: flex;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pm-tab {
    flex: 1; height: var(--t-touch-min);
    background: transparent; border: none;
    color: var(--text3);
    font-family: 'Jost', sans-serif;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .pm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* ── Page Body (scrollable) ─────────────────────────────── */
  .pm-body {
    flex: 1; min-height: 0; overflow-y: auto;
  }

  /* ── List Row ───────────────────────────────────────────── */
  .pm-row {
    min-height: var(--t-row-mobile);
    padding: var(--t-mobile-pad-y) var(--t-mobile-pad-x);
    display: flex; align-items: center; gap: var(--t-mobile-gap);
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.1s;
  }
  .pm-row:hover { background: rgba(255,255,255,0.02); }
  .pm-row.hidden-row { opacity: 0.4; }
  .pm-row.hidden-row .pm-row-name { text-decoration: line-through; }
  .pm-row-name {
    flex: 1; font-size: var(--t-fz-mobile-body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pm-row-meta {
    font-size: var(--t-fz-mobile-meta); color: var(--text3);
    margin-top: 2px;
  }
  .pm-row-count {
    font-size: var(--t-fz-mobile-meta); color: var(--text3);
    flex-shrink: 0;
  }
  .pm-row-action {
    min-width: var(--t-touch-min); height: var(--t-touch-min);
    background: var(--surface2); border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text3);
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .pm-row-action:hover {
    background: var(--surface);
    border-color: rgba(122,31,46,0.3);
  }
  .pm-row-action.on {
    color: var(--accent);
    background: rgba(122,31,46,0.06);
    border-color: rgba(122,31,46,0.25);
  }
  .pm-row-action[disabled] {
    opacity: 0.3; pointer-events: none;
  }
  .pm-row-thumb {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); border-radius: 3px;
    background-size: cover; background-position: center;
    flex-shrink: 0;
  }
  .pm-row-chevron { color: var(--text3); flex-shrink: 0; }

  /* ── Add-Bar (sticky bottom) ────────────────────────────── */
  .pm-add-bar {
    position: sticky; bottom: 0; z-index: 5;
    padding: var(--t-mobile-pad-y) var(--t-mobile-pad-x);
    padding-bottom: calc(var(--t-mobile-pad-y) + var(--t-safe-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex; gap: var(--t-mobile-gap);
    flex-shrink: 0;
  }
  .pm-add-bar input {
    flex: 1; min-height: var(--t-touch-min);
    font-size: var(--t-fz-mobile-body);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); color: var(--text);
    padding: 0 12px; border-radius: 4px;
    font-family: 'Jost', sans-serif;
  }
  .pm-add-bar input:focus { border-color: var(--accent-dim); outline: none; }
  .pm-add-bar button {
    min-width: var(--t-touch-min); height: var(--t-touch-min);
  }

  /* ── Form Fields (Detail-Page) ──────────────────────────── */
  .pm-form-section { padding: var(--t-mobile-pad-y) var(--t-mobile-pad-x); }
  .pm-field-lbl {
    font-size: var(--t-fz-mobile-label);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text3); margin-bottom: 4px;
  }
  .pm-field-in {
    width: 100%; min-height: var(--t-touch-min);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); color: var(--text);
    font-family: 'Jost', sans-serif; font-size: var(--t-fz-mobile-body);
    padding: 10px 12px; border-radius: 4px; outline: none;
    transition: border-color 0.15s;
  }
  .pm-field-in:focus { border-color: var(--accent); }
  textarea.pm-field-in { min-height: 80px; resize: vertical; }
  .pm-field-charcount {
    font-size: var(--t-fz-mobile-label); color: var(--text3);
    text-align: right; margin-top: 2px;
  }

  /* ── Image-Upload Zone ──────────────────────────────────── */
  .pm-img-drop {
    min-height: 100px; padding: 16px;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 4px; text-align: center;
    background: rgba(255,255,255,0.015);
    color: var(--text3); font-size: var(--t-fz-mobile-body);
    position: relative; overflow: hidden;
    cursor: pointer;
  }
  .pm-img-drop input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
  }
  .pm-img-info {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: 3px;
  }

  /* ── Allergen 4-col Grid ────────────────────────────────── */
  .pm-allergen-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  }
  .pm-allergen-grid .al-chip {
    min-height: var(--t-touch-min);
    min-width: 0;
    padding: 6px 4px;
  }

  /* ── Variants Editor ────────────────────────────────────── */
  .pm-variant-row {
    display: flex; gap: 6px; margin-bottom: 6px;
  }
  .pm-variant-row .pm-field-in { min-height: var(--t-touch-min); }
  .pm-variant-row .pm-variant-price-in { width: 90px; flex-shrink: 0; }
  .pm-variant-row button {
    min-width: var(--t-touch-min); height: var(--t-touch-min);
  }

  /* ── Detail Footer Actions (sticky bottom) ──────────────── */
  .pm-detail-footer {
    position: sticky; bottom: 0; z-index: 5;
    padding: var(--t-mobile-pad-y) var(--t-mobile-pad-x);
    padding-bottom: calc(var(--t-mobile-pad-y) + var(--t-safe-bottom));
    display: flex; gap: var(--t-mobile-gap);
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pm-detail-footer button {
    flex: 1; height: var(--t-touch-min);
  }
  .pm-detail-footer button.pm-btn-danger { color: var(--danger); }

  /* ── Overflow Popover ───────────────────────────────────── */
  .pm-popover {
    position: fixed; z-index: 100;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 180px; padding: 4px;
  }
  .pm-popover button {
    width: 100%; min-height: var(--t-touch-min);
    background: transparent; border: none; color: var(--text);
    font-family: 'Jost', sans-serif; font-size: var(--t-fz-mobile-body);
    padding: 0 12px; text-align: left; cursor: pointer;
    border-radius: 4px;
  }
  .pm-popover button:hover { background: rgba(255,255,255,0.06); }
  .pm-popover button.pm-btn-danger { color: var(--danger); }
  .pm-popover-backdrop {
    position: fixed; inset: 0; z-index: 99; background: transparent;
  }

  /* ── Bottom Sheet (Item-Picker for Combos) ──────────────── */
  .pm-sheet-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: flex-end;
  }
  .pm-sheet {
    width: 100%; max-height: 85vh;
    background: var(--surface); color: var(--text);
    border-radius: 12px 12px 0 0;
    display: flex; flex-direction: column;
    padding-bottom: var(--t-safe-bottom);
  }
  .pm-sheet-handle {
    width: 36px; height: 4px;
    background: var(--text3);
    margin: 8px auto 4px; border-radius: 2px;
    opacity: 0.4;
  }
  .pm-sheet-header {
    padding: 8px var(--t-mobile-pad-x);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .pm-sheet-body { flex: 1; overflow-y: auto; padding: var(--t-mobile-pad-y) 0; }
  .pm-sheet-search {
    margin: 0 var(--t-mobile-pad-x) var(--t-mobile-pad-y);
  }

  /* ── Empty state ────────────────────────────────────────── */
  .pm-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text3); font-size: var(--t-fz-mobile-body);
  }
  .pm-empty-arrow {
    margin-top: 8px; font-size: 18px; opacity: 0.4;
  }

  /* ── Save-Status-Icon ───────────────────────────────────── */
  .pm-save-status {
    font-size: 14px; color: var(--text3); padding: 0 4px;
  }
  .pm-save-status.syncing { color: var(--accent); }
  .pm-save-status.synced  { color: var(--success); }
  .pm-save-status.error   { color: var(--danger); }
  .pm-save-status.offline { color: var(--text3); opacity: 0.6; }

  /* ── Preview-Page (m.html-Style Container) ──────────────── */
  .pm-preview-frame {
    flex: 1; min-height: 0; overflow-y: auto;
    background: var(--bg);
  }

  /* Visibility-toggle row (Detail-Page SICHTBARKEIT section) */
  .pm-toggle-row {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px;
    width: 100%;
    text-align: left;
    background: var(--surface2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--t-mobile-gap);
    color: var(--text);
    font-family: 'Jost', sans-serif;
    font-size: var(--t-fz-mobile-body);
    transition: background 0.15s, border-color 0.15s;
  }
  .pm-toggle-row:hover {
    background: var(--surface);
    border-color: rgba(122,31,46,0.3);
  }
}

/* ── Light-Theme Overrides ────────────────────────────────── */
@media (max-width: 800px) {
  [data-ui-theme="light"] .pm-header,
  [data-ui-theme="light"] .pm-tabs,
  [data-ui-theme="light"] .pm-add-bar,
  [data-ui-theme="light"] .pm-detail-footer,
  [data-ui-theme="light"] .pm-popover,
  [data-ui-theme="light"] .pm-sheet { background: #FFFFFF; }
  [data-ui-theme="light"] .pm-row { border-color: rgba(26,24,22,0.12); }
  [data-ui-theme="light"] .pm-row:hover { background: rgba(0,0,0,0.02); }
  [data-ui-theme="light"] .pm-field-in,
  [data-ui-theme="light"] .pm-add-bar input { background: #FAFAF7; border-color: rgba(26,24,22,0.2); color: #1A1816; }
  [data-ui-theme="light"] .pm-popover button:hover { background: rgba(0,0,0,0.04); }
  [data-ui-theme="light"] .pm-back-btn,
  [data-ui-theme="light"] .pm-action-btn,
  [data-ui-theme="light"] .pm-row-action {
    background: #FAFAF7;
    border-color: rgba(26,24,22,0.18);
  }
  [data-ui-theme="light"] .pm-back-btn:hover,
  [data-ui-theme="light"] .pm-action-btn:hover,
  [data-ui-theme="light"] .pm-row-action:hover {
    background: #F4EFE8;
    border-color: rgba(122,31,46,0.4);
  }
  [data-ui-theme="light"] .pm-row-action.on {
    background: rgba(122,31,46,0.08);
    border-color: rgba(122,31,46,0.4);
  }
  [data-ui-theme="light"] .pm-img-drop {
    border-color: rgba(26,24,22,0.22);
    background: #FAFAF7;
    color: var(--text2);
  }
  [data-ui-theme="light"] .pm-img-info {
    background: #FAFAF7;
    border-color: rgba(26,24,22,0.18);
  }
  [data-ui-theme="light"] .pm-toggle-row {
    background: #FAFAF7;
    border-color: rgba(26,24,22,0.18);
    color: #1A1816;
  }
  [data-ui-theme="light"] .pm-toggle-row:hover {
    background: #F4EFE8;
    border-color: rgba(122,31,46,0.4);
  }
}