* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f4f5f7;
  margin: 0;
  color: #1f2430;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }
.wrap.wide { max-width: 960px; }
.wrap.narrow { max-width: 380px; }
h1 { margin-bottom: 4px; }
.event-info {
  color: #444;
  margin: 4px 0 16px;
  /* Preserves the admin's line breaks (e.g. name / date / location on
     separate lines) without needing to render this as HTML. */
  white-space: pre-line;
}

/* FAQ: <details>/<summary> gives a native, JS-free collapsible section. */
.faq-block summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  outline: none;
}
.faq-block[open] summary { margin-bottom: 12px; }
.faq-list dt { font-weight: 600; margin-top: 14px; }
.faq-list dt:first-child { margin-top: 0; }
.faq-list dd { margin: 4px 0 0; color: #444; white-space: pre-line; }

.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 14px; color: #444; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.dot.free { background: #21823f; }
.dot.held { background: #f0b429; }
.dot.booked { background: #c62828; }

form label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  color: #333;
}
form input,
form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
}
form textarea { resize: vertical; }
button, .btn {
  background: #1f6feb;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
/* Links, die neben echten Buttons stehen (z. B. in .row-actions). */
.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: normal;
}
button.secondary, .btn.secondary { background: #e5e7eb; color: #333; }
/* Aktionen, die etwas unwiderruflich entfernen oder freigeben. */
button.danger, .btn.danger { background: #c94b4b; color: #fff; }

button:hover, .btn:hover { background: #1a5fd0; }
button.secondary:hover, .btn.secondary:hover { background: #d3d7de; }
button.danger:hover, .btn.danger:hover { background: #b03d3d; }
.picker-btn:hover { border-color: #1f6feb; }

/* Ein sichtbarer Fokusring ist die einzige Orientierung bei Tastaturbedienung;
   der Browser-Standard geht auf den farbigen Buttons unter. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #1f2430;
  outline-offset: 2px;
}
.error { color: #c94b4b; margin-top: 10px; min-height: 1em; }

/* Vertikale Liste aus Checkbox-/Radio-Zeilen (z. B. Übernahme-Optionen). */
.checkbox-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.radio-inline { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-bottom: 0; }
.radio-inline input { width: auto; margin: 0; }

/* --- Admin --- */
.admin-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

.notice { background: #eaf4ea; color: #256029; padding: 10px 14px; border-radius: 6px; }
.notice.error { background: #fdeced; color: #96272c; }

.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #eee; }
.tabs a {
  padding: 8px 14px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a.active { color: #1f6feb; border-bottom-color: #1f6feb; font-weight: 600; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; }
.admin-table th { color: #666; font-weight: 600; font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.admin-table tr:target { background: #fff8db; }

/* Admin-Tabellen (Anmeldungen, Gutscheine) haben zu viele Spalten für schmale
   Bildschirme. Statt die ganze Seite horizontal scrollen zu lassen (bricht
   Header/Nav mit weg), scrollt hier nur der Tabellenbereich selbst; die
   Mindestbreite hält Spalten lesbar statt sie zusammenzuquetschen. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll .admin-table { min-width: 720px; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #fff; }
.badge.paid { background: #2fa84f; }
.badge.pending { background: #e0a300; }
.badge.cancelled { background: #999; }

button.small, .btn.small { padding: 6px 10px; font-size: 13px; }

.hint { color: #666; font-size: 14px; }

.floorplan-editor { margin-top: 12px; }
.table-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.picker-btn {
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid #ccc;
  background: #f4f5f7; color: #333; font-size: 13px; cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-btn.placed { border-color: #2fa84f; }
.picker-btn.active { background: #1f6feb; color: #fff; border-color: #1f6feb; }

/* Floor plan display (public table selector, admin editor, admin dashboard):
   .plan-scroll is the outer, width-constrained, horizontally scrollable
   viewport. .plan-inner has a FIXED width and is the positioned ancestor
   for the marker dots — percentage-based left/top on the markers is always
   resolved against this fixed width, so it stays correct and the markers
   scroll together with the image regardless of screen size. Without the
   fixed-width inner box, percentages would resolve against the outer
   (visually clipped) box instead of the actual image size, causing markers
   to be misplaced and not move together with the image while scrolling. */
.plan-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}
.plan-inner {
  position: relative;
  width: 800px;
}
.plan-inner img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
#plan-image { cursor: crosshair; }

.plan-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  background: #1f6feb;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}

.plan-table-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: 12px; font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
  text-decoration: none;
}
.plan-table-marker.free { background: #21823f; color: #fff; cursor: pointer; opacity: 1; }
.plan-table-marker.held { background: #f0b429; color: #302300; cursor: not-allowed; opacity: 1; }
.plan-table-marker.booked { background: #c62828; color: #fff; cursor: not-allowed; opacity: 1; }

.dashboard-plan-container a.plan-table-marker { cursor: pointer; }
.dashboard-plan-container span.plan-table-marker { cursor: default; }

.inline-form { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.inline-form label { margin-bottom: 0; }
.inline-form input { width: auto; min-width: 160px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
code { background: #f0f1f3; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.hint.success { color: #2fa84f; }
.hint.error-text { color: #c94b4b; }

/* Kleinere Bildschirme (Smartphones): etwas kompaktere Abstände, damit
   Karten/Tabellen mehr nutzbare Breite haben statt Rand zu verschenken. */
@media (max-width: 480px) {
  .wrap { padding: 20px 12px 48px; }
  .card { padding: 16px; }
}

/* Tablet: Formulare mit mehreren Feldern (Gutschein-Generierung etc.)
   dürfen breiter nebeneinander stehen statt früh umzubrechen. */
@media (min-width: 768px) {
  .inline-form input { min-width: 200px; }
}

/* Login: gleiche Optik wie die Admin-Shell, nur ohne Sidebar. */
.admin-login { max-width: 400px; margin: 0 auto; padding: 64px 16px; }
.admin-login .admin-brand { padding: 0 0 16px; }
.admin-login .card { margin-top: 0; }
.admin-login button { width: 100%; }

/* Shared admin shell. Public booking styles remain independent. */
.admin-body { --admin-border: #dfe5ec; --admin-muted: #536174; background: #f5f7fa; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 224px; background: #fff; border-right: 1px solid var(--admin-border); padding: 28px 16px; overflow-y: auto; }
.admin-brand { display: block; padding: 0 12px 24px; font-size: 23px; font-weight: 750; color: #152a45; text-decoration: none; }
.admin-brand span { display: block; font-size: 12px; color: var(--admin-muted); font-weight: 500; margin-top: 5px; }
.admin-navigation > summary { display: none; }
.admin-sidebar nav a { display: block; padding: 11px 12px; border-radius: 7px; color: #405068; text-decoration: none; font-size: 14px; margin: 3px 0; }
.admin-sidebar nav a:hover { background: #f0f4fa; }
.admin-sidebar nav a.active { background: #eaf1ff; color: #1755b4; font-weight: 650; }
.nav-group, .eyebrow { font-size: 12px; font-weight: 650; color: var(--admin-muted); }
.nav-group { margin: 24px 12px 8px; }
.nav-account { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--admin-border); }
.admin-main { margin-left: 224px; padding: 32px clamp(20px, 3vw, 48px) 64px; max-width: 1744px; }
.admin-header { margin-bottom: 28px; }
.admin-header h1 { margin: 0; font-size: 28px; letter-spacing: -.5px; }
.eyebrow { margin: 0 0 8px; }
.admin-body .card { border: 1px solid var(--admin-border); box-shadow: none; margin-top: 20px; }
.admin-body .legend { margin: 0 0 12px; }
.admin-body h2 { font-size: 19px; margin-top: 0; }
.admin-body h3 { font-size: 16px; }
.admin-body p { line-height: 1.55; }
.admin-body .hint { color: var(--admin-muted); }
.admin-body button, .admin-body .btn, .admin-body select { min-height: 40px; }
.admin-body select, .admin-body .plan-picker-tools input { display: block; width: 100%; margin-top: 4px; border: 1px solid #bcc7d5; border-radius: 6px; padding: 10px; font: inherit; background: white; }
.admin-body input:not([type=checkbox]):not([type=radio]), .admin-body textarea { border-color: #bcc7d5; }
.admin-body select:focus-visible { outline: 2px solid #1f2430; outline-offset: 2px; }
.admin-body button:disabled { opacity: .55; cursor: wait; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--admin-border); }
.form-actions .danger, .form-actions > form:has(.danger) { margin-right: auto; }
.admin-body .form-card { max-width: 850px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat-cards > div { background: white; padding: 18px 20px; border: 1px solid var(--admin-border); border-radius: 10px; }
.stat-cards span { display: block; color: var(--admin-muted); }
.stat-cards strong { display: block; font-size: 28px; margin-top: 8px; color: #152a45; }
.admin-body .tabs { margin-top: 24px; flex-wrap: wrap; border-color: var(--admin-border); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-bar label { margin: 0; }
.filter-bar label:first-of-type { flex: 1; min-width: 220px; }
.filter-bar select { font-size: 15px; }
.admin-body .admin-table th { padding: 12px; background: #f7f9fc; }
.admin-body .admin-table td { padding: 14px 12px; vertical-align: top; }
.admin-body .admin-table tr:hover { background: #fafcff; }
.cell-detail { display: block; font-size: 12px; color: var(--admin-muted); margin-top: 6px; overflow-wrap: anywhere; }
.admin-body .badge { display: inline-block; font-weight: 650; line-height: 1.6; }
.admin-body .badge.paid { background: #e3f4e9; color: #196038; }
.admin-body .badge.pending { background: #fff0c2; color: #755300; }
.admin-body .badge.cancelled { background: #edf0f4; color: #4b5667; }
/* Tischstatus: gleiche Ampel wie Legende und Lageplan-Marker. */
.admin-body .badge.free { background: #e3f4e9; color: #196038; }
.admin-body .badge.held { background: #fff0c2; color: #755300; }
.admin-body .badge.booked { background: #fbe5e6; color: #96272c; }
.admin-body .badge.inactive { background: #edf0f4; color: #4b5667; }
.error-text { color: #96272c; }
.booking-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 180px; }
.booking-actions form button { width: 100%; }
.booking-actions button, .booking-actions .btn { text-align: left; }
.booking-actions .btn { justify-content: flex-start; }
.admin-body .danger-zone { border-color: #e6a8ad; }
.danger-zone h2 { color: #96272c; }
.faq-editor > summary { cursor: pointer; font-weight: 650; padding: 4px 0; }
.faq-editor[open] > summary { margin-bottom: 24px; }
.email-tabs { display: none; }
.js-enabled .email-tabs { display: flex; }
.skip-link { position: fixed; left: 240px; top: -100px; z-index: 10; background: white; padding: 12px; }
.skip-link:focus { top: 8px; }
@media (max-width: 760px) {
 .admin-sidebar { position: static; width: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--admin-border); }
 .admin-brand { padding: 0 0 12px; font-size: 20px; }
 .admin-brand span { display: inline; margin-left: 8px; }
 .admin-navigation > summary { display: list-item; cursor: pointer; padding: 10px 0; }
 .admin-main { margin-left: 0; padding: 24px 16px 48px; }
 .admin-header h1 { font-size: 24px; }
 .admin-body .card { padding: 16px; }
 .admin-body .inline-form { align-items: stretch; }
 .admin-body .inline-form label { flex: 1 1 180px; }
 .admin-body .inline-form input { width: 100%; min-width: 0; }
 .stat-cards { gap: 10px; }
 .stat-cards > div { padding: 14px; }
 .skip-link { left: 16px; }
}
.email-tabs button { background: transparent; color: #536174; border-radius: 0; border-bottom: 2px solid transparent; }
.email-tabs button[aria-selected=true] { color: #1755b4; border-bottom-color: #1755b4; font-weight: 650; }
.email-tabs button:hover { background: #eaf1ff; }
.admin-body .picker-btn:hover { background: #eaf1ff; color: #1755b4; }
.admin-body .picker-btn.active:hover { background: #1a5fd0; color: #fff; }
@media (max-width: 480px) { .form-actions { flex-wrap: wrap; } }

/* Public booking flow: shared palette with a focused, mobile-first layout. */
.booking-body { background: #f5f7fa; color: #203047; }
.booking-body [hidden] { display: none !important; }
.booking-wrap { max-width: 920px; margin: 0 auto; padding: 36px 24px 64px; }
.booking-header h1 { margin: 8px 0 12px; font-size: clamp(26px, 5vw, 36px); letter-spacing: -.6px; }
.booking-header p { line-height: 1.6; }
.booking-body .eyebrow { color: #536174; font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.booking-body .card { border: 1px solid #dfe5ec; box-shadow: none; padding: 28px; }
.booking-body h2 { font-size: 23px; margin-top: 0; scroll-margin-top: 24px; }
.booking-body p { line-height: 1.6; }
.booking-body .hint { color: #536174; }
.booking-progress { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.booking-progress li { display: flex; align-items: center; gap: 9px; color: #536174; font-size: 14px; border-bottom: 3px solid #dfe5ec; padding: 0 0 14px; }
.booking-progress span { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; background: #e5eaf1; border-radius: 50%; font-weight: 650; }
.booking-progress [aria-current] { color: #1755b4; border-color: #1f6feb; font-weight: 650; }
.booking-progress [aria-current] span { background: #1f6feb; color: #fff; }
.booking-section-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.booking-section-header h2 { margin-bottom: 0; }
.booking-body button { min-height: 44px; }
.booking-body button:disabled { cursor: not-allowed; }
.booking-body .legend { flex-wrap: wrap; }
.view-switch { display: flex; gap: 8px; margin: 20px 0; }
.public-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.public-table { padding: 14px 10px; text-align: left; border: 1px solid transparent; min-height: 72px; font-weight: 650; }
.public-table small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; }
.public-table.free { color: #175634; background: #e7f4ec; border-color: #93caaa; }
.public-table.free:hover { background: #d3eddf; border-color: #267443; }
.public-table.held, .public-table.held:hover { background: #fff4d6; color: #775900; border-color: #e8d596; }
.public-table.booked, .public-table.booked:hover { background: #f6e8e9; color: #8c3d43; border-color: #e8c6c9; }
.booking-body .plan-table-marker { width: 40px; height: 40px; min-height: 40px; }
.booking-body .plan-table-marker.free:hover { background: #267443; }
.booking-body .plan-table-marker.held:hover { background: #f0b429; }
.booking-body .plan-table-marker.booked:hover { background: #c62828; }
.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.booking-body input { min-height: 44px; border-color: #b9c5d4; font-size: 16px; }
.payment-options { border: 0; padding: 0; margin: 24px 0; }
.payment-options legend { font-weight: 650; margin-bottom: 12px; }
.payment-option { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; cursor: pointer; }
.payment-option:has(input:checked) { border-color: #1f6feb; background: #f0f5ff; }
.payment-option input { width: 20px; height: 20px; min-height: 20px; margin: 0; flex-shrink: 0; accent-color: #1f6feb; }
.payment-option small { display: block; font-size: 13px; color: #536174; line-height: 1.6; margin-top: 5px; }
.booking-summary { background: #f5f7fb; border: 1px solid #e0e6ee; border-radius: 9px; padding: 18px 20px; margin: 20px 0; }
.booking-summary dl { margin: 0; }
.booking-summary dl > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.booking-summary dl > div:last-child { margin-bottom: 0; }
.booking-summary dd { margin: 0; text-align: right; font-weight: 600; }
.summary-total { border-top: 1px solid #d8e0ea; padding-top: 14px; font-size: 18px; font-weight: 650; }
.booking-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #e0e6ee; padding-top: 20px; margin-top: 20px; }
.booking-form-actions button:only-child { margin-left: auto; }
.booking-body button:disabled:not(.public-table):not(.plan-table-marker) { opacity: .65; }
.booking-status-label { color: #216c42; font-size: 13px; font-weight: 650; }
.countdown { padding: 12px 16px; background: #fff4d6; color: #775900; border-radius: 8px; }
.reference-label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.copy-reference { display: flex; gap: 10px; }
.copy-reference input { flex: 1; min-width: 0; border: 1px solid #b9c5d4; border-radius: 6px; padding: 10px; font: inherit; }
.booking-body .hint.success { color: #216c42; }
.booking-body .hint.error-text { color: #96272c; }
#paypal-button-container { margin-top: 24px; }
@media (max-width: 600px) {
 .booking-wrap { padding: 24px 14px 48px; }
 .booking-body .card { padding: 20px 16px; }
 .booking-progress { gap: 8px; }
 .booking-progress li { flex-direction: column; align-items: flex-start; font-size: 12px; }
 .booking-fields { grid-template-columns: 1fr; }
 .booking-form-actions { flex-direction: column; align-items: stretch; }
 .booking-form-actions button:only-child { margin-left: 0; }
 .booking-section-header { align-items: flex-start; }
 .booking-summary { padding: 16px; }
 .booking-summary dl > div { gap: 12px; }
 .public-table-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
}

/* Native modal keeps focus within the booking panel and the overview in place. */
.detail-panel-open { overflow: hidden; }
.detail-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(640px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; border: 0; border-left: 1px solid #dfe5ec; padding: 0 24px 32px; background: #f5f7fa; color: #203047; overflow-y: auto; }
.detail-panel::backdrop { background: rgb(15 23 42 / 45%); }
.detail-panel-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; background: #f5f7fa; border-bottom: 1px solid #dfe5ec; }
.detail-panel-header { flex-wrap: wrap; }
.detail-panel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.detail-panel-actions .btn { justify-content: center; }
.detail-panel-header h2 { margin: 0; font-size: 22px; }
.detail-panel .card { padding: 20px; }
.detail-summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.detail-summary > div { margin: 12px 0; }
.detail-summary dt { color: #536174; font-size: 13px; }
.detail-summary dd { margin: 4px 0; overflow-wrap: anywhere; }
.detail-editor > summary { cursor: pointer; font-weight: 650; font-size: 16px; }
.detail-editor[open] > summary { margin-bottom: 20px; }
.booking-table a[data-booking-detail]:not(.btn) { color: #1755b4; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .detail-panel { width: 100vw; border: 0; padding: 0 16px 24px; } }

.detail-help { margin-top: 20px; font-size: 14px; color: #536174; }
.detail-help summary { cursor: pointer; }
@media (max-width: 380px) { .detail-summary { grid-template-columns: 1fr; } }

/* Event setup and inactive tables */
.tariff-table-options { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 0; }
.detail-editor > form { padding: 1rem 0; }
.public-table.disabled, .plan-table-marker.disabled { background: #475569; color: #fff; cursor: not-allowed; opacity: 1; }

/* Compact inventory and clearly separated voucher pricing. */
.voucher-tariff { display: grid; gap: 3px; }
.voucher-tariff strong { font-size: 14px; font-weight: 600; }
.voucher-tariff span { font-size: 13px; color: #596579; white-space: nowrap; }
.voucher-code { display: inline-block; padding: 4px 8px; border-radius: 6px; background: #f1f5f9; }
.plan-upload > summary, .inventory-add > summary { cursor: pointer; font-weight: 650; }
.plan-upload[open] > summary, .inventory-add[open] > summary { margin-bottom: 18px; }
.inventory-add { border-bottom: 1px solid #e2e8f0; padding: 0 0 18px; margin: 16px 0; }
.floorplan-editor .table-picker { max-height: 180px; overflow-y: auto; align-content: start; padding: 4px; }
.plan-picker-tools, .inventory-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.plan-picker-tools[hidden] { display: none; }
.plan-picker-tools label, .inventory-toolbar label { margin: 0; flex: 1 1 180px; }
.inventory-toolbar input, .inventory-toolbar select, .plan-picker-tools input, .plan-picker-tools select { width: 100%; }
.inventory-heading, .inventory-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.inventory-heading h2 { margin: 0; }
.inventory-pagination { margin-top: 16px; font-size: 14px; color: #596579; }
.inventory-pagination > div { display: flex; gap: 8px; }
.admin-body .inventory-table td { padding: 10px 12px; vertical-align: middle; }
.table-scroll .inventory-table { min-width: 570px; }
.placement-label { font-size: 13px; color: #596579; white-space: nowrap; }
#inventory, #table-edit { scroll-margin-top: 20px; }
#table-edit > form { margin-top: 18px; }
.picker-btn[hidden] { display: none; }

.inventory-page-size { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inventory-page-size label { margin: 0; color: inherit; }
.admin-body .inventory-page-size select { width: auto; min-width: 76px; margin: 0; }