/* ─── CSS Variables ──────────────────────────────────────── */
:root {
  --bg:               #0b1220;
  --surface:          #111a2b;
  --surface-soft:     #182238;
  --surface-elevated: #1e2a44;
  --text:             #eef3ff;
  --text-muted:       #9caccc;
  --primary:          #5ea7ff;
  --primary-strong:   #3f8eff;
  --accent:           #39d0a5;
  --danger:           #ff6b82;
  --warning:          #f7b955;
  --purple:           #a855f7;
  --border:           rgba(255,255,255,0.1);
  --shadow:           0 10px 30px rgba(0,0,0,0.35);
  --radius-lg:        18px;
  --radius-md:        12px;
  --radius-sm:        10px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 0% -20%, #1f3159 0%, transparent 60%),
    radial-gradient(700px 500px at 100% -30%, #183347 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ─── Layout ─────────────────────────────────────────────── */
#app {
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
}

/* ─── Header ─────────────────────────────────────────────── */
#header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: rgba(17,26,43,0.88);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.header-logo {
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  font-size:0.82rem; font-weight:700; letter-spacing:0.02em;
  background: linear-gradient(135deg, var(--primary-strong), var(--accent));
  box-shadow: 0 8px 20px rgba(62,133,245,0.4);
  flex-shrink: 0;
}
.header-title { font-size: clamp(1rem,1.8vw,1.2rem); font-weight:700; letter-spacing:0.01em; }
.header-sub { color:var(--text-muted); font-size:0.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }

/* ─── Icon Buttons ───────────────────────────────────────── */
.btn-icon {
  width:42px; height:42px;
  border:1px solid var(--border); border-radius:12px;
  color:var(--text); background:var(--surface-soft);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn-icon:hover, .btn-icon:focus-visible {
  background: var(--surface-elevated);
  border-color: rgba(94,167,255,0.55);
  outline: none;
}
.btn-icon:active { transform: scale(0.97); }

/* ─── Card ───────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs-container {
  display:flex; gap:8px; overflow-x:auto; padding:4px;
  border-radius:14px; scrollbar-width:none;
}
.tabs-container::-webkit-scrollbar { display:none; }
.tab {
  border:1px solid var(--border); color:var(--text-muted);
  background:var(--surface-soft); border-radius:10px;
  padding:10px 14px; font-weight:600; white-space:nowrap;
  cursor:pointer; transition:all .15s ease;
}
.tab.active {
  color:#fff; border-color:transparent;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
}

.filter-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.filter-tab {
  padding:8px 14px; border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-soft); color:var(--text-muted);
  font-weight:600; cursor:pointer; transition:all .15s ease;
}
.filter-tab.active {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  border-color:transparent; color:#fff;
}

/* ─── Main Layout ────────────────────────────────────────── */
.main-layout {
  display:grid; gap:12px; grid-template-columns:1fr;
}
.products-section, .cart-section {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow);
}
.products-section { padding:12px; }

/* ─── Product Grid ───────────────────────────────────────── */
.products-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.product-btn {
  border:1px solid var(--border); border-radius:var(--radius-md);
  background: linear-gradient(160deg, #18233b, #121b2d);
  color:var(--text); min-height:108px; padding:12px;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:6px; text-align:center;
  position:relative; cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.product-btn:hover, .product-btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(94,167,255,0.5);
  box-shadow: 0 10px 22px rgba(5,10,20,0.4);
  outline: none;
}
.product-btn:active { transform: scale(0.98); }
.p-badge {
  position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:999px;
  display:grid; place-items:center;
  font-size:0.78rem; font-weight:700; color:#fff;
  background:var(--accent);
  transform:scale(0); transition:transform .16s ease;
}
.p-badge.visible { transform:scale(1); }
.p-name { font-weight:600; font-size:0.94rem; }
.p-price { color:var(--text-muted); font-size:0.88rem; }

/* ─── Cart ───────────────────────────────────────────────── */
.cart-section {
  display:flex; flex-direction:column;
  min-height:240px; max-height:min(46vh,420px);
}
.cart-header, .cart-footer {
  padding:12px;
  border-bottom:1px solid var(--border);
}
.cart-footer {
  border-bottom:0; border-top:1px solid var(--border); margin-top:auto;
}
.cart-header {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.cart-header h3 { margin:0; font-size:1rem; }
.btn-clear {
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); border-radius:10px; padding:8px 10px; cursor:pointer;
}
.btn-clear:hover, .btn-clear:focus-visible {
  color:#fff; border-color:rgba(255,107,130,0.55); outline:none;
}
.cart-items {
  padding:10px 12px; overflow:auto;
  display:grid; align-content:start; gap:8px;
}
.cart-empty {
  min-height:140px; display:grid; place-items:center;
  text-align:center; gap:6px; color:var(--text-muted);
}
.cart-item {
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface-soft); padding:8px;
}
.ci-name { font-weight:600; font-size:0.92rem; }
.ci-price { color:var(--text-muted); font-size:0.85rem; }
.ci-qty { display:flex; align-items:center; gap:8px; }
.qty-btn {
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--border); background:#1a2640;
  color:var(--text); font-size:1rem; cursor:pointer;
}
.qty-btn:hover, .qty-btn:focus-visible { border-color:rgba(94,167,255,0.5); outline:none; }
.qty-num { min-width:18px; text-align:center; font-weight:700; }
.total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.total-amount { font-size:1.2rem; font-weight:700; }
.badge-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:0.78rem; font-weight:700; padding:0 5px; margin-left:6px;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn-pay, .btn-primary, .btn-confirm, .btn-back {
  width:100%; min-height:44px; border-radius:12px;
  border:1px solid transparent; font-weight:700; cursor:pointer;
}
.btn-pay, .btn-primary, .btn-confirm {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  color:#fff;
}
.btn-pay:disabled, .btn-confirm:disabled {
  background:#2a3348; color:#8a98b8; cursor:not-allowed;
}
.btn-back {
  background:transparent; color:var(--text); border-color:var(--border);
}
.btn-back:hover { border-color:rgba(94,167,255,0.4); }

/* ─── Overlays & Modals ──────────────────────────────────── */
.overlay, .success-flash {
  position:fixed; inset:0; display:none; z-index:70;
}
.overlay.show, .success-flash.show { display:grid; }
.overlay {
  background:rgba(5,10,20,0.72);
  backdrop-filter:blur(8px);
  place-items:center; padding:14px;
}
.checkout-box, .modal-box {
  width:min(640px,100%);
  border:1px solid var(--border); border-radius:18px;
  background:var(--surface); box-shadow:var(--shadow);
}
.modal-box { width:min(460px,100%); overflow:hidden; }
.modal-header, .modal-body, .modal-footer, .checkout-header { padding:14px; }
.modal-header, .checkout-header { border-bottom:1px solid var(--border); }
.modal-footer { border-top:1px solid var(--border); }
.modal-header h2, .checkout-header h2 { margin:0; font-size:1.12rem; }
.modal-subtitle { margin-top:0; margin-bottom:10px; color:var(--text-muted); }

/* ─── Form Inputs ────────────────────────────────────────── */
.name-input, .custom-amount-input, select.name-input {
  width:100%; min-height:46px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--border);
  background:#0f1729; color:var(--text); font:inherit;
  appearance:none; -webkit-appearance:none;
}
.name-input:focus, .custom-amount-input:focus, select.name-input:focus {
  border-color:rgba(94,167,255,0.75); outline:none;
}
.field-group { display:grid; gap:6px; margin-bottom:4px; }
.field-group label { font-size:0.84rem; color:var(--text-muted); font-weight:600; }
.pw-toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); padding:4px; border-radius:6px;
  display:grid; place-items:center;
  transition: color .15s ease;
}
.pw-toggle:hover { color:var(--text); }

/* ─── Checkout ───────────────────────────────────────────── */
.checkout-box {
  max-height:min(86vh,760px);
  display:flex; flex-direction:column; overflow:hidden;
}
.checkout-items { padding:10px 14px; overflow:auto; display:grid; gap:8px; }
.checkout-item {
  border:1px solid var(--border); border-radius:10px;
  padding:8px; background:var(--surface-soft);
  display:flex; justify-content:space-between; gap:10px;
}
.checkout-item-info { display:flex; gap:8px; align-items:center; }
.checkout-item-name { font-weight:600; }
.checkout-item-qty { color:var(--text-muted); font-size:0.86rem; }
.checkout-total, .checkout-change {
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--border);
}
.checkout-total { font-size:1.05rem; }
.price { font-weight:700; }
.section-label { padding:10px 14px 8px; color:var(--text-muted); font-weight:600; }
.amount-buttons {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; padding:0 14px 12px;
}
.amount-btn {
  min-height:42px; border-radius:10px;
  border:1px solid var(--border); background:#15213a;
  color:var(--text); font-weight:700; cursor:pointer;
}
.amount-btn.selected {
  border-color:transparent;
  background:linear-gradient(135deg,var(--primary-strong),var(--primary));
}
.amount-btn.insufficient { color:#7784a4; opacity:0.6; cursor:not-allowed; }
.custom-input-wrap { padding:0 14px 10px; position:relative; }
.currency-label { position:absolute; right:26px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.checkout-change { display:none; }
.checkout-change.show { display:flex; }
.change-amount { color:var(--accent); }
.checkout-actions {
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; padding:12px 14px 14px;
}

/* ─── Success Flash ──────────────────────────────────────── */
.success-flash { place-items:end center; padding:16px; pointer-events:none; }
.success-content {
  width:min(460px,100%);
  border:1px solid rgba(57,208,165,0.4); border-radius:14px;
  background:rgba(10,22,24,0.95); box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; padding:12px;
  transform:translateY(12px); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.success-flash.show .success-content { transform:translateY(0); opacity:1; }
.success-title { font-weight:700; }
.success-subtitle { color:var(--text-muted); font-size:0.88rem; margin-top:2px; }

/* ─── Table Grid (Tischauswahl) ──────────────────────────── */
.table-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px; padding:4px;
}
.table-btn {
  min-height:52px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-soft); color:var(--text);
  font-weight:700; font-size:1rem; cursor:pointer;
  transition:all .15s ease;
}
.table-btn.active {
  background:linear-gradient(135deg,var(--primary-strong),var(--primary));
  border-color:transparent;
}
.table-btn:hover { border-color:rgba(94,167,255,0.4); }

/* ─── Küche ──────────────────────────────────────────────── */
.kitchen-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px; margin-top:12px;
}
.order-card {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); overflow:hidden;
  transition:border-color .2s;
}
.order-card.status-fertig { border-color:rgba(57,208,165,0.5); opacity:0.72; }
.order-card-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  background:var(--surface-elevated);
  border-bottom:1px solid var(--border); gap:8px;
}
.order-table { font-size:1.1rem; font-weight:800; }
.order-meta { color:var(--text-muted); font-size:0.82rem; }
.order-time { font-size:0.8rem; color:var(--text-muted); white-space:nowrap; }
.order-items-list { padding:10px 14px; display:grid; gap:4px; }
.order-item-row {
  display:flex; justify-content:space-between;
  font-size:0.92rem; padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.order-item-row:last-child { border-bottom:none; }
.oi-qty { font-weight:700; color:var(--primary); min-width:28px; }
.order-footer {
  padding:10px 14px; border-top:1px solid var(--border);
  display:flex; gap:8px; align-items:center; justify-content:space-between;
}
.order-total { font-weight:700; font-size:0.95rem; }
.btn-fertig {
  padding:8px 16px; border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--accent),#22b58a);
  color:#fff; font-weight:700; cursor:pointer; font-size:0.88rem;
}
.btn-fertig:disabled { background:#2a3348; color:#8a98b8; cursor:not-allowed; }
.btn-reopen {
  padding:6px 12px; border-radius:10px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:0.82rem; cursor:pointer;
}
.status-pill { padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:700; }
.status-offen      { background:rgba(247,185,85,0.2);  color:var(--warning); }
.status-fertig     { background:rgba(57,208,165,0.2);  color:var(--accent); }
.status-abgerechnet{ background:rgba(94,167,255,0.15); color:var(--primary); }
.empty-state { grid-column:1/-1; text-align:center; padding:48px 0; color:var(--text-muted); }
.pulse {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); margin-right:6px;
  animation:pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(0.7); }
}

/* ─── Kassierer Tabelle ──────────────────────────────────── */
.tx-table {
  width:100%; border-collapse:collapse; font-size:0.88rem;
}
.tx-table th {
  padding:10px 12px; text-align:left;
  background:var(--surface-elevated);
  color:var(--text-muted); font-weight:600;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tx-table td {
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:top;
}
.tx-table tr:hover td { background:rgba(255,255,255,0.025); }
.tx-table tr.verified td { opacity:0.55; }
.verify-btn {
  padding:4px 10px; border-radius:8px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:0.8rem; cursor:pointer;
  white-space:nowrap;
}
.verify-btn.done { color:var(--accent); border-color:rgba(57,208,165,0.4); }
.verify-btn:hover { border-color:rgba(57,208,165,0.5); color:var(--accent); }

/* ─── Stat-Karten ────────────────────────────────────────── */
.stat-card {
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); padding:14px 16px;
}
.stat-label { font-size:0.78rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.stat-value { font-size:1.5rem; font-weight:800; margin-top:4px; }

/* ─── Login ──────────────────────────────────────────────── */
.login-wrap {
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.login-box {
  width:min(400px,100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow);
  padding:32px 28px; display:grid; gap:14px;
}
.login-logo {
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  font-size:1rem; font-weight:800;
  background:linear-gradient(135deg,var(--primary-strong),var(--accent));
  box-shadow:0 8px 20px rgba(62,133,245,0.4);
  justify-self:start;
}
.login-title { font-size:1.3rem; font-weight:800; margin:0; }
.login-sub { color:var(--text-muted); font-size:0.9rem; margin:0; }
.login-error {
  background:rgba(255,107,130,0.12); border:1px solid rgba(255,107,130,0.35);
  border-radius:10px; padding:10px 12px; color:var(--danger); font-size:0.88rem;
}

/* ─── Admin User Cards ───────────────────────────────────── */
.user-card {
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-soft); padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.user-card.inactive { opacity:0.5; }
.role-pill {
  padding:2px 10px; border-radius:999px; font-size:0.75rem; font-weight:700;
}
.role-admin   { background:rgba(239,68,68,0.2);  color:#f87171; }
.role-cashier { background:rgba(168,85,247,0.2); color:#c084fc; }
.role-waiter  { background:rgba(94,167,255,0.2); color:var(--primary); }
.role-kitchen { background:rgba(247,185,85,0.2); color:var(--warning); }

/* ─── Sent Overlay ───────────────────────────────────────── */
.sent-overlay {
  position:fixed; inset:0; z-index:80;
  display:none; place-items:center;
  background:rgba(5,10,20,0.72); backdrop-filter:blur(8px);
}
.sent-overlay.show { display:grid; }
.sent-box {
  width:min(360px,92vw);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:28px 20px 22px; text-align:center;
}
.sent-icon { font-size:2.8rem; margin-bottom:10px; }
.sent-title { font-size:1.3rem; font-weight:700; margin-bottom:6px; }
.sent-sub { color:var(--text-muted); margin-bottom:18px; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width:480px) {
  .table-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media (min-width:700px) {
  #app { padding:18px; }
  .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cart-section { max-height:min(55vh,500px); }
}
@media (min-width:980px) {
  .main-layout { grid-template-columns:1.45fr minmax(320px,0.9fr); align-items:start; }
  .cart-section { position:sticky; top:84px; align-self:start; min-height:280px; max-height:min(68vh,560px); }
  .products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (hover:none) {
  .product-btn:hover, .btn-icon:hover, .btn-clear:hover, .qty-btn:hover { transform:none; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ─── Meine Bestellungen (Kellner-Panel) ─────────────────── */
.my-order-card {
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-soft); padding:12px;
}
.my-order-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.btn-pay-order {
  padding:6px 14px; border-radius:8px; border:none;
  background:linear-gradient(135deg,var(--primary-strong),var(--primary));
  color:#fff; font-weight:700; font-size:0.84rem; cursor:pointer;
}