/* Shared brand styles served from _content/HickoryHouse.UI/hh.css (all heads link this). */

/* ---- Boot splash (shown while Blazor loads; markup lives in each head's index.html) ---- */

.hh-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    background: radial-gradient(ellipse at 50% 62%, #2E241C 0%, #181310 72%);
    color: #F5EEE3;
    z-index: 9999;
}

.hh-boot-flame {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 0 26px rgba(210, 84, 47, .5));
    animation: hh-sway 2.6s ease-in-out infinite;
}

.hh-boot-flame .flame-outer {
    transform-origin: 34px 68px;
    animation: hh-flicker 1.7s ease-in-out infinite reverse;
}

.hh-boot-flame .flame-inner {
    transform-origin: 34px 68px;
    animation: hh-flicker 1.1s ease-in-out infinite;
}

@keyframes hh-flicker {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(.97, 1.07); }
}

@keyframes hh-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
}

.hh-boot-script {
    font-family: Georgia, serif;
    font-style: italic;
    color: #F5B82E;
    font-size: 1.1rem;
    letter-spacing: .04em;
    margin-bottom: -1.1rem;
}

.hh-boot-title {
    font-family: "Alfa Slab One", Rockwell, Georgia, serif;
    font-size: 2.1rem;
    letter-spacing: .03em;
}

.hh-boot-sub {
    font-family: Inter, "Segoe UI", sans-serif;
    opacity: .65;
}

.hh-boot-sub::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: hh-dots 1.6s steps(4, end) infinite;
}

@keyframes hh-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.brand-title,
.hero-title {
    font-family: "Alfa Slab One", Rockwell, Georgia, serif !important;
}

.hh-logo {
    height: 44px;
    display: block;
}

/* Hero with photographic background */
.hero {
    position: relative;
    color: #F5EEE3;
    background:
        linear-gradient(180deg, rgba(24, 19, 16, .82) 0%, rgba(34, 28, 23, .68) 55%, rgba(24, 19, 16, .88) 100%),
        url("img/hero-ribs.jpg") center 60% / cover no-repeat;
}

.hero .hero-sub {
    color: #E9DCC7;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.hero-title {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.hero-badge {
    display: inline-block;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #F5B82E;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

/* Info strip under the hero (hours / address / phone) */
.info-strip {
    background: #6B4A2F;
    color: #F5EEE3;
}

.info-strip a {
    color: #F5EEE3;
    text-decoration: none;
    font-weight: 600;
}

/* Photo feature cards */
.feature-card {
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.feature-card .feature-img {
    height: 190px;
    background-size: cover;
    background-position: center;
}

/* Page banner (menu / catering) */
.page-banner {
    position: relative;
    color: #F5EEE3;
    background:
        linear-gradient(180deg, rgba(24, 19, 16, .8), rgba(24, 19, 16, .65)),
        var(--banner-img) center / cover no-repeat;
}

/* POS */
.pin-pad {
    max-width: 320px;
    margin: 0 auto;
}

.pin-dots {
    display: flex;
    justify-content: center;
    gap: .7rem;
}

.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-lines-default);
}

.pin-dot.optional {
    opacity: .45;
}

.pin-dot.filled {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    opacity: 1;
}

.pin-key {
    min-height: 64px;
    font-size: 1.4rem !important;
}

.pos-tile {
    min-height: 96px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: transform .06s ease;
}

.pos-tile:active {
    transform: scale(.97);
}

/* The station color is the strip across the top (.kds-strip); a late ticket gets a red border too, so both show. */
.kds-card {
    border: 3px solid transparent;
}

.kds-card.late {
    border-color: var(--mud-palette-error);
    animation: kds-pulse 1.4s ease-in-out infinite;
}

@keyframes kds-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .35); }
    50% { box-shadow: 0 0 0 8px rgba(198, 40, 40, 0); }
}

/* Kiosk */
.kiosk-attract {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(24, 19, 16, .88) 0%, rgba(34, 28, 23, .8) 100%),
        url("img/hero-ribs.jpg") center / cover no-repeat;
}

.kiosk-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .1);
}

/* Phone-only bottom navigation (customer surface) */
.hh-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}

.hh-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 10px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.hh-bottom-nav-item.active {
    color: var(--mud-palette-primary);
}

.hh-bottom-nav-icon {
    position: relative;
    display: inline-flex;
}

.hh-bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
    font-family: Inter, "Segoe UI", sans-serif;
}

.hh-bottom-nav-label {
    font-size: .7rem;
    font-family: Inter, "Segoe UI", sans-serif;
}

@media (min-width: 600px) {
    .hh-bottom-nav {
        display: none;
    }
}

@media (max-width: 599.98px) {
    /* keep page content and footer clear of the fixed bar */
    .hh-footer {
        padding-bottom: 72px;
    }
}

/* Sticky footer: content area fills the viewport so the footer never floats mid-screen. */
.hh-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Kiosk/KDS chromeless mode: no app bar rendered, so drop MudMainContent's app-bar offset. */
.hh-immersive {
    padding-top: 0 !important;
}

/* Invisible kiosk escape hatch: 5 quick taps here, then the manager code. */
.kiosk-exit-hotspot {
    position: fixed;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    z-index: 1500;
}

/* Floor plan view: image backdrop with tables pinned at percentage coordinates. */
.floor-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    user-select: none;
}

.floor-wrap img {
    display: block;
    width: 100%;
    pointer-events: none; /* clicks always land on the wrapper so offsets are consistent */
}

.floor-table {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 58px;
    padding: 6px 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    line-height: 1.1;
}

.floor-table.selected {
    outline: 3px dashed var(--mud-palette-warning);
    outline-offset: 2px;
}

.hh-page {
    flex: 1 0 auto;
}

/* Footer */
.hh-footer {
    background: #181310;
    color: #B5A899;
    margin-top: 48px;
}

.hh-footer .footer-heading {
    color: #F5EEE3;
    font-family: "Alfa Slab One", Rockwell, Georgia, serif;
    letter-spacing: .03em;
}

/* ---- Order pages (/order/{slug}): holiday menus shared on Facebook ---- */

.op-kicker {
    font-family: Inter, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .85rem;
    color: #F5B82E;
}

.op-script-title,
.op-section-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic;
    font-weight: 700 !important;
}

.op-script-title {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
    margin: .2rem 0 .4rem;
}

.op-tagline {
    font-family: Georgia, serif !important;
    font-style: italic;
}

.op-orderby-chip {
    display: inline-block;
    margin-top: 1rem;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 600;
    font-family: Inter, "Segoe UI", sans-serif;
}

.op-heading {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700 !important;
    text-align: center;
}

.op-section-title {
    text-align: center;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 1.5rem;
}

.op-choice-list {
    height: 100%;
    text-align: center;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}

.op-list-title,
.op-offer-name {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700 !important;
}

.op-offer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.op-offer-spacer {
    flex: 1;
}

.op-serves {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.op-price {
    font-weight: 700 !important;
    white-space: nowrap;
}

@media (min-width: 960px) {
    .op-order-panel {
        position: sticky;
        top: 80px;
    }
}

.op-line {
    padding: .5rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.op-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.op-mobile-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 1rem -16px -24px;
    padding: .75rem 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
}

/* ---- Home: "Serving Nashville since 1977" ---- */
.home-story {
    background: var(--mud-palette-background-gray);
}
.home-story-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.home-story-badge {
    width: 96px;
    height: 96px;
    flex: none;
}
.home-story-mission {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
}
.hh-footer .footer-social {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---- Order page editor ---- */
.op-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.op-step-num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: .9rem;
}
.op-live-box {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}
.op-live-box.is-live {
    background: rgba(76, 175, 80, .08);
    border-color: var(--mud-palette-success);
}
.op-banner-thumb {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}
.op-section + .op-section {
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding-top: 20px;
}
.op-item {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}
.op-pick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.op-pick.is-on {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}
.op-pick-count {
    min-width: 2ch;
    text-align: center;
    font-weight: 700;
}
.op-pick-label {
    margin-left: 4px;
    font-size: .875rem;
}
.op-editor {
    padding-bottom: 96px !important;
}
.op-savebar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(720px, calc(100% - 32px));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
/* Info tips wrap instead of running across the page. */
.mud-tooltip {
    max-width: 320px;
    white-space: normal;
    text-align: left;
}

/* Demo (mock) card and bank fields, shown when no live Finix account is set up. Live mode uses Finix's own fields. */
.finix-demo { display: flex; flex-direction: column; gap: 8px; }
.finix-demo-row { display: flex; gap: 8px; }
.finix-demo-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 6px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.finix-demo-input:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; }

/* Kitchen colors (plan 03): a fixed palette that reads on a dark kitchen screen. Stations and ticket badges use these. */
.hh-tone-red { --tone: #c62828; --tone-text: #fff; }
.hh-tone-orange { --tone: #e65100; --tone-text: #fff; }
.hh-tone-amber { --tone: #f9a825; --tone-text: #1b1b1b; }
.hh-tone-green { --tone: #2e7d32; --tone-text: #fff; }
.hh-tone-teal { --tone: #00796b; --tone-text: #fff; }
.hh-tone-blue { --tone: #1565c0; --tone-text: #fff; }
.hh-tone-purple { --tone: #6a1b9a; --tone-text: #fff; }
.hh-tone-gray { --tone: #546e7a; --tone-text: #fff; }
.hh-badge { display: inline-block; background: var(--tone); color: var(--tone-text); font-weight: 800; letter-spacing: .04em;
    padding: 2px 10px; border-radius: 6px; font-size: .95rem; line-height: 1.5; white-space: nowrap; }
.hh-badge.big { font-size: 1.15rem; padding: 3px 12px; }
.hh-pill { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; font-size: .78rem; font-weight: 600; }
.hh-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); margin-right: 6px; vertical-align: middle; }
.kds-card .kds-strip { height: 10px; background: var(--tone); border-radius: 6px 6px 0 0; margin: -16px -16px 12px; }
.hh-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--tone); border: 3px solid transparent; cursor: pointer; padding: 0; }
.hh-swatch.selected { border-color: var(--mud-palette-text-primary); }

/* Offline bar on staff screens (plan 07). */
.hh-offline-bar { background: #b71c1c; color: #fff; font-weight: 700; padding: 8px 16px; display: flex; align-items: center;
    position: sticky; top: 0; z-index: 5; }

/* ---- Holiday prep sheet (plan 12) ---- */
.hh-prep-table { width: 100%; border-collapse: collapse; }
.hh-prep-table th, .hh-prep-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.15); }
.hh-prep-table .hh-prep-qty { text-align: right; white-space: nowrap; font-weight: 700; }
.hh-prep-item { font-weight: 700; }
.hh-prep-choice { padding-left: 28px !important; }
.hh-prep-number { font-size: .8em; opacity: .7; }
.hh-prep-note { font-style: italic; }
.hh-prep-check { text-align: center; white-space: nowrap; }

/* Printing: just the page content, black on white (prep sheets, reports). */
@media print {
    .mud-appbar, .mud-drawer, .hh-bottom-nav, .hh-no-print, .hh-offline-bar, footer, .mud-snackbar-provider { display: none !important; }
    body, .mud-main-content, .mud-layout { background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important; }
    .mud-container { max-width: none !important; padding: 0 !important; }
    .hh-prep-roster tr { break-inside: avoid; }
}

/* ---- Report charts (plan 10). Series colors follow the channel, never its rank; text stays in text colors. ---- */
.hh-viz {
    --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300;
    --seq-0: #cde2fb; --seq-1: #9ec5f4; --seq-2: #6da7ec; --seq-3: #3987e5; --seq-4: #256abf; --seq-5: #184f95; --seq-6: #0d366b;
    --viz-gap: var(--mud-palette-surface);
}
.hh-dark .hh-viz {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300;
    /* Dark: small amounts recede toward the dark surface, big ones come forward. */
    --seq-0: #104281; --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #86b6ef; --seq-6: #cde2fb;
}
.hh-viz .s1 { background: var(--series-1); } .hh-viz .s2 { background: var(--series-2); } .hh-viz .s3 { background: var(--series-3); }
.hh-viz .s4 { background: var(--series-4); } .hh-viz .s5 { background: var(--series-5); } .hh-viz .s6 { background: var(--series-6); }
.hh-viz .q0 { background: var(--seq-0); } .hh-viz .q1 { background: var(--seq-1); } .hh-viz .q2 { background: var(--seq-2); }
.hh-viz .q3 { background: var(--seq-3); } .hh-viz .q4 { background: var(--seq-4); } .hh-viz .q5 { background: var(--seq-5); }
.hh-viz .q6 { background: var(--seq-6); }

/* Vertical bars by hour: thin bars, rounded tops on the baseline, a 2px surface gap between stacked pieces. */
.hh-cols { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default); overflow-x: auto; }
.hh-col { flex: 1 0 22px; max-width: 44px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; cursor: default; }
.hh-col-stack { display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.hh-col-stack > span { display: block; min-height: 2px; }
.hh-col:hover .hh-col-stack { outline: 2px solid var(--mud-palette-text-primary); outline-offset: 1px; }
.hh-col-labels { display: flex; gap: 4px; margin-top: 4px; }
.hh-col-labels > span { flex: 1 0 22px; max-width: 44px; text-align: center; font-size: .72rem; color: var(--mud-palette-text-secondary); }

/* Hover tip on any mark: data-tip text, shown above. */
.hh-tip { position: relative; }
.hh-tip:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--mud-palette-text-primary); color: var(--mud-palette-surface); font-size: .75rem; line-height: 1.35;
    padding: 4px 8px; border-radius: 6px; white-space: pre; z-index: 10; pointer-events: none; }

/* Horizontal bars (sales by group): one series, value written beside each bar. */
.hh-hbar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 4px 10px; }
.hh-hbar-track { height: 14px; }
.hh-hbar-fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.hh-hbar-label, .hh-hbar-value { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-hbar-value { text-align: right; color: var(--mud-palette-text-secondary); }

/* Weekday × hour grid. */
.hh-heat { display: grid; gap: 2px; font-size: .72rem; overflow-x: auto; justify-content: start; }
.hh-heat-cell { min-width: 20px; height: 22px; border-radius: 3px; background: var(--mud-palette-lines-default); }
.hh-heat-head { color: var(--mud-palette-text-secondary); text-align: center; }
.hh-heat-day { color: var(--mud-palette-text-secondary); padding-right: 6px; line-height: 22px; }

.hh-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.hh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ---- Printed daily report sheet (plan 29): one letter page, black on white, plain boxes. ---- */
.hh-sheet { background: #fff; color: #111; max-width: 8.5in; margin: 0 auto; padding: .45in; font-size: 12px; line-height: 1.35;
    box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.hh-sheet-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 10px; }
.hh-sheet-title { font-size: 18px; font-weight: 800; }
.hh-sheet-date { font-size: 14px; font-weight: 600; }
.hh-sheet-printed { font-size: 10px; color: #444; }
.hh-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hh-sheet-box { border: 1px solid #111; border-radius: 4px; padding: 6px 10px 8px; break-inside: avoid; }
.hh-sheet-wide { grid-column: 1 / -1; }
.hh-sheet-box h3 { font-size: 13px; font-weight: 800; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.hh-sheet-box h4 { font-size: 11px; font-weight: 700; margin: 6px 0 2px; }
.hh-sheet-row { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #bbb; padding: 1px 0; }
.hh-sheet-row.bold { font-weight: 800; }
.hh-sheet-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-sheet-none { color: #555; font-style: italic; }
.hh-sheet-blank { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.hh-sheet-line { flex: 1; border-bottom: 1px solid #111; min-height: 14px; }
.hh-sheet table { width: 100%; border-collapse: collapse; }
.hh-sheet th, .hh-sheet td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #bbb; font-variant-numeric: tabular-nums; }
.hh-sheet th { font-size: 11px; }
.hh-sheet-initials { width: 70px; }
.hh-sheet-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
@media (max-width: 700px) { .hh-sheet { padding: 16px; } .hh-sheet-grid { grid-template-columns: 1fr; } }
@media print {
    @page { size: letter portrait; margin: .4in; }
    .hh-sheet { box-shadow: none; padding: 0; max-width: none; font-size: 11px; }
    .hh-sheet-grid { grid-template-columns: 1fr 1fr !important; }
    .hh-page, .mud-main-content { padding-top: 0 !important; }
}

/* Voided items on kitchen tickets (plan 24): struck through so the cooks stop making them. */
.hh-voided { opacity: .6; }
.hh-void-tag { color: var(--mud-palette-error); font-weight: 800; font-size: .85em; letter-spacing: .04em; }

/* Plan 23: shift report flags. */
.hh-pill-warn { color: var(--mud-palette-warning-darken); margin-left: 4px; }
.hh-shift-edited { color: var(--mud-palette-info); }
.hh-sheet-staff { margin-top: 10px; }

/* Plan 31: barcode labels, 30 per letter sheet (2 5/8 x 1 inch, Avery 5160). */
.hh-label-sheet { display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: .125in; background: #fff; color: #000; }
.hh-label { box-sizing: border-box; padding: .06in .15in; display: flex; flex-direction: column; justify-content: center; overflow: hidden; outline: 1px dashed #ccc; }
.hh-label-title { font-size: 9pt; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-label .hh-barcode-svg { width: 100%; height: .5in; display: block; }
.hh-label-code { font-family: monospace; font-size: 8pt; text-align: center; letter-spacing: 1px; }
@media print {
    @page { size: letter portrait; margin: .5in .1875in 0 .1875in; }
    .hh-label { outline: none; break-inside: avoid; }
}

/* Plan 13: the staff catering calendar. */
.hh-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hh-cal-head { font-size: .75rem; font-weight: 600; text-align: center; color: var(--mud-palette-text-secondary); padding: 2px 0; }
.hh-cal-day { min-height: 84px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.hh-cal-empty { border: none; cursor: default; }
.hh-cal-today { border-color: var(--mud-palette-primary); border-width: 2px; }
.hh-cal-full { background: rgba(198, 40, 40, .08); }
.hh-cal-num { font-size: .8rem; font-weight: 600; }
.hh-cal-chip { font-size: .7rem; line-height: 1.2; padding: 1px 4px; border-radius: 4px; background: rgba(230, 126, 34, .18);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-cal-paid { background: rgba(46, 125, 50, .18); }
.hh-cal-full-note { font-size: .7rem; font-weight: 600; color: var(--mud-palette-error); margin-top: auto; }
@media (max-width: 600px) { .hh-cal-day { min-height: 56px; } .hh-cal-chip { font-size: .6rem; } }

/* Walkthroughs (Components/TourButton.razor, js/tour.js): the spotlight's huge shadow dims everything else. */
.hh-tour-shade { position: fixed; inset: 0; z-index: 2000; background: transparent; }
.hh-tour-shade.hh-tour-dim { background: rgba(0, 0, 0, .55); }
.hh-tour-spot {
    position: fixed; z-index: 2001; pointer-events: none; border-radius: 8px;
    box-shadow: 0 0 0 4px var(--mud-palette-primary), 0 0 0 9999px rgba(0, 0, 0, .55);
    transition: left .2s, top .2s, width .2s, height .2s;
}
.hh-tour-card {
    position: fixed; z-index: 2002; box-sizing: border-box; padding: 16px; border-radius: 10px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35); font-family: inherit;
}
.hh-tour-count { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.hh-tour-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.hh-tour-text { font-size: .95rem; line-height: 1.45; white-space: pre-line; }
.hh-tour-buttons { display: flex; gap: 8px; margin-top: 14px; }
.hh-tour-buttons button {
    font: inherit; font-size: .9rem; padding: 8px 14px; border-radius: 6px; cursor: pointer; min-height: 40px;
    border: 1px solid var(--mud-palette-lines-default); background: transparent; color: inherit;
}
.hh-tour-buttons .hh-tour-close { margin-right: auto; border-color: transparent; color: var(--mud-palette-text-secondary); }
.hh-tour-buttons button:disabled { opacity: .4; cursor: default; }
.hh-tour-buttons .hh-tour-next { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* Cash box: bills on the top row, coins below, big enough to tap quickly. */
.hh-cash-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hh-cash-pad .hh-cash-piece { min-width: 0; min-height: 44px; font-size: 1rem; }

/* Table QR cards (plan 26): four to a letter page when printed. */
.hh-qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hh-qr-card {
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; padding: 20px 16px; text-align: center;
    background: #fff; color: #222; break-inside: avoid;
}
.hh-qr-store { font-family: 'Alfa Slab One', serif; font-size: 1.1rem; color: #8B2C12; }
.hh-qr-table { font-size: 2rem; font-weight: 800; margin: 4px 0 8px; }
.hh-qr-code svg { width: 180px; height: 180px; }
.hh-qr-line { font-size: 1rem; font-weight: 700; margin-top: 6px; }
.hh-qr-small { font-size: .85rem; color: #555; }
@media print {
    .hh-qr-sheet { grid-template-columns: 1fr 1fr; gap: .3in; }
    .hh-qr-card { height: 4.6in; display: flex; flex-direction: column; justify-content: center; }
    .hh-qr-code svg { width: 2.4in; height: 2.4in; }
}