/* ===== onyshop Verwaltung – Clean Light Design ===== */
@import url('/assets/fonts/fonts.css');

:root {
  --bg: #F5F5F4; --surface: #FFFFFF; --line: #E7E5E4; --line-strong: #D6D3D1;
  --ink: #1C1917; --muted: #78716C; --soft: #FAFAF9;
  --accent: #166534; --accent-soft: #DCFCE7;
  --danger: #B91C1C; --danger-soft: #FEE2E2;
  --warn: #9A3412; --warn-soft: #FFEDD5; --amber: #B45309; --amber-soft: #FEF3C7;
}

html body { background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', Arial, sans-serif; }
html body h1 { text-transform: none; letter-spacing: -0.3px; font-weight: 800; font-size: 24px; color: var(--ink); }
html body h2 { color: var(--ink); }
html body .who-bar, html body .who-bar a { color: var(--muted); }
html body .hint, html body .sub, html body .land-badge, html body .empty-msg, html body .empty, html body .no-orders { color: var(--muted); }

/* Eingaben & Knöpfe allgemein */
html body input, html body select, html body textarea {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; font-family: inherit;
}
html body input:focus, html body select:focus, html body textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
html body button { font-family: inherit; border-radius: 10px; }

/* ---------- Menü oben (Desktop) ---------- */
html body .admin-nav { background: var(--surface); border-bottom: 1px solid var(--line); }
html body .admin-nav a { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
html body .admin-nav a.active { color: var(--accent); border-bottom: 3px solid var(--accent); font-weight: 800; }

/* ---------- Menüleiste unten (Handy) ---------- */
.bn-bar { display: none; }
@media (max-width: 899px) {
  html body .admin-nav, html body .who-bar { display: none; }
  html body.has-bn { padding-bottom: 90px; }
  .bn-bar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
  }
  .bn-bar a, .bn-bar button {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 11px; color: var(--muted); padding: 4px 0; min-height: 48px; justify-content: center;
  }
  .bn-bar .aktiv { color: var(--accent); font-weight: 800; }
  .bn-bar svg { width: 22px; height: 22px; }
  html body.has-bn .cart-bar { bottom: 72px; }
  html body.has-bn .no-sound-btn { bottom: 150px; }
}
.bn-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.45); z-index: 950; display: flex; align-items: flex-end; justify-content: center; }
.bn-sheet {
  background: var(--surface); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); font-family: 'Plus Jakarta Sans', Arial, sans-serif; color: var(--ink);
}
.bn-griff { width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 0 auto 14px; }
.bn-sheet a { display: flex; align-items: center; justify-content: space-between; padding: 16px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; }
.bn-sheet a.aktiv { color: var(--accent); font-weight: 800; }
.bn-sheet a.abmelden { color: var(--danger); border-bottom: none; }
.bn-sheet .bn-wer { color: var(--muted); font-size: 12px; padding: 0 6px 6px; }
@media print { .bn-bar, .bn-overlay { display: none !important; } }

/* Manuelle Bestellung: Tischnummer */
html body .tisch-input-row label { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 13px; }
html body .tisch-input-row input { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; font-weight: 800; }

/* ---------- Karten allgemein ---------- */
html body .order-card, html body .card, html body .tile, html body .export-box, html body .links-panel, html body .modal-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 3px rgba(28,25,23,0.06); color: var(--ink);
}

/* ---------- Bestellungen ---------- */
html body .order-card.paid { border: 2px solid var(--accent); }
html body .order-tisch { text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 800; }
html body .order-zeit { color: var(--muted); }
html body .paid-badge { background: var(--accent-soft); color: var(--accent); border-radius: 999px; text-transform: none; letter-spacing: 0; }
html body .done-badge { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; text-transform: none; letter-spacing: 0; }
html body .order-items { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html body .order-actions button, html body .table-order-actions button, html body .edit-save-cancel button {
  text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 12px;
}
html body .done-btn { background: var(--accent); color: #fff; }
html body .done-btn.is-done { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
html body .paid-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html body .paid-btn.is-paid { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft); }
html body .edit-btn { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
html body .delete-btn, html body .remove-btn { background: var(--surface); color: var(--danger); border: 1px solid #FCA5A5; }
@keyframes blinkRed { 0%, 100% { background: var(--accent); color: #fff; } 50% { background: var(--danger); color: #fff; } }
html body .edit-row { border-bottom: 1px solid var(--line); }
html body .edit-row input[type="number"], html body .add-item-row select { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html body .save-btn { background: var(--accent); color: #fff; }
html body .cancel-btn { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
/* Anmerkungen & "von …" (werden im Code direkt eingefärbt) */
html body div[style*="color:#f5a623"] { color: var(--warn) !important; font-weight: 700; }

/* ---------- Tische ---------- */
html body .floorplan {
  background-color: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  background-image: linear-gradient(#F0EFED 1px, transparent 1px), linear-gradient(90deg, #F0EFED 1px, transparent 1px);
}
html body .table { border-radius: 14px; box-shadow: 0 2px 8px rgba(28,25,23,0.12); font-weight: 800; }
html body .table.frei { background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); }
html body .table.belegt { background: var(--danger-soft); color: var(--danger); border: 2px solid #FCA5A5; }
html body .table.reserviert { background: var(--amber-soft); color: var(--amber); border: 2px solid #FCD34D; }
html body .table-count-row label { color: var(--muted); text-transform: none; letter-spacing: 0; }
html body .table-count-row input { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html body .table-count-row button, html body .link-row button { background: var(--ink); color: #fff; text-transform: none; letter-spacing: 0; border-radius: 10px; }
html body .modal-overlay { background: rgba(28,25,23,0.45); }
html body .modal-header h2 { text-transform: none; letter-spacing: 0; font-weight: 800; }
html body .modal-close { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
html body .status-buttons button { border-radius: 10px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 13px; }
html body .status-buttons button.frei { background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); }
html body .status-buttons button.belegt { background: var(--danger-soft); color: var(--danger); }
html body .status-buttons button.reserviert { background: var(--amber-soft); color: var(--amber); }
html body .status-buttons button.active { border: 2px solid var(--ink); }
html body .table-order { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
html body .table-order.paid { border: 2px solid var(--accent); }
html body .table-order-head { color: var(--muted); }
html body .links-panel summary { color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 700; }
html body .link-row { border-top: 1px solid var(--line); }
html body .link-row .link-label { color: var(--muted); }
html body .link-row input { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
html body form[action="toggle_geschlossen.php"] { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; }
/* ---------- Produkte ---------- */
html body form#addForm input, html body form#addForm select, html body form#addForm textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; }
html body form#addForm button { background: var(--accent); color: #fff; text-transform: none; letter-spacing: 0; border-radius: 10px; }
html body .category h2 { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 800; border-bottom: 1px solid var(--line); }
html body .product-row { border-bottom: 1px solid var(--line); }
html body .product-thumb, html body .product-thumb-placeholder { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
html body .product-desc-preview { color: var(--muted); }
html body .upload-btn, html body .avail-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); text-transform: none; font-weight: 600; border-radius: 10px; }
html body .avail-btn.is-soldout { background: var(--accent); color: #fff; border-color: var(--accent); }
html body .product-row .edit-btn { text-transform: none; font-weight: 600; }
html body .product-row button.remove-btn { background: var(--surface); color: var(--danger); border: 1px solid #FCA5A5; text-transform: none; font-weight: 600; }
html body .soldout-badge { background: var(--ink); color: #fff; }
/* Auswahlfenster (Allergene, Optionen) */
html body div[style*="border-radius:14px 14px 0 0"] { background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink) !important; }
html body div[style*="border-radius:14px 14px 0 0"] label { border-bottom-color: var(--line) !important; }
html body div[style*="border-radius:14px 14px 0 0"] input[type="text"] { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
html body div[style*="border-radius:14px 14px 0 0"] button[style*="background:#333"] { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
html body .al-save, html body .op-save { background: var(--accent) !important; color: #fff !important; }

/* ---------- Tagesabschluss ---------- */
html body .controls input[type="date"] { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html body .controls button { background: var(--ink); color: #fff; text-transform: none; letter-spacing: 0; border-radius: 10px; }
html body .summary div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
html body .summary div span { color: var(--muted); text-transform: none; letter-spacing: 0; }
html body table { background: var(--surface); border-radius: 12px; }
html body th, html body td { border-bottom: 1px solid var(--line); }
html body th { color: var(--muted); }
html body .bezahlt-ja { color: var(--accent); }
html body .bezahlt-nein { color: var(--danger); }
html body .mwst-hinweis { color: var(--muted); }
html body .export-titel { text-transform: none; letter-spacing: 0; font-weight: 800; }
html body .export-zeile label { color: var(--muted); }
html body .export-zeile input { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html body .export-zeile button { background: var(--bg); color: var(--ink); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---------- Statistik ---------- */
html body .tile .label { color: var(--muted); text-transform: none; letter-spacing: 0; }
html body .bar { background: var(--line-strong); }
html body .bar.today { background: var(--accent); }
html body .bar-val, html body .bar-label { color: var(--muted); }
html body .best-row { border-bottom: 1px solid var(--line); }
html body .best-bar { background: var(--accent); }
html body .best-num small, html body .best-rank { color: var(--muted); }

/* ---------- Organisation / Login ---------- */
html body .msg.ok { background: var(--accent-soft); color: var(--accent); }
html body .msg.fehler, html body .fehler { background: var(--danger-soft); color: var(--danger); }
html body .btn-main { background: var(--accent); color: #fff; }
html body .btn-grey { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
html body .btn-red { background: var(--surface); color: var(--danger); border: 1px solid #FCA5A5; }
html body .card h2, html body .section-title { text-transform: none; letter-spacing: 0; font-weight: 800; }
html body .section-title { border-bottom: 1px solid var(--line); }
html body .person-user { color: var(--accent); }
html body details summary { color: var(--muted); }
html body .box h1 { text-transform: none; }
html body .box label { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
html body .box input { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; }
html body .box button { background: var(--accent); color: #fff; text-transform: none; letter-spacing: 0; border-radius: 12px; font-size: 15px; padding: 14px; }
html body .back { color: var(--muted); }

/* ---------- Hinweise & Fenster (ui.js) ---------- */
html body .ui-sheet { background: var(--surface); color: var(--ink); border-color: var(--line); }
html body .ui-sheet .ui-cancel { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
html body .ui-sheet .ui-ok { background: var(--accent); color: #fff; }
html body .ui-sheet input.ui-input { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
html body .ui-overlay { background: rgba(28,25,23,0.45); }
html body .ui-toast { background: var(--ink); color: #fff; border-color: var(--ink); }
html body .ui-toast.success { background: var(--accent); color: #fff; border-color: var(--accent); }
html body .ui-toast.error { background: var(--danger); color: #fff; border-color: var(--danger); }
html body .ui-sum-row, html body .ui-sum-note { border-bottom-color: var(--line); }
html body .ui-sum-note { color: var(--warn); }
/* Timer für offene Bestellungen */
.order-timer { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.order-timer[data-stufe="gruen"] { background: #DCFCE7; color: #166534; }
.order-timer[data-stufe="gelb"] { background: #FEF3C7; color: #92400E; }
.order-timer[data-stufe="rot"] { background: #FEE2E2; color: #B91C1C; }

/* Abgeschlossene Bestellungen */
details.abgeschlossen { margin-top: 28px; }
details.abgeschlossen > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; margin-bottom: 12px; background: #FFFFFF; border: 1px solid #E7E5E4; border-radius: 16px; font-weight: 800; font-size: 15px; color: #1C1917; }
details.abgeschlossen > summary::-webkit-details-marker { display: none; }
details.abgeschlossen > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #78716C; border-bottom: 2px solid #78716C; transform: rotate(45deg); margin: -4px 4px 0 0; }
details.abgeschlossen[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
html body details.abgeschlossen .order-card.paid { border: 1px solid #E7E5E4; opacity: 0.85; }

/* Tische: Hinweis auf unbezahlte Bestellungen */
.tisch-offen { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 999px; background: #B91C1C; color: #FFFFFF; font-size: 15px; font-weight: 800; line-height: 24px; text-align: center; box-shadow: 0 0 0 2px #FFFFFF; animation: tischPuls 2s ease-in-out infinite; pointer-events: none; }
@keyframes tischPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* Online-Bestellungen (Abholung / Lieferung) */
html body .order-card.online-order, html body details.abgeschlossen .order-card.online-order { border: 2px solid #1D4ED8; background: #EFF6FF; }
.online-info { background: #DBEAFE; border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #1E3A8A; }
.online-info a { color: #1E3A8A; font-weight: 700; }
.online-badge { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.online-hinweis { font-style: italic; }
/* Eingabefelder, die einzelne Seiten noch dunkel einfärben */
html body input[type=text], html body input[type=password], html body input[type=number], html body input[type=tel] { background: #FFFFFF; color: #1C1917; border-color: #D6D3D1; }
/* Organisation: Kontrollkästchen und Felder */
html body .card label.check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 600; color: #1C1917; }
html body .card label.check input { width: 20px; height: 20px; accent-color: #166534; }
html body .card label.feld { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #78716C; }

/* Unterkategorien in der Produktverwaltung */
html body .unterkat-admin { margin: 18px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #166534; }