/* Tischreservierung — Styles, gescoped unter .tr-wrap (Dolibarr-CSS unberuehrt).
   Oeffentliche Buchungsseite nutzt zusaetzlich .tr-public (eigener Body). */

:root {
  --tr-primary:        #aa2018;
  --tr-primary-dark:   #7a160f;
  --tr-primary-soft:   #fdf2f0;
  --tr-primary-shadow: rgba(170,32,24,0.15);
  --tr-ink:            #252525;
  --tr-muted:          #6b7280;
  --tr-border:         #e5e7eb;
}

.tr-wrap, .tr-wrap * { box-sizing: border-box; }
.tr-wrap { font-family: 'Segoe UI', Arial, sans-serif; color: var(--tr-ink); }

.tr-wrap header.tr-head {
  background: linear-gradient(135deg, var(--tr-primary), var(--tr-primary-dark));
  color: #fff; padding: 16px 24px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tr-wrap header.tr-head h1 { font-size: 1.4rem; font-weight: 600; margin: 0; }
.tr-wrap header.tr-head .subtitle { opacity: 0.85; font-size: 0.9rem; margin-top: 2px; }
.tr-wrap header.tr-head .spacer { flex: 1; }
.tr-wrap .container { max-width: 1240px; margin: 0 auto; padding: 4px 0 32px; }

/* Buttons */
.tr-wrap .btn, .tr-wrap a.btn {
  background: #fff; border: 1px solid #d1d5db; padding: 8px 15px; border-radius: 6px;
  cursor: pointer; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; text-decoration: none; color: #333; line-height: 1.2;
}
.tr-wrap .btn:hover { border-color: var(--tr-primary); background: var(--tr-primary-soft); color: var(--tr-primary); }
.tr-wrap .btn.primary { background: var(--tr-primary); color: #fff; border-color: var(--tr-primary); }
.tr-wrap .btn.primary:hover { opacity: .9; color: #fff; background: var(--tr-primary); }
.tr-wrap .btn.danger { color: #dc2626; border-color: #fecaca; }
.tr-wrap .btn.danger:hover { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.tr-wrap .btn.small { padding: 4px 10px; font-size: 0.8rem; }
.tr-wrap .btn:disabled { opacity: .45; cursor: not-allowed; }
.tr-wrap .btn.active { background: var(--tr-primary); color: #fff; border-color: var(--tr-primary); }
.tr-wrap .tr-view-toggle { display: inline-flex; }
.tr-wrap .tr-view-toggle .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tr-wrap .tr-view-toggle .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }

.tr-wrap .actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.tr-wrap .actions .grow { flex: 1; }

/* Stat-Kacheln */
.tr-wrap .stats { display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.tr-wrap .stat { background: #fff; border-radius: 10px; padding: 14px 18px; flex: 1; min-width: 140px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tr-wrap .stat-value { font-size: 1.7rem; font-weight: 700; color: var(--tr-primary); }
.tr-wrap .stat-label { font-size: 0.8rem; color: var(--tr-muted); text-transform: uppercase; margin-top: 3px; letter-spacing: .03em; }

/* Cards */
.tr-wrap .card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 18px; overflow: hidden; }
.tr-wrap .card-header { background: #f8fafc; border-bottom: 1px solid var(--tr-border); padding: 12px 18px; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.tr-wrap .card-header .spacer { flex: 1; }
.tr-wrap .card-body { padding: 18px; }

.tr-wrap .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-wrap .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tr-wrap .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 820px) { .tr-wrap .grid-2, .tr-wrap .grid-3, .tr-wrap .grid-4 { grid-template-columns: 1fr; } }

/* Formfelder */
.tr-wrap label.fld { display: block; font-size: 0.75rem; font-weight: 600; color: var(--tr-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tr-wrap input[type=text], .tr-wrap input[type=email], .tr-wrap input[type=tel], .tr-wrap input[type=number],
.tr-wrap input[type=date], .tr-wrap input[type=time], .tr-wrap select, .tr-wrap textarea {
  width: 100%; border: 1.5px solid #d1d5db; border-radius: 6px; padding: 8px 11px; font-size: 0.9rem;
  transition: border-color .15s; background: #fff; font-family: inherit;
}
.tr-wrap input:focus, .tr-wrap select:focus, .tr-wrap textarea:focus { outline: none; border-color: var(--tr-primary); box-shadow: 0 0 0 3px var(--tr-primary-shadow); }
.tr-wrap .field { margin-bottom: 12px; }

/* Tabellen / Listen */
.tr-wrap table.tr-list { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #fff; }
.tr-wrap table.tr-list th { background: #f8fafc; text-align: left; padding: 9px 12px; font-size: 0.72rem; text-transform: uppercase; color: var(--tr-muted); border-bottom: 2px solid var(--tr-border); white-space: nowrap; }
.tr-wrap table.tr-list td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.tr-wrap table.tr-list tr:hover td { background: #fafbfc; }
.tr-wrap table.tr-list tr.clickable { cursor: pointer; }
.tr-wrap table.tr-list tr.tr-day-sep td { background: var(--tr-primary-soft); color: var(--tr-primary); font-weight: 700; font-size: 0.82rem; text-transform: none; padding: 7px 12px; border-bottom: 1px solid var(--tr-border); position: sticky; top: 0; }
.tr-wrap table.tr-list tr.tr-day-sep:hover td { background: var(--tr-primary-soft); }

/* Status-Badges */
.tr-wrap .tr-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.tr-wrap .tr-badge.s0 { background: #f3f4f6; color: #6b7280; }
.tr-wrap .tr-badge.s1 { background: #fef3c7; color: #92400e; }
.tr-wrap .tr-badge.s2 { background: #dbeafe; color: #1e40af; }
.tr-wrap .tr-badge.s3 { background: #d1fae5; color: #065f46; }
.tr-wrap .tr-badge.s4 { background: #e5e7eb; color: #374151; }
.tr-wrap .tr-badge.s5 { background: #fee2e2; color: #991b1b; }
.tr-wrap .tr-badge.s6 { background: #fde2cf; color: #7c2d12; }
.tr-wrap .tr-chip { display: inline-block; padding: 1px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; background: var(--tr-primary-soft); color: var(--tr-primary); margin: 0 2px 2px 0; }
.tr-wrap .tr-chip.vip { background: #ede9fe; color: #6d28d9; }
.tr-wrap .tr-chip.warn { background: #fef3c7; color: #92400e; }

.tr-wrap .empty { text-align: center; padding: 60px 20px; color: #9ca3af; }
.tr-wrap .empty .icon { font-size: 3rem; margin-bottom: 12px; }

/* ============ Tischplan / Floor ============ */
.tr-wrap .tr-floor-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.tr-wrap .tr-floor-side { width: 250px; flex-shrink: 0; }
.tr-wrap .tr-floor-main { flex: 1; min-width: 320px; }
.tr-wrap .tr-floor {
  position: relative; background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0H0v20' fill='none' stroke='%23e5e7eb' stroke-width='1'/%3E%3C/svg%3E");
  border: 1px solid var(--tr-border); border-radius: 8px; overflow: auto; min-height: 480px;
}
.tr-wrap .tr-floor-canvas { position: relative; }
.tr-wrap .tr-table-shape {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 2px solid #9ca3af; background: #fff; color: #374151; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: box-shadow .1s;
}
.tr-wrap .tr-table-shape:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.tr-wrap .tr-table-shape.round { border-radius: 50%; }
.tr-wrap .tr-table-shape.bench { border-radius: 4px; background-image: repeating-linear-gradient(90deg,#fff,#fff 8px,#f3f4f6 8px,#f3f4f6 16px); }
.tr-wrap .tr-table-shape.free { border-color: #10b981; }
.tr-wrap .tr-table-shape.occupied { border-color: #dc2626; background: #fee2e2; }
.tr-wrap .tr-table-shape.reserved { border-color: #2563eb; background: #dbeafe; }
.tr-wrap .tr-table-shape.blocked { border-color: #6b7280; background: #e5e7eb; color: #9ca3af; }
.tr-wrap .tr-table-shape.sel { outline: 3px solid var(--tr-primary); outline-offset: 2px; }
.tr-wrap .tr-table-shape .cap { position: absolute; bottom: 2px; right: 4px; font-size: 0.6rem; font-weight: 400; color: var(--tr-muted); }
.tr-wrap .tr-table-shape.dragging { opacity: .7; z-index: 50; }
.tr-wrap .tr-table-shape { overflow: visible; }
.tr-wrap .tr-table-ref { position: relative; z-index: 1; }

/* Bestuhlung: Stuhl-/Bank-Marken rund um den Tisch (drehen mit dem Tisch) */
.tr-wrap .tr-chair { position: absolute; background: #cbd5e1; border: 1px solid #94a3b8; border-radius: 3px; pointer-events: none; }
.tr-wrap .tr-bench-bar { position: absolute; background: #c8a98e; border: 1px solid #9c7c62; border-radius: 3px; pointer-events: none; }
.tr-wrap .tr-table-shape.free .tr-chair { background: #d1fae5; border-color: #6ee7b7; }
.tr-wrap .tr-table-shape.occupied .tr-chair { background: #fecaca; border-color: #f87171; }
.tr-wrap .tr-table-shape.reserved .tr-chair { background: #bfdbfe; border-color: #93c5fd; }

/* Deko-Palette im Editor */
.tr-wrap .tr-decor-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 14px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--tr-border); border-radius: 8px; }
.tr-wrap .tr-decor-palette-label { font-size: .8rem; color: var(--tr-muted); font-weight: 600; margin-right: 4px; }

/* Deko-/Struktur-Objekte auf dem Plan */
.tr-wrap .tr-decor { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 6px; background: #fff; border: 1.5px dashed #cbd5e1; color: #475569; cursor: pointer; user-select: none; overflow: visible; }
.tr-wrap .tr-decor.tr-decor-static { cursor: default; }
.tr-wrap .tr-decor.sel { outline: 3px solid var(--tr-primary); outline-offset: 2px; }
.tr-wrap .tr-decor.dragging { opacity: .7; z-index: 60; }
.tr-wrap .tr-decor-glyph { font-size: 1.4rem; line-height: 1; }
.tr-wrap .tr-decor-cap { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--tr-muted); white-space: nowrap; pointer-events: none; }
.tr-wrap .tr-decor-textlabel { font-size: .82rem; font-weight: 600; color: #374151; padding: 0 4px; text-align: center; }
.tr-wrap .tr-decor-plant { border-color: #86efac; background: #f0fdf4; }
.tr-wrap .tr-decor-bar { border: 1.5px solid #b8977e; background: #efe3d8; color: #7c5a45; }
.tr-wrap .tr-decor-text { border-style: solid; border-color: #e5e7eb; background: #fffbe6; }
.tr-wrap .tr-decor-divider { border: none; background: repeating-linear-gradient(45deg,#9ca3af,#9ca3af 6px,#d1d5db 6px,#d1d5db 12px); }
.tr-wrap .tr-decor-window { border: none; background: #bfdbfe; box-shadow: inset 0 0 0 2px #93c5fd; border-radius: 2px; }
.tr-wrap .tr-decor-stairs { border: 1.5px solid #9ca3af; background: repeating-linear-gradient(to bottom, #eef2f7 0, #eef2f7 5px, #9ca3af 5px, #9ca3af 6px); border-radius: 3px; }
.tr-wrap .tr-decor-divider .tr-decor-glyph, .tr-wrap .tr-decor-window .tr-decor-glyph, .tr-wrap .tr-decor-stairs .tr-decor-glyph { display: none; }

.tr-wrap .tr-floor-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: 0.8rem; color: var(--tr-muted); }
.tr-wrap .tr-floor-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tr-wrap .tr-floor-legend .lg-free::before { background: #10b981; }
.tr-wrap .tr-floor-legend .lg-reserved::before { background: #2563eb; }
.tr-wrap .tr-floor-legend .lg-occupied::before { background: #dc2626; }
.tr-wrap .tr-floor-legend .lg-blocked::before { background: #9ca3af; }

.tr-wrap .tr-area-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tr-wrap .tr-area-tab { padding: 6px 14px; border: 1px solid var(--tr-border); border-radius: 20px; background: #fff; cursor: pointer; font-size: 0.85rem; }
.tr-wrap .tr-area-tab.active { background: var(--tr-primary); color: #fff; border-color: var(--tr-primary); }

/* Zeitleiste */
.tr-wrap .tr-timeline { overflow-x: auto; }
.tr-wrap .tr-timeline-row { display: flex; align-items: center; border-bottom: 1px solid #f3f4f6; min-height: 38px; }
.tr-wrap .tr-timeline-label { width: 90px; flex-shrink: 0; font-weight: 600; font-size: 0.82rem; }
.tr-wrap .tr-timeline-track { position: relative; flex: 1; height: 30px; background: #f8fafc; border-radius: 4px; }
.tr-wrap .tr-timeline-bar { position: absolute; top: 3px; height: 24px; border-radius: 4px; color: #fff; font-size: 0.7rem; padding: 3px 6px; overflow: hidden; white-space: nowrap; cursor: pointer; }

/* Modal */
.tr-wrap .tr-modal-bg, .tr-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow:auto; }
.tr-modal-bg.show { display: flex; }
.tr-modal { background: #fff; border-radius: 12px; max-width: 560px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.tr-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--tr-border); font-weight: 600; display: flex; align-items: center; }
.tr-modal-head .close { margin-left: auto; cursor: pointer; font-size: 1.3rem; color: #9ca3af; background: none; border: none; }
.tr-modal-body { padding: 20px; }
.tr-modal-foot { padding: 14px 20px; border-top: 1px solid var(--tr-border); display: flex; gap: 10px; justify-content: flex-end; }

.tr-wrap .toast, .tr-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 2000; opacity: 0; transition: opacity .2s; }
.tr-toast.show { opacity: .95; }
.tr-toast.err { background: #991b1b; }

.tr-wrap .spinner { display:inline-block; width:16px; height:16px; border:2px solid #e5e7eb; border-top-color: var(--tr-primary); border-radius:50%; animation: tr-spin .8s linear infinite; vertical-align:middle; }
@keyframes tr-spin { to { transform: rotate(360deg); } }

/* ============ Reports ============ */
.tr-wrap .tr-bar { background: #f3f4f6; border-radius: 4px; height: 22px; position: relative; overflow: hidden; }
.tr-wrap .tr-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tr-primary); border-radius: 4px; }
.tr-wrap .tr-heat td { width: 26px; height: 26px; text-align: center; font-size: 0.65rem; border: 1px solid #fff; }

/* ============ Oeffentliche Buchungsseite ============ */
.tr-public { font-family: 'Segoe UI', Arial, sans-serif; color: #1f2937; background: #f7f7f8; margin: 0; padding: 0; }
.tr-book { max-width: 540px; margin: 0 auto; padding: 24px 16px 48px; }
.tr-book .tr-book-head { text-align: center; margin-bottom: 18px; }
.tr-book .tr-book-head h1 { color: var(--tr-primary); font-size: 1.5rem; margin: 0 0 6px; }
.tr-book .tr-book-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.07); padding: 22px; }
.tr-book .tr-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.tr-book .tr-step-dots span { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; }
.tr-book .tr-step-dots span.on { background: var(--tr-primary); }
.tr-book label { display: block; font-size: 0.8rem; font-weight: 600; color: #6b7280; margin: 12px 0 5px; }
.tr-book input, .tr-book select, .tr-book textarea { width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px; padding: 11px; font-size: 1rem; font-family: inherit; }
.tr-book input:focus, .tr-book select:focus, .tr-book textarea:focus { outline: none; border-color: var(--tr-primary); }
.tr-book .tr-slots { display: grid; grid-template-columns: repeat(auto-fill,minmax(82px,1fr)); gap: 8px; margin-top: 8px; }
.tr-book .tr-slot { padding: 11px 4px; border: 1.5px solid #d1d5db; border-radius: 8px; text-align: center; cursor: pointer; background: #fff; font-size: 0.95rem; }
.tr-book .tr-slot:hover { border-color: var(--tr-primary); }
.tr-book .tr-slot.sel { background: var(--tr-primary); color: #fff; border-color: var(--tr-primary); }
.tr-book .tr-slot.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.tr-book .tr-btn { width: 100%; background: var(--tr-primary); color: #fff; border: none; padding: 14px; border-radius: 10px; font-size: 1.05rem; font-weight: 600; cursor: pointer; margin-top: 16px; }
.tr-book .tr-btn:disabled { opacity: .5; cursor: not-allowed; }
.tr-book .tr-btn.ghost { background: #fff; color: var(--tr-primary); border: 1.5px solid var(--tr-primary); }
.tr-book .tr-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: #4b5563; margin-top: 14px; }
.tr-book .tr-consent input { width: auto; margin-top: 3px; }
.tr-book .tr-msg { padding: 12px 14px; border-radius: 8px; margin-top: 14px; font-size: 0.9rem; }
.tr-book .tr-msg.ok { background: #d1fae5; color: #065f46; }
.tr-book .tr-msg.err { background: #fee2e2; color: #991b1b; }
.tr-book .tr-summary { background: #f8fafc; border-radius: 8px; padding: 14px; margin: 10px 0; font-size: 0.92rem; }
.tr-book .tr-honey { position: absolute; left: -9999px; }
.tr-book .tr-row { display:flex; gap:10px; } .tr-book .tr-row > * { flex:1; }

/* ============ Reservierungs-Karte (Gastsuche/Tischzuweisung) ============ */
.tr-wrap .tr-guest-results {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #fff; border: 1px solid var(--tr-border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 280px; overflow: auto; margin-top: 2px;
}
.tr-wrap .tr-guest-results.show { display: block; }
.tr-wrap .tr-guest-item { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; cursor: pointer; font-size: 0.88rem; }
.tr-wrap .tr-guest-item:last-child { border-bottom: none; }
.tr-wrap .tr-guest-item:hover { background: var(--tr-primary-soft); }
.tr-wrap .tr-guest-item.muted { color: #9ca3af; cursor: default; }
.tr-wrap .tr-guest-item .muted { color: var(--tr-muted); font-size: 0.78rem; margin-top: 2px; }
.tr-wrap .tr-table-options { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tr-wrap .tr-chip .tr-chip-x { text-decoration: none; color: inherit; opacity: .7; margin-left: 2px; }
.tr-wrap .tr-chip .tr-chip-x:hover { opacity: 1; }

/* ============ Print (Run-Sheet) ============ */
@media print {
  .tr-noprint, .tr-wrap header.tr-head, .tr-wrap .actions, .fiche-titre, .side-nav, #id-left, #id-top, .login_block { display: none !important; }
  .tr-print { display: block !important; }
  body, .tr-wrap { background: #fff !important; }
  .tr-wrap .card { box-shadow: none; border: 1px solid #ccc; }
  table.tr-list th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tr-print-break { page-break-after: always; }
}