/* A restrained, spatial table picker shared with the customer theme. */
.dining-table-choice { display: grid; gap: .625rem; min-width: 0; }
.dining-select-button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .75rem; border: 1px solid var(--line-200); border-radius: var(--radius); background: var(--surface, #fff); color: var(--ink-900); text-align: left; cursor: pointer; }
.dining-select-button > span:not(.icon) { display: grid; flex: 1; gap: .25rem; min-width: 0; }
.dining-select-button > .icon { flex: 0 0 auto; }
.dining-select-button strong { font-size: 1rem; overflow-wrap: anywhere; }
.dining-select-button small, .dining-map-caption, .dining-map-legend { color: var(--ink-600); font-size: .8125rem; line-height: 1.5; }
.dining-select-button:hover:not(:disabled) { border-color: var(--brand-600); }
.dining-select-button:disabled { cursor: default; opacity: .6; }
.dining-notice { font-size: .875rem; line-height: 1.5; color: var(--ink-700, var(--ink-600)); }
.dialog[data-key="dining-tables"] { --dialog-w: 29rem; }
.dialog[data-key="dining-tables"] .dialog-body { gap: .875rem; background: var(--surface, #fff); }
.dining-picker { display: grid; gap: .75rem; min-width: 0; }
.dining-area-tabs { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; }
.dining-area-tabs button { flex: none; min-height: 44px; padding: .625rem .875rem; border: 1px solid var(--line-200); border-radius: var(--radius); background: transparent; color: var(--ink-600); font: inherit; font-size: .875rem; cursor: pointer; }
.dining-area-tabs button[aria-pressed="true"] { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700, var(--brand-600)); font-weight: 600; }
.dining-map-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line-200); border-radius: var(--radius); background: var(--paper-50); padding: .5rem; }
.dining-map { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); grid-auto-rows: 44px; gap: 4px; min-width: 284px; min-height: 92px; }
.dining-map-table { position: relative; display: flex; align-items: center; justify-content: center; justify-self: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 2px; border: 1px solid var(--line-300, var(--line-200)); border-radius: .5rem; background: var(--surface, #fff); color: var(--ink-900); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.dining-map-table span { display: -webkit-box; max-width: 100%; max-height: 2.4em; overflow: hidden; overflow-wrap: anywhere; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dining-map-table.is-round { border-radius: 50%; }
.dining-map-table:hover:not(:disabled), .dining-map-table[aria-pressed="true"] { border-color: var(--brand-600); }
.dining-map-table[aria-pressed="true"] { background: var(--brand-600); color: #fff; }
.dining-map-table:disabled { background: var(--line-100, #ededed); border-style: dashed; color: var(--ink-500, #737373); cursor: not-allowed; }
.dining-map-table:focus-visible, .dining-area-tabs button:focus-visible, .dining-select-button:focus-visible, .dining-map-scroll:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.dining-map-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.dining-map-legend > span { display: inline-flex; align-items: center; gap: .375rem; }
.dining-map-legend i { width: .75rem; height: .75rem; border: 1px dashed var(--line-300, var(--line-200)); border-radius: .2rem; background: var(--line-100, #ededed); }
.dining-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dining-picker-foot p { font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.dining-picker-foot .button { min-height: 44px; flex-shrink: 0; }
.dining-loading { padding: 1rem 0; color: var(--ink-600); }
.dining-x-0 { grid-column: 1; } .dining-x-1 { grid-column: 2; } .dining-x-2 { grid-column: 3; } .dining-x-3 { grid-column: 4; } .dining-x-4 { grid-column: 5; } .dining-x-5 { grid-column: 6; }
.dining-y-0 { grid-row: 1; } .dining-y-1 { grid-row: 2; } .dining-y-2 { grid-row: 3; } .dining-y-3 { grid-row: 4; } .dining-y-4 { grid-row: 5; } .dining-y-5 { grid-row: 6; } .dining-y-6 { grid-row: 7; } .dining-y-7 { grid-row: 8; }
[data-theme="dark"] .dining-map-scroll { background: #1b1b1b; }
[data-theme="dark"] .dining-select-button, [data-theme="dark"] .dining-map-table, [data-theme="dark"] .dialog[data-key="dining-tables"] .dialog-body { background: #242424; color: #f5f5f5; }
[data-theme="dark"] .dining-map-table[aria-pressed="true"] { background: var(--brand-600); }
@media (max-width: 420px) {
  .dialog[data-key="dining-tables"] { width: calc(100% - 16px); margin: auto 8px; max-height: calc(100dvh - 32px); border: 1px solid var(--line-200); border-radius: var(--radius-lg); }
  .dialog[data-key="dining-tables"] .dialog-head { padding-left: .75rem; }
  .dialog[data-key="dining-tables"] .dialog-body { padding: .75rem; }
  .dialog[data-key="dining-tables"] .dialog-foot { margin: 0 -.75rem -.75rem; padding: .75rem; }
  .dining-picker-foot { align-items: stretch; flex-direction: column; gap: .5rem; }
}