.billing-qr {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dbe5e1;
  border-radius: 13px;
  background: #f7faf8;
  text-align: center;
}

.billing-qr > b,
.billing-qr > small {
  display: block;
}
.admin-buffet-booking { margin: 12px 0; border: 1px solid #dfc98f; border-radius: 10px; background: #fff9e9; }
.admin-buffet-booking>summary { padding: 12px; color: #72501b; font-weight: 900; cursor: pointer; }
.admin-buffet-booking form { padding: 0 12px 12px; }
.admin-buffet-lines label { display: grid; grid-template-columns: 1fr 75px; align-items: center; gap: 10px; margin: 7px 0; }
.admin-buffet-lines label span b,.admin-buffet-lines label span small { display: block; }
.admin-buffet-lines label span small { color: #7c6a45; }
.admin-buffet-lines input { margin: 0; }
.admin-buffet-booking .primary { width: 100%; margin-top: 8px; }
.staff-row { grid-template-columns: 140px minmax(140px,1fr) minmax(140px,190px) minmax(150px,190px) auto auto auto!important; }
@media(max-width:700px){.staff-row{grid-template-columns:1fr!important}.staff-row>*{grid-column:1!important}}
.emergency-admin-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; padding: 16px 18px; border: 2px solid #a6382f; border-radius: 13px; background: #f8dedb; color: #8e2e27; }
.emergency-admin-banner b { font-size: 16px; }
.emergency-admin-banner span { font-size: 12px; }
.emergency-switch { margin: 0 0 8px; padding: 14px!important; border: 2px solid #d16a60!important; border-radius: 11px; background: #fff0ee; color: #8e2e27; }
.buffet-missing-warning { display: block; margin: 10px 0; padding: 9px 11px; border-radius: 9px; background: #fff0c9; color: #855811; font-size: 12px; }
.emergency-service-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 18px 0; }
.emergency-service-actions button { padding: 10px 12px; border: 1px solid #b9cbc5; border-radius: 9px; background: #fff; color: var(--deep); font-weight: 800; cursor: pointer; }
@media(max-width:650px){.emergency-admin-banner{display:block}.emergency-admin-banner span{display:block;margin-top:4px}}
.availability-panel { margin-bottom: 18px; border: 1px solid #d5e0dc; border-radius: 14px; background: #fff; overflow: hidden; }
.availability-panel>summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; }
.availability-panel>summary span b,.availability-panel>summary span small { display: block; }
.availability-panel>summary small { margin-top: 2px; color: #71817c; }
.availability-panel>summary>strong { color: #9a443b; font-size: 12px; }
.availability-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 7px; padding: 0 14px 14px; }
.availability-grid button { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 45px; padding: 9px 10px; border: 1px solid #dce5e1; border-radius: 9px; background: #edf7f1; color: #225f45; cursor: pointer; }
.availability-grid button.sold-out { background: #f8e7e4; color: #9b4037; }
.availability-grid button span { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.availability-grid button b { font-size: 10px; }
.order-edit-panel { margin: 10px 0; border: 1px solid #dbe4e0; border-radius: 9px; background: #f5f8f6; }
.order-edit-panel>summary { padding: 11px; color: var(--deep); font-size: 12px; font-weight: 800; cursor: pointer; }
.order-edit-panel form { padding: 0 11px 11px; }
.order-edit-lines label { display: grid; grid-template-columns: 1fr 68px; align-items: center; gap: 8px; margin: 7px 0; }
.order-edit-lines input { margin: 0; padding: 8px; }
.order-add-line { display: grid; grid-template-columns: 1fr 68px; gap: 7px; margin: 10px 0; }
.order-add-line select,.order-add-line input { margin: 0; padding: 8px; }
.order-edit-panel .primary { width: 100%; font-size: 11px; }
.buffet-price-grid article>div { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 10px; }
.buffet-add { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 9px; background: var(--deep); color: #fff; font-weight: 800; cursor: pointer; }
.buffet-add b { font-size: 20px; line-height: 1; }
.buffet-add span { color: #fff!important; font-size: 11px!important; }
.buffet-picker { display: grid; grid-template-columns: 34px 28px 34px; align-items: center; flex: 0 0 auto; border: 1px solid #d9c79e; border-radius: 10px; background: #fffaf0; overflow: hidden; }
.buffet-picker button { width: 34px; height: 36px; padding: 0; border: 0; background: var(--deep); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; }
.buffet-picker button:disabled { background: #d9dfdc; cursor: default; }
.buffet-picker .buffet-quantity { text-align: center; color: var(--deep); font-size: 15px; }
.guest-preview-notice { position: sticky; top: 0; z-index: 20; display: flex; justify-content: center; gap: 14px; padding: 10px 16px; background: #ffdc82; color: #493711; font-size: 13px; }
.admin-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.admin-header-actions form { margin: 0; }
.guest-preview-link { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 13px; border: 1px solid #ffffff42; border-radius: 8px; color: #d4e2df; font-weight: 700; white-space: nowrap; }
.guest-preview-link:before { content: "◉"; margin-right: 7px; color: var(--gold); }
.guest-preview-link:hover,.guest-preview-link.active { background: #fff; color: var(--deep); }
@media(max-width:900px){.admin-header-actions{margin-left:auto}.guest-preview-link{width:48px;justify-content:center;overflow:hidden;font-size:0;padding:0}.guest-preview-link:before{margin:0;font-size:20px}}
.guest-preview-panel { border: 1px solid #d4dfdb; border-radius: 18px; background: #e5ece8; overflow: hidden; }
.guest-preview-toolbar { display: flex; align-items: flex-end; gap: 10px; padding: 12px; background: #fff; border-bottom: 1px solid #d4dfdb; }
.guest-preview-toolbar label { width: 100px; margin: 0; }
.guest-preview-toolbar input { margin-top: 3px; padding: 9px; }
.guest-preview-toolbar>div { display: flex; gap: 5px; }
.guest-preview-toolbar button,.guest-preview-toolbar a { min-height: 40px; padding: 10px 13px; border: 0; border-radius: 8px; background: #edf3f0; color: var(--deep); font-weight: 800; cursor: pointer; }
.guest-preview-toolbar button.active { background: var(--deep); color: #fff; }
.guest-preview-toolbar a { margin-left: auto; }
.guest-preview-stage { min-height: 760px; padding: 22px; overflow: auto; text-align: center; }
.guest-preview-stage iframe { display: block; width: 390px; max-width: 100%; height: 760px; margin: 0 auto; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px #082d2d35; transition: width .2s ease; }
@media(max-width:650px){.guest-preview-toolbar{align-items:stretch;flex-wrap:wrap}.guest-preview-toolbar>div{order:3;width:100%}.guest-preview-toolbar>div button{flex:1}.guest-preview-toolbar a{margin-left:0}.guest-preview-stage{padding:10px}}
.buffet-price-admin-row { grid-template-columns: minmax(160px,1fr) 120px minmax(170px,.7fr)!important; }
@media (max-width: 650px) {
  .buffet-price-grid article { align-items: center; }
  .buffet-add span { display: none; }
  .buffet-price-admin-row { grid-template-columns: 1fr!important; }
}

/* Tagesstatistik */
.stats-title { align-items: flex-end; }
.stats-date-picker { display: flex; align-items: flex-end; gap: 7px; padding: 8px; border: 1px solid #d4dfdb; border-radius: 14px; background: #fff; }
.stats-date-picker label { margin: 0; }
.stats-date-picker label span { display: block; margin: 0 0 4px 2px; color: #71817c; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stats-date-picker input { min-height: 40px; margin: 0; padding: 8px 10px; }
.stats-date-picker a { display: grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 9px; background: #edf3f0; color: var(--deep); font-weight: 900; text-decoration: none; }
.stats-date-picker .stats-today-link { padding: 0 12px; background: var(--deep); color: #fff; }
.stats-summary-grid { grid-template-columns: repeat(4,1fr); }
.period-summaries { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.period-summary { margin: 0; padding: 20px; }
.period-summary>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e1e8e4; }
.period-summary>header .eyebrow { margin: 0 0 3px; }
.period-summary>header h2 { margin: 0; font-size: 22px; }
.period-summary>header>span { color: #6f817b; font-size: 12px; font-weight: 700; white-space: nowrap; }
.period-summary-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 15px 0; }
.period-summary-values p { margin: 0; padding: 10px; border-radius: 9px; background: #f1f6f3; }
.period-summary-values span,.period-summary-values strong { display: block; }
.period-summary-values span { color: #6f817b; font-size: 10px; }
.period-summary-values strong { margin-top: 4px; color: var(--deep); font-size: 18px; }
.period-summary>footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 2px; }
.period-summary>footer span { color: #6f817b; font-size: 12px; }
.period-summary>footer strong { text-align: right; font-size: 13px; }
.stats-day-layout { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(500px,1.3fr); align-items: start; gap: 18px; }
.stats-day-layout>.panel { margin: 0; }
.daily-orders-title { display: flex; justify-content: space-between; margin-bottom: 14px; }
.daily-orders-title h2 { margin: 0; }
.daily-orders-title p { margin: 4px 0 0; color: #71817c; font-size: 12px; }
.daily-order-card { margin-top: 12px; border: 1px solid #dce5e1; border-radius: 13px; background: #fbfdfc; overflow: hidden; }
.daily-order-card>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #e3eae7; background: #f2f7f4; }
.daily-order-card>header b,.daily-order-card>header span,.daily-order-card>header small { display: block; }
.daily-order-card>header span { margin-top: 2px; font-size: 13px; }
.daily-order-card>header small { margin-top: 3px; color: #647771; }
.daily-status { padding: 6px 9px; border-radius: 99px; background: #e6efeB; color: #315d50; font-size: 11px; font-style: normal; font-weight: 900; white-space: nowrap; }
.daily-status.status-cancelled { background: #f7dfdc; color: #9b4037; }
.daily-status.status-new { background: #fff0c9; color: #865a16; }
.daily-order-items { padding: 7px 15px; }
.daily-order-items p { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding: 7px 0; border-bottom: 1px solid #edf1ef; }
.daily-order-items p:last-child { border: 0; }
.daily-order-items p span>b { display: inline-block; min-width: 28px; }
.daily-order-items small { display: block; margin: 2px 0 0 29px; color: #7b8985; }
.daily-order-card>footer { display: flex; justify-content: space-between; gap: 15px; padding: 11px 15px; border-top: 1px solid #e3eae7; background: #fff; }
.daily-order-card>footer strong { font-size: 17px; }
.daily-order-card.is-cancelled { opacity: .66; }
.daily-order-card.is-cancelled .daily-order-items,.daily-order-card.is-cancelled>footer strong { text-decoration: line-through; }
@media (max-width: 950px) {
  .stats-summary-grid { grid-template-columns: repeat(2,1fr); }
  .period-summaries { grid-template-columns: 1fr; }
  .stats-day-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .stats-title { align-items: stretch; }
  .stats-date-picker { width: 100%; flex-wrap: wrap; }
  .stats-date-picker label { flex: 1; }
  .stats-date-picker input { width: 100%; }
  .stats-date-picker .stats-today-link { flex: 1 0 100%; }
  .stats-summary-grid { grid-template-columns: 1fr 1fr!important; }
  .stats-summary-grid article { padding: 16px; }
  .stats-summary-grid strong { font-size: 28px; }
  .period-summary-values { grid-template-columns: 1fr 1fr; }
  .period-summary>header { display: block; }
  .period-summary>header>span { display: block; margin-top: 5px; }
}

.billing-qr-warning {
  display: block;
  margin-top: 10px;
  padding: 10px;
  border-radius: 9px;
  background: #fae7e3;
  color: #9a3f36;
  font-size: 13px;
}

.billing-print-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: var(--deep);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.billing-print-button:disabled { opacity: .42; cursor: not-allowed; }
.partial-toggle { width: 100%; margin-top: 9px; padding: 11px; border: 1px solid #9fb6ae; border-radius: 9px; background: #fff; color: var(--deep); font-weight: 800; cursor: pointer; }
.partial-billing { margin-top: 12px; padding-top: 12px; border-top: 1px solid #dce5e1; text-align: left; }
.partial-lines { margin-top: 8px; }
.partial-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e3e9e6; font-size: 13px; }
.partial-line > div { display: flex; align-items: center; gap: 7px; }
.partial-line button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--deep); color: #fff; font-size: 19px; cursor: pointer; }
.partial-line small { color: #75857f; }
.partial-total { display: flex; justify-content: space-between; padding: 13px 0; font-size: 16px; }
.partial-qr-empty { padding: 12px; border-radius: 9px; background: #f0f3f1; color: #667872; text-align: center; font-size: 12px; }
.partial-qr-image { display: block; width: min(100%,240px); margin: 8px auto; background: #fff; }
.page-admin .operations-grid > .staff-settings { grid-column: 1 / -1; width: 100%; min-width: 0; }
.staff-settings .settings-panel-title > div { min-width: 0; }
.staff-settings #staffRows { width: 100%; margin-top: 10px; }
.staff-settings .add-service { display: inline-flex; width: auto; min-width: 210px; justify-content: center; }
.staff-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e3e9e6; }
.staff-row input { margin: 0; }
.staff-on-duty { display: flex; align-items: center; gap: 9px; margin: 0; min-height: 48px; }
.staff-on-duty input { width: 25px!important; min-width: 25px; height: 25px; accent-color: #318266; }
.staff-on-duty span { color: var(--deep); font-weight: 800; }
.remove-staff { border: 0; border-radius: 8px; padding: 11px; background: #f9e5e2; color: #a3453c; font-weight: 700; cursor: pointer; }
.table-staff-form { margin: 12px 0 4px; }
.table-staff-form label { margin: 0; color: #60736d; }
.table-staff-form select { margin-top: 5px; min-height: 44px; }
.assigned-staff { display: block; margin-top: 7px; color: #61766f; font-size: 12px; font-style: normal; font-weight: 700; }
@media (max-width: 650px) {
  .staff-row { grid-template-columns: 1fr; padding: 13px 0; }
  .staff-row > * { grid-column: 1; }
  .remove-staff { width: 100%; }
}
.settings-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: -8px 0 18px; padding: 7px; border: 1px solid #dce5e1; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px #082d2d0b; }
.settings-tabs button { min-height: 50px; border: 0; border-radius: 10px; padding: 10px 13px; background: transparent; color: #60736d; font-weight: 800; cursor: pointer; }
.settings-tabs button:hover { background: #edf4f1; color: var(--deep); }
.settings-tabs button.active { background: var(--deep); color: #fff; box-shadow: 0 5px 15px #082d2d30; }
.page-admin .operations-grid > .settings-card[hidden] { display: none!important; }
.page-admin .operations-grid:has(> .settings-card[hidden]) { display: block; }
.page-admin .operations-grid:has(> .settings-card[hidden]) > .settings-card:not([hidden]) { width: 100%; }
.page-admin .operations-grid:has(> .settings-card[hidden]) > .settings-savebar { margin-top: 18px; }
@media (max-width: 760px) {
  .settings-tabs { display: flex; overflow-x: auto; position: sticky; top: 82px; z-index: 14; }
  .settings-tabs button { flex: 0 0 auto; white-space: nowrap; }
}
.guest-cash-qr { margin: 14px 0 20px; border: 1px solid #d9e4df; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px #082d2d0d; overflow: hidden; }
.guest-cash-qr summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 17px 18px; cursor: pointer; list-style: none; }
.guest-cash-qr summary::-webkit-details-marker { display: none; }
.guest-cash-qr-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mint); color: var(--deep); font-size: 23px; }
.guest-cash-qr summary b,.guest-cash-qr summary small { display: block; }
.guest-cash-qr summary small { margin-top: 3px; color: #74837f; font-size: 12px; }
.guest-cash-qr summary > strong { color: var(--lake); font-size: 13px; }
.guest-cash-qr[open] summary { border-bottom: 1px solid #e4eae7; }
.guest-cash-qr[open] summary > strong { font-size: 0; }
.guest-cash-qr[open] summary > strong:after { content: 'Schließen'; font-size: 13px; }
.guest-cash-qr-content { padding: 20px; text-align: center; }
.guest-cash-qr-content img { display: block; width: min(100%,330px); height: auto; margin: 0 auto; background: #fff; }
.guest-cash-qr-content > p { margin: 13px auto 0; color: #667872; font-size: 13px; }
.guest-cash-qr-warning { padding: 14px; border-radius: 10px; background: #fae7e3; color: #913f36!important; font-weight: 700; line-height: 1.5; }
.app-version-badge { float: right; margin: -30px 0 10px; padding: 4px 9px; border: 1px solid #d4dfdb; border-radius: 99px; background: #fff; color: #70817c; font-size: 10px; font-weight: 800; letter-spacing: .04em; }

.billing-ticket {
  width: 72mm;
  margin: 0 auto;
  padding: 5mm;
  color: #000;
  background: #fff;
  font: 12px/1.35 monospace;
}

.billing-ticket h1,
.billing-ticket h2,
.billing-ticket > p {
  margin: 4px 0;
  text-align: center;
}

.billing-ticket h1 { font-size: 24px; }
.billing-ticket h2 { font-size: 20px; }
.billing-ticket hr { border: 0; border-top: 1px dashed #000; margin: 10px 0; }
.billing-order-no { margin: 9px 0 4px; font-weight: 700; }
.billing-ticket-line { display: flex; justify-content: space-between; gap: 7px; margin: 4px 0; }
.billing-ticket-line span { max-width: 48mm; }
.billing-ticket-line b { white-space: nowrap; }
.billing-ticket-total { font-size: 16px; }
.billing-ticket-qr { margin-top: 12px; text-align: center; break-inside: avoid; }
.billing-ticket-qr > b { display: block; margin-bottom: 7px; }
.billing-ticket-qr img { display: block; width: 58mm; height: 58mm; margin: 0 auto; image-rendering: pixelated; }
.billing-ticket-warning { margin: 10px 0!important; padding: 7px; border: 2px solid #000; font-weight: 800; }
.billing-ticket-footer { margin-top: 10px!important; font-size: 10px; }

@media print {
  .billing-ticket { width: 72mm; padding: 2mm; }
  @page { margin: 4mm; }
}

.orders-service-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin: -8px 0 24px;
  padding: 18px 20px;
  border: 2px solid #e3ad3e;
  border-radius: 16px;
  background: linear-gradient(110deg, #fff8df, #fff1bd);
  color: #50380b;
  box-shadow: 0 10px 28px #9b6a151c;
}

.orders-service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #e3ad3e;
  font-size: 25px;
}

.orders-service-copy small,
.orders-service-copy strong,
.orders-service-copy em { display: block; }
.orders-service-copy small { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 900; }
.orders-service-copy strong { margin: 2px 0; font-size: 20px; }
.orders-service-copy em { font-style: normal; font-size: 13px; }
.orders-service-link { padding: 10px 13px; border-radius: 9px; background: #50380b; color: #fff; font-weight: 800; }
.orders-service-banner.urgency-waiting { border-color: #e38b32; background: linear-gradient(110deg,#fff0d7,#ffdca8); color: #65340b; }
.orders-service-banner.urgency-waiting .orders-service-icon { background: #e38b32; }
.orders-service-banner.urgency-urgent { border-color: #cf4f43; background: linear-gradient(110deg,#ffe7e3,#ffc9c1); color: #772d27; animation: serviceAttention 1.8s ease-in-out infinite; }
.orders-service-banner.urgency-urgent .orders-service-icon { background: #cf4f43; }
.orders-service-banner.urgency-urgent .orders-service-link { background: #772d27; }
.orders-service-details { display: grid; gap: 6px; margin-top: 9px; }
.orders-service-row { display: grid; grid-template-columns: 72px minmax(120px,1fr) minmax(110px,.8fr) 82px; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; background: #ffffff8c; font-size: 12px; }
.orders-service-row b { white-space: nowrap; }
.orders-service-row em,.orders-service-row i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.orders-service-row i { opacity: .78; }
.orders-service-row time { text-align: right; white-space: nowrap; font-weight: 900; }
.orders-service-more { padding-left: 9px; font-size: 11px; font-weight: 800; }
@keyframes serviceAttention { 0%,100% { box-shadow: 0 10px 28px #9b6a151c; } 50% { box-shadow: 0 10px 34px #cf4f4355; } }

@media (max-width: 600px) {
  .orders-service-banner { grid-template-columns: auto 1fr; padding: 15px; }
  .orders-service-link { grid-column: 1 / -1; text-align: center; }
  .orders-service-details { grid-column: 1 / -1; }
  .orders-service-row { grid-template-columns: 68px 1fr auto; }
  .orders-service-row i { grid-column: 2; }
  .orders-service-row time { grid-column: 3; grid-row: 1 / span 2; }
}
.table-view-controls { display: inline-flex; gap: 6px; margin: -8px 0 14px; padding: 6px; border: 1px solid #d6e1dd; border-radius: 13px; background: #fff; }
.table-view-controls button { min-height: 44px; border: 0; border-radius: 9px; padding: 9px 15px; background: transparent; color: #61746e; font-weight: 800; cursor: pointer; }
.table-view-controls button.active { background: var(--deep); color: #fff; }
.table-map { display: grid; gap: 22px; margin: 5px 0 28px; padding: 28px; border: 2px solid #d7e2de; border-radius: 22px; background-color: #eef3ef; background-image: linear-gradient(#dfe8e3 1px,transparent 1px),linear-gradient(90deg,#dfe8e3 1px,transparent 1px); background-size: 28px 28px; box-shadow: inset 0 0 40px #082d2d08; }
.table-map-area { padding: 20px; border: 1px solid #cfddd7; border-radius: 17px; background: #ffffffd9; box-shadow: 0 8px 24px #082d2d0d; }
.table-map-area[hidden] { display: none!important; }
.table-map-area>header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #dfe7e3; }
.table-map-area>header small { display: block; color: #71817c; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 900; }
.table-map-area>header h2 { margin: 2px 0 0; color: var(--deep); font-size: 25px; }
.table-map-area>header>strong { color: #61756e; font-size: 12px; }
.table-map-area-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); align-items: stretch; gap: 32px 24px; }
.table-map[hidden],.table-overview[hidden] { display: none!important; }
.page-admin .table-map-item { position: relative; display: block; width: 100%; min-height: 172px; padding: 0; border: 0; background: transparent; color: var(--deep); cursor: pointer; overflow: visible; }
.table-map-surface { position: absolute; inset: 20px 27px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; border: 4px solid #748f86; border-radius: 24px; background: #fff; box-shadow: 0 10px 23px #082d2d25; transition: transform .18s ease,box-shadow .18s ease; }
.table-map-item:hover .table-map-surface { transform: translateY(-3px); box-shadow: 0 14px 28px #082d2d2b; }
.table-map-surface small { margin-bottom: 4px; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 900; }
.table-map-surface b { font: 700 27px "Playfair Display",serif; }
.table-map-surface em { max-width: 100%; margin-top: 5px; overflow: hidden; color: #405a52; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-style: normal; font-weight: 700; }
.table-map-surface strong { margin-top: 5px; font-size: 16px; }
.table-map-item.occupied .table-map-surface { border-color: #318266; background: #f2fbf6; }
.table-map-item.occupied .table-map-surface small { color: #24704f; }
.table-map-item.ended .table-map-surface { border-color: #d28a2f; background: #fff8e9; }
.table-map-item.ended .table-map-surface small { color: #9a611d; }
.table-map-item.free .table-map-surface { border-color: #9cadA7; opacity: .86; }
.chair { position: absolute; z-index: 1; display: block; width: 40px; height: 20px; border: 3px solid #789087; border-radius: 8px 8px 5px 5px; background: #d7e3de; }
.chair-top { top: 0; left: 50%; transform: translateX(-50%); }
.chair-bottom { bottom: 0; left: 50%; transform: translateX(-50%) rotate(180deg); }
.chair-left { top: 50%; left: 5px; transform: translateY(-50%) rotate(-90deg); }
.chair-right { top: 50%; right: 5px; transform: translateY(-50%) rotate(90deg); }
.table-card-focus { animation: tableCardFocus 1.7s ease; }
.table-location-badge { display: inline-flex; align-items: center; width: fit-content; margin-top: 7px; padding: 5px 8px; border-radius: 99px; background: #e8f1ed; color: #365e52; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.table-detail-dialog { width: min(760px,calc(100% - 24px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 20px; background: #f4f1e9; overflow: hidden; box-shadow: 0 28px 90px #001f1f88; }
.table-detail-dialog::backdrop { background: #021d1db8; backdrop-filter: blur(4px); }
.table-detail-dialog-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; background: var(--deep); color: #fff; }
.table-detail-dialog-head small,.table-detail-dialog-head b { display: block; }
.table-detail-dialog-head small { color: #a9c4bd; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.table-detail-dialog-head b { margin-top: 2px; font-size: 16px; }
.table-detail-dialog-head button { width: 42px; min-height: 42px; border: 0; border-radius: 50%; background: #ffffff18; color: #fff; font-size: 25px; cursor: pointer; }
.table-detail-dialog-content { max-height: calc(100vh - 102px); padding: 18px; overflow-y: auto; }
.table-detail-dialog .table-account { width: 100%; padding: 22px; opacity: 1; box-shadow: none; }
.table-detail-dialog form { padding: 0; }
@keyframes tableCardFocus { 0%,100% { box-shadow: 0 8px 28px #082d2d10; } 35% { box-shadow: 0 0 0 5px #d7aa4a,0 14px 35px #082d2d30; } }
@media (max-width: 620px) {
  .table-view-controls { display: flex; width: 100%; }
  .table-view-controls button { flex: 1; }
  .table-map { gap: 14px; padding: 12px; }
  .table-map-area { padding: 14px 9px; }
  .table-map-area-grid { grid-template-columns: 1fr; gap: 30px; }
  .page-admin .table-map-item { min-height: 165px; }
  .table-map-surface { inset: 21px 28px; }
  .table-map-surface b { font-size: 27px; }
  .table-map-surface em { font-size: 13px; }
  .table-map-surface strong { font-size: 16px; }
  .chair { width: 38px; height: 19px; }
  .table-detail-dialog-content { padding: 10px; }
  .table-detail-dialog .table-account { padding: 16px; }
}

.billing-qr > b {
  color: var(--deep);
  margin-bottom: 9px;
}

.billing-qr > img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
  background: #fff;
}

.billing-qr > small {
  margin-top: 8px;
  color: #6f807b;
  line-height: 1.4;
}