/* ── Interactive Service-view demo — self-contained ─────────────────────────
   Faithful click-through replica of the real phone Service view
   (frontend/src/views/service/ServiceView.vue) with its 4 bottom tabs:
   Aufnehmen · Bestellungen · Rechnungen · Reservierungen. Rendered by
   /landing/service-demo.js from localStorage state. CSS ported from
   index.html's inline .vue-shot mocks and re-scoped under .service-demo.
   Nothing here depends on app.js. */

.service-demo {
  --c-bg: #2B2B2B;
  --c-bg-soft: #333333;
  --c-bg-muted: #3A3A3A;
  --c-border: #484848;
  --c-text: #E0E0E0;
  --c-text-secondary: #9E9E9E;
  --c-primary: #FFC66D;
  --c-primary-dark: #E5A84A;
  --c-success: #4ADE80;
  --c-warning: #D9A441;
  --c-error: #F87171;
  --c-info: #6BA8FF;
  font-family: 'Hanken Grotesk', 'Hanken Fallback Roboto', 'Hanken Fallback Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--c-text);
}

/* ── Phone frame ── */
.service-demo-phone {
  width: min(100%, 22rem);
  margin: 0 auto;
  border-radius: 30px;
  padding: 0.8rem;
  background: linear-gradient(145deg, #111, #3A3A3A);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
.service-demo-screen {
  border-radius: 22px;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid #484848;
  position: relative;
  height: 40rem;
}

/* ── View shell: header + scroll body + fixed tab bar ── */
.sv-view { display: flex; flex-direction: column; height: 100%; }
.sv-topbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.85rem; background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border); flex-shrink: 0;
}
.sv-topbar__title { font-size: 0.95rem; font-weight: 700; color: var(--c-primary); letter-spacing: 0.02em; }
.sv-topbar__sub { font-size: 0.62rem; color: var(--c-text-secondary); }
.sv-count { margin-left: auto; background: var(--c-primary); color: #1a1a1a; font-weight: 800; font-size: 0.68rem; border-radius: 999px; padding: 0.08rem 0.5rem; min-width: 20px; text-align: center; }
.sv-body { flex: 1; overflow-y: auto; padding: 0.7rem; padding-bottom: 0.9rem; }
.service-demo .sv-pane-title {
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 0.55rem;
}
.sv-empty { padding: 2.5rem 1rem; text-align: center; color: var(--c-text-secondary); font-size: 0.78rem; }

/* ── Bottom tab bar ── */
.sv-tabbar {
  height: 58px; display: flex; align-items: stretch;
  background: var(--c-bg-soft); border-top: 1px solid var(--c-border); flex-shrink: 0;
}
.sv-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 2px; color: var(--c-text-secondary); background: transparent;
  border: 0; font-size: 0.58rem; font-weight: 500; line-height: 1; position: relative;
  cursor: pointer; font-family: inherit;
}
.sv-tab svg { width: 21px; height: 21px; }
.sv-tab--active { color: var(--c-primary); }
.sv-tab--active::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--c-primary); border-radius: 0 0 2px 2px; }
.sv-tab-badge {
  position: absolute; top: 3px; left: 50%; margin-left: 4px;
  background: var(--c-error); color: #fff; font-size: 0.55rem; font-weight: 800;
  min-width: 15px; height: 15px; border-radius: 999px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Reservierungen: week strip + cards ── */
.sv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.7rem; }
.sv-cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  padding: 0.32rem 0.1rem; background: var(--c-bg-soft); border: 1px solid var(--c-border);
  border-radius: 7px; cursor: pointer; font-family: inherit;
}
.sv-cal-day--today { border-color: var(--c-info); }
.sv-cal-day--selected { border-color: var(--c-primary); background: var(--c-primary); }
.sv-cal-day--selected .sv-cal-name, .sv-cal-day--selected .sv-cal-num, .sv-cal-day--selected .sv-cal-count { color: #2B2B2B; }
.sv-cal-name { font-size: 0.52rem; color: var(--c-text-secondary); text-transform: uppercase; }
.sv-cal-num { font-size: 0.76rem; color: var(--c-text); font-weight: 800; }
.sv-cal-count { font-size: 0.52rem; color: var(--c-warning); font-weight: 800; min-height: 0.7rem; }

.sv-res-card {
  background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 8px;
  padding: 0.5rem 0.6rem; margin-bottom: 0.45rem;
}
.sv-res-card--cancelled { opacity: 0.55; border-style: dashed; }
.sv-res-card--seated { border-color: rgba(74, 222, 128, 0.5); }
.sv-res-layout { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.55rem; align-items: start; }
.sv-res-main { min-width: 0; }
.sv-res-table-mini {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  color: var(--c-text-secondary); font-size: 0.52rem; font-weight: 700; text-align: center;
}
.sv-res-head { display: flex; align-items: baseline; gap: 0.45rem; }
.sv-res-time { color: var(--c-primary); font-weight: 800; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sv-res-name { flex: 1; color: var(--c-text); font-weight: 700; font-size: 0.78rem; }
.sv-res-party { color: var(--c-text-secondary); font-size: 0.66rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.2rem; }
.sv-res-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--c-border); color: var(--c-text-secondary); font-size: 0.62rem;
}
.sv-res-meta span { display: inline-flex; align-items: center; gap: 0.2rem; }
.sv-res-notes { margin: 0.35rem 0 0; font-size: 0.62rem; font-style: italic; color: var(--c-text-secondary); }
.sv-res-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid var(--c-border); }
.sv-select {
  font-family: inherit; font-size: 0.66rem; font-weight: 600; color: var(--c-text);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px;
  padding: 0.28rem 0.4rem; cursor: pointer;
}
.sv-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sv-status-dot--confirmed { background: var(--c-info); }
.sv-status-dot--seated { background: var(--c-success); }
.sv-status-dot--completed { background: var(--c-text-secondary); }
.sv-status-dot--cancelled { background: var(--c-error); }

/* View toggle (Raumplan/Zeitplan) + table status grid legend */
.sv-toggles { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.7rem; }
.sv-vtoggle { flex: 1; font-family: inherit; font-size: 0.64rem; font-weight: 700; color: var(--c-text-secondary); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 6px; padding: 0.3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; }
.sv-vtoggle--active { color: var(--c-primary); border-color: var(--c-primary); }
.sv-legend { display: flex; gap: 0.7rem; justify-content: center; font-size: 0.58rem; color: var(--c-text-secondary); margin-top: 0.5rem; }
.sv-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 0.25rem; vertical-align: middle; }
.sv-legend-dot--free { background: var(--c-success); }
.sv-legend-dot--booked { background: var(--c-warning); }
.sv-legend-dot--seated { background: var(--c-info); }
.sv-tsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.sv-ts {
  display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
  min-height: 6.4rem; padding: 0.5rem 0.35rem; background: var(--c-bg-soft);
  border: 2px solid var(--c-border); border-radius: 8px; cursor: pointer; font-family: inherit;
}
.sv-ts--free { border-color: rgba(158,158,158,0.45); }
.sv-ts--orders,
.sv-ts--reserved { border-color: rgba(255,198,109,0.6); }
.sv-ts--bill,
.sv-ts--seated { border-color: rgba(107,168,255,0.6); }
.sv-ts-label { font-size: 0.62rem; font-weight: 800; color: var(--c-text); text-align: center; }
.sv-ts-cap { font-size: 0.55rem; color: var(--c-text-secondary); }

/* App-like table miniatures used by Aufnehmen and Reservierungen */
.sv-table-shape {
  width: 3.15rem;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: #2e2e2e;
  color: var(--c-primary);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.sv-table-shape--free {
  background: #2e2e2e;
  color: var(--c-primary);
}
.sv-table-shape--orders,
.sv-table-shape--reserved {
  background: rgba(129, 140, 248, 0.24);
  color: #c7d2fe;
  border-color: #818cf8;
}
.sv-table-shape--bill,
.sv-table-shape--seated {
  background: rgba(168, 85, 247, 0.26);
  color: #d8b4fe;
  border-color: #a855f7;
}
.sv-table-shape--circle { border-radius: 999px; }

/* ── Bestellungen: order rows ── */
.sv-order {
  background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 8px;
  padding: 0.5rem 0.6rem; margin-bottom: 0.45rem;
}
.sv-order--ready { border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.06); }
.sv-order__head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.sv-order__table { font-weight: 800; font-size: 0.76rem; color: var(--c-primary); }
.sv-order__badge { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em; background: var(--c-success); color: #10240f; border-radius: 4px; padding: 0.05rem 0.35rem; }
.sv-order__time { margin-left: auto; font-size: 0.62rem; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; }
.sv-order__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sv-oi { display: flex; align-items: center; gap: 0.4rem; }
.sv-oi__qty { color: var(--c-primary); font-weight: 800; font-size: 0.68rem; width: 1.5rem; text-align: right; }
.sv-oi__name { flex: 1; font-size: 0.7rem; color: var(--c-text); }
.sv-oi__note { font-size: 0.6rem; font-style: italic; color: var(--c-warning); }
.sv-order__foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; }
.sv-order__total { font-size: 0.72rem; font-weight: 800; color: var(--c-text); }
.sv-btn {
  font-family: inherit; font-size: 0.64rem; font-weight: 700; cursor: pointer;
  border-radius: 6px; padding: 0.32rem 0.6rem; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.25rem; transition: filter 0.12s ease, transform 0.12s ease;
}
.sv-btn:active { transform: scale(0.95); }
.sv-btn--success { background: var(--c-success); color: #10240f; margin-left: auto; }
.sv-btn--pay { background: var(--c-primary); color: #2B2B2B; margin-left: auto; }
.sv-btn--ghost { background: transparent; color: var(--c-error); border-color: rgba(248,113,113,0.45); }
.sv-btn:hover { filter: brightness(1.06); }

/* ── Rechnungen: open amounts ── */
.sv-bill {
  display: flex; align-items: center; gap: 0.5rem; background: var(--c-bg-soft);
  border: 1px solid var(--c-border); border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.45rem;
}
.sv-bill__main { flex: 1; min-width: 0; }
.sv-bill__name { font-size: 0.74rem; font-weight: 700; color: var(--c-text); }
.sv-bill__sub { font-size: 0.6rem; color: var(--c-text-secondary); }
.sv-bill__amt { font-size: 0.82rem; font-weight: 800; color: var(--c-primary); font-variant-numeric: tabular-nums; }

/* ── Aufnehmen: table picker + menu + cart ── */
.sv-step-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-secondary); font-weight: 700; margin: 0.2rem 0 0.4rem; }
.sv-room-layout {
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: #222;
  padding: 0.45rem;
  margin-bottom: 0.42rem;
}
.sv-room-canvas {
  position: relative;
  height: 11.4rem;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    #202020;
  background-size: 20px 20px;
}
.sv-room-layout--compact .sv-room-canvas { height: 8.5rem; }
.sv-room-el {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #555;
  border-radius: 7px;
  color: var(--c-text);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  background: #2c2c2c;
}
.sv-room-el--circle { border-radius: 999px; }
.sv-room-el--orders,
.sv-room-el--bill { background: var(--c-primary); border-color: var(--c-primary); color: #2B2B2B; }
.sv-room-el--seated { background: rgba(255,198,109,0.88); border-color: var(--c-primary); color: #2B2B2B; }
.sv-room-el--reserved { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.sv-room-el--bar { border-style: dashed; color: var(--c-text-secondary); }
.sv-room-el b {
  position: absolute;
  right: -0.28rem;
  top: -0.28rem;
  min-width: 0.9rem;
  height: 0.9rem;
  padding: 0 0.15rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2B2B2B;
  color: var(--c-primary);
  border: 1px solid rgba(255,198,109,0.6);
  font-size: 0.54rem;
  line-height: 1;
}
.sv-room-el small {
  position: absolute;
  bottom: 0.18rem;
  font-size: 0.55rem;
  font-weight: 800;
}
.sv-room-legend {
  display: flex;
  gap: 0.52rem;
  align-items: center;
  padding-top: 0.42rem;
  color: var(--c-text-secondary);
  font-size: 0.58rem;
}
.sv-room-legend i {
  display: inline-block;
  width: 0.43rem;
  height: 0.43rem;
  border-radius: 999px;
  margin-right: 0.22rem;
  vertical-align: -0.02rem;
  border: 1px solid currentColor;
}
.sv-room-dot--free { color: var(--c-text-secondary); }
.sv-room-dot--orders { color: var(--c-primary); background: var(--c-primary); border-color: var(--c-primary) !important; }
.sv-room-dot--reserved { color: var(--c-primary); }
.sv-table-select {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
  margin: 0.5rem 0 0.7rem;
}
.sv-table-chip {
  min-height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  cursor: pointer;
}
.sv-table-chip--active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #2B2B2B;
}
.sv-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; }
.sv-category-card {
  min-height: 4rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-bg-soft);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.18rem;
  padding: 0.35rem;
}
.sv-category-card span { font-size: 0.65rem; font-weight: 800; text-align: center; }
.sv-category-card small { font-size: 0.58rem; color: var(--c-text-secondary); }
.sv-menu { display: flex; flex-direction: column; gap: 0.35rem; }
.sv-menu-item { display: flex; align-items: center; gap: 0.5rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 8px; padding: 0.4rem 0.55rem; }
.sv-menu-name { flex: 1; font-size: 0.72rem; color: var(--c-text); font-weight: 600; }
.sv-menu-price { font-size: 0.66rem; color: var(--c-text-secondary); }
.sv-add { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 6px; background: var(--c-primary); color: #2B2B2B; font-weight: 800; cursor: pointer; font-size: 1rem; line-height: 1; }
.sv-add:disabled { opacity: 0.4; cursor: default; }
.sv-cart-dock {
  position: absolute; left: 0.7rem; right: 0.7rem; bottom: calc(58px + 0.6rem);
  display: flex; align-items: center; gap: 0.6rem; background: var(--c-bg-muted);
  border: 1px solid var(--c-primary); border-radius: 10px; padding: 0.5rem 0.7rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.sv-cart-info { flex: 1; font-size: 0.68rem; color: var(--c-text); }
.sv-cart-info b { color: var(--c-primary); }

/* ── Toolbar ── */
.service-demo-toolbar { max-width: 22rem; margin: 1rem auto 0; display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.service-demo-hint { font-size: 0.78rem; color: #9E9E9E; }
.service-demo-reset {
  font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; color: #E0E0E0;
  background: transparent; border: 1px solid var(--c-border); border-radius: 0.5rem; padding: 0.5rem 1rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.service-demo-reset:hover { border-color: var(--c-primary); color: var(--c-primary); }
.service-demo[data-ready="1"] .service-demo-fallback { display: none; }