:root {
    --ink: #24313f;
    --muted: #6b7785;
    --line: #dbe4ec;
    --panel: #ffffff;
    --bg: #f3f7f9;
    --accent: #0f8b8d;
    --accent-dark: #0b6264;
}

.d-none {
    display: none !important;
}

/* Final POS overrides */
.cashier-shell {
    background: #eef3f5;
}

.cashier-shell .main {
    padding: 18px;
}

.cashier-topbar,
.pos-head,
.pos-section,
.pos-checkout,
.pos-recent {
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.cashier-pos {
    display: grid;
    gap: 14px;
    max-width: 1560px;
    margin-inline: auto;
}

.pos-head {
    align-items: center;
    padding: 14px;
}

.pos-head h2 {
    font-size: 1.35rem;
    line-height: 1.1;
}

.pos-kicker {
    color: #5f6f7a;
    font-size: .74rem;
}

.pos-register-meta span {
    min-height: 24px;
    background: #f4f7f9;
}

.pos-status-strip {
    min-width: min(760px, 100%);
    border-color: #d8e2e7;
    box-shadow: none;
}

.pos-status-strip div {
    min-width: 120px;
    background: #fbfcfd;
}

.pos-status-strip strong {
    color: #1d2b34;
    font-size: .98rem;
}

.pos-section {
    padding: 14px;
}

.pos-recent {
    max-width: 1560px;
    margin-inline: auto;
}

.pos-section-head {
    min-height: 38px;
    border-bottom: 1px solid #edf2f4;
    padding-bottom: 10px;
}

.pos-section-head h2,
.pos-section-head h3 {
    color: #1d2b34;
    font-size: .98rem;
    font-weight: 800;
}

.pos-chair-board {
    order: 0;
}

.pos-chair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.pos-chair-card {
    display: grid;
    gap: 8px;
    min-height: 136px;
    padding: 10px;
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
}

.pos-chair-card.active {
    border-color: #0f8b8d;
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.pos-chair-card.occupied {
    background: #fbfcfd;
}

.pos-chair-card.available {
    background: #f7faf9;
}

.pos-chair-card button {
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d2b34;
    text-align: left;
}

.pos-chair-card button span,
.pos-chair-state {
    color: #5f6f7a;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pos-chair-card button strong {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.pos-chair-card button small {
    color: #5f6f7a;
    line-height: 1.25;
}

.pos-chair-card .btn {
    min-height: 34px;
    font-weight: 800;
}

.pos-chair-context {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d8e2e7;
    border-radius: 6px;
    background: #f4f7f9;
    color: #5f6f7a;
    font-weight: 800;
}

.pos-chair-context strong {
    margin-left: 6px;
    color: #1d2b34;
}

.pos-register-lower,
.payment-register-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}

.pos-field-grid-customer,
.pos-field-grid-new,
.pos-field-grid-session {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pos-field-grid .form-label,
.pos-section .form-label,
.pos-checkout .form-label {
    margin-bottom: 4px;
    color: #5f6f7a;
    font-size: .78rem;
    font-weight: 800;
}

.pos-section .form-control,
.pos-section .form-select,
.pos-checkout .form-control,
.pos-checkout .form-select {
    min-height: 42px;
    border-color: #d4dfe5;
    background-color: #fbfcfd;
}

.service-tile,
.payment-queue-card,
.product-tile {
    border-color: #d8e2e7;
    border-radius: 8px;
    background: #fff;
}

.service-tile {
    min-height: 96px;
}

.service-tile:hover,
.service-tile.active,
.payment-queue-card:hover,
.payment-queue-card.active,
.product-tile:hover,
.product-tile.active {
    border-color: #0f8b8d;
    background: #f2fbfa;
}

.service-tile.active,
.payment-queue-card.active,
.product-tile.active {
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.product-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    padding: 2px;
}

.product-tile {
    display: grid;
    grid-template-rows: 86px auto auto auto;
    gap: 4px;
    min-height: 174px;
    padding: 8px;
    color: #1d2b34;
    text-align: left;
}

.product-tile img {
    width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 6px;
    background: #edf2f4;
}

.product-tile span {
    color: #5f6f7a;
    font-size: .74rem;
    font-weight: 800;
}

.product-tile strong {
    min-height: 38px;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.product-tile small {
    color: #0b6264;
    font-weight: 900;
}

.pos-ticket-card,
.pos-ticket-card div {
    border-color: #d8e2e7;
}

.pos-customer-benefits span {
    border-radius: 6px;
    background: #f4f7f9;
}

.pos-checkout {
    top: 84px;
    padding: 16px;
}

.pos-total-display {
    height: 64px;
    border: 0;
    background: #102830;
    color: #fff;
    font-size: 1.8rem;
    text-align: right;
}

.pos-payment-methods span,
.pos-keypad button,
.pos-quick-cash button {
    border-radius: 6px;
}

.pos-submit {
    width: 100%;
    min-height: 52px;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .pos-status-strip {
        min-width: 0;
    }

    .pos-register-lower,
    .payment-register-grid {
        grid-template-columns: 1fr;
    }

    .pos-checkout {
        position: static;
    }
}

.pos-receive-screen {
    display: grid;
    gap: 14px;
}

.pos-receive-top {
    position: sticky;
    top: 0;
    z-index: 12;
}

.pos-receive-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: start;
}

.pos-receive-chairs,
.pos-receive-detail,
.pos-receive-panel {
    min-width: 0;
}

.pos-receive-select {
    margin-bottom: 10px;
}

.pos-receive-chair-grid {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 260px);
    overflow: auto;
    padding-right: 2px;
}

.pos-receive-chair {
    display: grid;
    gap: 5px;
    min-height: 126px;
    padding: 12px;
    border: 1px solid #d7e3e8;
    border-radius: 8px;
    background: #fbfdfe;
    color: var(--ink);
    text-align: left;
}

.pos-receive-chair:hover,
.pos-receive-chair.active {
    border-color: var(--accent);
    background: #edf8f6;
}

.pos-receive-chair.active {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.pos-receive-chair span,
.pos-receive-chair small {
    color: var(--muted);
}

.pos-receive-chair strong {
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.pos-receive-chair em {
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff3cd;
    color: #6f4f00;
    font-style: normal;
    font-size: .78rem;
    font-weight: 700;
}

.pos-receive-chair b {
    color: var(--accent-dark);
    font-size: 1.2rem;
}

.pos-receive-detail {
    display: grid;
    gap: 12px;
}

.pos-receive-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pos-receive-summary-grid div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfc;
}

.pos-receive-summary-grid span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.pos-receive-summary-grid strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.pos-receive-lines {
    display: grid;
    gap: 8px;
}

.pos-receive-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px;
    border: 1px solid #d7e3e8;
    border-radius: 8px;
    background: #fff;
}

.pos-receive-line strong,
.pos-receive-line span {
    display: block;
}

.pos-receive-line span {
    color: var(--muted);
    font-size: .84rem;
}

.pos-receive-line b {
    color: var(--ink);
    white-space: nowrap;
}

.pos-empty-inline {
    padding: 14px;
    border: 1px dashed #c9d8df;
    border-radius: 8px;
    color: var(--muted);
    background: #fbfdfe;
}

.pos-receive-panel {
    position: sticky;
    top: 86px;
}

@media (max-width: 1180px) {
    .pos-receive-layout {
        grid-template-columns: minmax(260px, 330px) 1fr;
    }

    .pos-receive-panel {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 760px) {

    .pos-receive-layout,
    .pos-receive-summary-grid,
    .pos-receive-line {
        grid-template-columns: 1fr;
    }

    .pos-receive-chair-grid {
        max-height: none;
    }
}

.pos-receive-screen .pos-receive-chairs,
.pos-receive-screen .pos-receive-panel {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pos-receive-screen .pos-receive-panel {
    position: sticky;
    top: 86px;
}

.pos-receive-screen .pos-total-display {
    width: 100%;
}

.admin-pos-screen .pos-center-block {
    overflow: visible;
}

.admin-pos-screen .pos-receive-detail {
    min-width: 0;
}

.admin-pos-screen .pos-receive-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}

.admin-pos-screen .pos-floor-card {
    color: var(--ink);
    text-decoration: none;
}

.admin-selected-chair-card {
    padding: 14px;
}

.admin-selected-chair-card .pos-receive-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-selected-chair-card .pos-receive-summary-grid strong {
    font-size: .98rem;
    line-height: 1.3;
}

.admin-pos-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: end;
}

.admin-pos-field {
    min-width: 0;
}

.admin-pos-field-wide {
    grid-column: span 2;
}

.admin-pos-field-small {
    max-width: 120px;
}

.admin-pos-action {
    align-self: end;
}

.admin-pos-form .form-label {
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
}

.admin-pos-form .form-control,
.admin-pos-form .form-select,
.admin-pos-form .btn:not(.date-picker-trigger) {
    min-width: 0;
    width: 100%;
}

.pos-patient-search {
    position: relative;
}

.pos-patient-results {
    position: fixed;
    z-index: 2075;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.pos-patient-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: 4px;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
}

.pos-patient-result:hover,
.pos-patient-result.is-active {
    background: #eff6ff;
}

.pos-patient-result-phone {
    color: #64748b;
    font-size: 0.78rem;
    white-space: nowrap;
}

.pos-patient-result-empty {
    padding: 8px 10px;
    color: #64748b;
    font-size: 0.82rem;
}

.admin-checkin-card {
    padding: 14px;
}

.admin-checkin-head {
    align-items: flex-start;
    margin-bottom: 12px;
}

.admin-checkin-head span,
.admin-checkin-section-head {
    color: #647580;
    font-size: .78rem;
    font-weight: 800;
}

.admin-checkin-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.admin-checkin-section {
    border: 1px solid #e2eaee;
    border-radius: 8px;
    background: #f8fbfc;
    padding: 12px;
}

.admin-checkin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-checkin-section-head strong {
    color: #172832;
    font-size: .82rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.admin-checkin-section-head .form-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #253640;
    font-weight: 700;
    font-size: .72rem;
    white-space: nowrap;
}

.admin-checkin-section-head .form-check-input {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

.admin-checkin-patient-fields,
.admin-checkin-appointment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 10px;
    align-items: end;
}

.admin-checkin-field-search,
.admin-checkin-service {
    grid-column: span 2;
}

.admin-checkin-therapist {
    grid-column: span 1;
}

.admin-checkin-chair,
.admin-checkin-date,
.admin-checkin-start {
    grid-column: span 1;
}

.admin-checkin-patient-fields .form-control,
.admin-checkin-patient-fields .form-select,
.admin-checkin-patient-fields .date-picker-trigger,
.admin-checkin-appointment-grid .form-control,
.admin-checkin-appointment-grid .form-select {
    min-height: 30px;
    padding: 3px 8px;
    font-size: .8rem;
    line-height: 1.3;
}

.admin-checkin-patient-fields .form-label,
.admin-checkin-appointment-grid .form-label {
    margin-bottom: 2px;
    font-size: .72rem;
}

.admin-checkin-notes textarea {
    min-height: 74px;
    resize: vertical;
}

.admin-checkin-errors {
    display: grid;
    gap: 6px;
}

.admin-checkin-actions {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
    justify-content: end;
}

.admin-checkin-actions .btn {
    min-height: 44px;
    font-weight: 900;
}

@media (max-width: 980px) {

    .admin-pos-field-wide,
    .admin-pos-field-small {
        grid-column: auto;
        max-width: none;
    }

    .admin-checkin-patient-fields,
    .admin-checkin-appointment-grid,
    .admin-checkin-actions {
        grid-template-columns: 1fr;
    }

    .admin-checkin-field-search,
    .admin-checkin-service,
    .admin-checkin-therapist,
    .admin-checkin-patient-fields .admin-pos-field:not(.admin-checkin-field-search) {
        grid-column: auto;
    }
}

@media (max-width: 1180px) {
    .pos-receive-screen .pos-receive-panel {
        position: static;
    }

    .admin-pos-screen .pos-receive-layout {
        grid-template-columns: 1fr;
    }

    .admin-selected-chair-card .pos-receive-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.patient-match {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.patient-match[data-state="selected"] {
    color: #0f766e;
}

.patient-match[data-state="multiple"] {
    color: #8a5a00;
}

.patient-match[data-state="none"] {
    color: #9f1239;
}

.pos-chair-products {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.pos-chair-products.d-none {
    display: none;
}

.pos-chair-product-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pos-chair-product-line strong,
.pos-chair-product-line span {
    display: block;
}

.pos-chair-product-line span {
    color: var(--muted);
    font-size: .82rem;
}

.pos-chair-product-line b {
    white-space: nowrap;
}

.pos-transfer-form,
.pos-receive-inline {
    display: grid;
    gap: 8px;
}

.pos-transfer-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.pos-receive-inline label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.pos-payment-methods-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.pos-payment-methods-compact label span {
    min-height: 34px;
    padding: 7px 6px;
    font-size: .78rem;
}

.pos-split-tenders {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.pos-split-tenders.d-none {
    display: none;
}

.pos-pm-transfer-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d9e5e9;
    border-radius: 6px;
    background: #f7fbfa;
    color: #234047;
    font-size: .82rem;
    font-weight: 800;
}

.pos-pm-transfer-option input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.pos-pm-transfer-option.d-none {
    display: none;
}

@media (max-width: 760px) {
    .pos-chair-product-line {
        grid-template-columns: 1fr;
    }

    .pos-transfer-form,
    .pos-split-tenders,
    .pos-payment-methods-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cashier-shell .main {
        padding: 10px;
    }

    .pos-field-grid-customer,
    .pos-field-grid-new,
    .pos-field-grid-session,
    .pos-ticket-card {
        grid-template-columns: 1fr;
    }

    .product-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pos-receive-screen .pos-receive-chairs,
.pos-receive-screen .pos-receive-panel {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pos-receive-screen .pos-receive-panel {
    position: sticky;
    top: 86px;
}

.pos-receive-screen .pos-total-display {
    width: 100%;
}

@media (max-width: 1180px) {
    .pos-receive-screen .pos-receive-panel {
        position: static;
    }
}

/* Compact POS workbench */
.cashier-pos {
    gap: 10px;
}

.pos-head {
    margin-bottom: 0;
    padding: 10px 12px;
}

.pos-head h2 {
    font-size: 1.18rem;
}

.pos-register-meta {
    margin-top: 5px;
}

.pos-status-strip div {
    padding: 8px 10px;
}

.pos-status-strip span {
    font-size: .72rem;
}

.pos-status-strip strong {
    font-size: .88rem;
}

.pos-workbench {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) minmax(360px, 480px);
    gap: 10px;
    align-items: start;
}

.pos-workbench .pos-section {
    min-height: 100%;
    padding: 10px;
}

.pos-workbench .pos-section-head {
    min-height: 0;
    margin-bottom: 8px;
    padding-bottom: 7px;
}

.pos-workbench .pos-section-head p {
    display: none;
}

.pos-chair-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 7px;
}

.pos-chair-card {
    min-height: 108px;
    gap: 6px;
    padding: 8px;
}

.pos-chair-card button {
    min-height: 58px;
}

.pos-chair-card button strong {
    font-size: .9rem;
    line-height: 1.15;
}

.pos-chair-card button small {
    font-size: .72rem;
}

.pos-chair-card .btn,
.pos-chair-state {
    min-height: 30px;
}

.pos-product-sale .row {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .55rem;
}

.pos-chair-context {
    width: 100%;
    min-height: 30px;
}

.product-tile-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 7px;
    max-height: 236px;
}

.product-tile {
    grid-template-rows: 54px auto auto auto;
    min-height: 128px;
    padding: 7px;
}

.product-tile img {
    height: 54px;
}

.product-tile span {
    font-size: .68rem;
}

.product-tile strong {
    min-height: 0;
    font-size: .82rem;
}

.product-tile small {
    font-size: .76rem;
}

.pos-customer-benefits {
    gap: 6px;
}

.pos-customer-benefits span {
    padding: 6px 8px;
    font-size: .78rem;
}

.pos-appointment-form {
    margin-top: 0;
}

.pos-appointment-panel,
.pos-recent {
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.pos-appointment-summary,
.pos-recent-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    cursor: pointer;
    list-style: none;
}

.pos-appointment-summary::-webkit-details-marker,
.pos-recent-summary::-webkit-details-marker {
    display: none;
}

.pos-appointment-summary span:first-child,
.pos-recent-summary span:first-child {
    display: grid;
    gap: 2px;
}

.pos-appointment-summary strong,
.pos-recent-summary strong {
    color: #1d2b34;
    font-size: .95rem;
}

.pos-appointment-summary small,
.pos-recent-summary small {
    color: #5f6f7a;
    font-size: .76rem;
}

.pos-summary-action {
    min-width: 68px;
    padding: 6px 10px;
    border: 1px solid #0f8b8d;
    border-radius: 6px;
    color: #0b6264;
    font-size: .78rem;
    font-weight: 900;
    text-align: center;
}

.pos-appointment-panel[open] .pos-summary-action::before,
.pos-recent[open] .pos-summary-action::before {
    content: "Close";
}

.pos-appointment-panel[open] .pos-summary-action,
.pos-recent[open] .pos-summary-action {
    font-size: 0;
}

.pos-appointment-panel[open] .pos-summary-action::before,
.pos-recent[open] .pos-summary-action::before {
    font-size: .78rem;
}

.pos-appointment-panel>.pos-section,
.pos-appointment-panel>.pos-register-lower {
    margin: 0 10px 10px;
}

.pos-appointment-panel>.pos-section {
    box-shadow: none;
}

.pos-recent {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
}

.pos-recent-body {
    padding: 0 12px 12px;
}

.pos-recent-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.pos-recent .table {
    margin-bottom: 0;
}

@media (max-width: 1180px) {
    .pos-workbench {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1320px) {
    .pos-console-top {
        grid-template-columns: minmax(180px, 1fr) auto minmax(0, 2fr);
    }
}

/* Single-page cashier POS console */
.cashier-shell .main:has(.pos-console) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 8px;
}

.cashier-shell .main:has(.pos-console)>.cashier-topbar {
    display: none;
}

.pos-console {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 46px;
    gap: 8px;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-width: none;
    margin: 0;
}

.pos-console-alert {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 62px;
    transform: translateX(-50%);
    max-width: 720px;
    margin: 0;
}

.pos-console-top,
.pos-console-bottom,
.pos-floor-panel,
.pos-session-panel,
.pos-side-panel,
.pos-center-block,
.pos-side-form,
.pos-receipts-list {
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(36, 49, 63, .05);
}

.pos-console-top,
.pos-console-bottom {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(360px, 1.4fr);
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}

.pos-console-top {
    min-height: 54px;
}

.pos-station-title,
.pos-shift-stats,
.pos-console-bottom>div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pos-shift-stats {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pos-station-title span,
.pos-shift-stats span {
    padding: 4px 7px;
    border: 1px solid #e2eaee;
    border-radius: 6px;
    background: #f7fafb;
    color: #52616f;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.pos-clock {
    display: grid;
    justify-items: center;
    line-height: 1.1;
}

.pos-clock strong {
    color: #102830;
    font-size: 1.08rem;
}

.pos-clock span {
    color: #5f6f7a;
    font-size: .72rem;
}

.pos-console-main {
    display: grid;
    grid-template-columns: 260px minmax(420px, 1fr) 320px;
    gap: 8px;
    min-height: 0;
}

.pos-floor-panel,
.pos-session-panel,
.pos-side-panel {
    min-height: 0;
    overflow: hidden;
}

.pos-floor-panel,
.pos-session-panel,
.pos-side-panel {
    display: grid;
    gap: 8px;
    padding: 8px;
}

.pos-floor-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.pos-session-panel {
    overflow-y: auto;
}

.pos-side-panel {
    grid-template-rows: minmax(0, 1fr);
}

.pos-panel-title,
.pos-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pos-panel-title h3,
.pos-table-head h3,
.pos-center-block h3 {
    margin: 0;
    color: #1d2b34;
    font-size: .9rem;
    font-weight: 900;
}

.pos-panel-title span {
    color: #5f6f7a;
    font-size: .72rem;
    font-weight: 800;
}

.pos-floor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 7px;
    overflow-y: auto;
    padding-right: 2px;
}

.pos-floor-card {
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fbfcfd;
}

.pos-floor-card.is-vip {
    border-color: #b7924a;
    background: #fffaf0;
}

.pos-floor-card.is-active {
    border-color: #0f8b8d;
}

.pos-floor-card.active {
    border-color: #0f8b8d;
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.pos-floor-card.is-due {
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.pos-floor-card>button {
    display: grid;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}

.pos-chair-number {
    color: #52616f;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pos-floor-card strong {
    font-size: .84rem;
}

.pos-floor-card small {
    min-height: 14px;
    overflow: hidden;
    color: #5f6f7a;
    font-size: .68rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-chair-actions .btn,
.pos-chair-actions form,
.pos-chair-actions a {
    width: 100%;
}

.pos-floor-stats,
.pos-receipt-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.pos-floor-stats span,
.pos-receipt-footer span {
    padding: 6px;
    border-radius: 6px;
    background: #f4f7f9;
    color: #5f6f7a;
    font-size: .68rem;
    font-weight: 800;
}

.pos-empty-state {
    display: grid;
    place-content: center;
    gap: 8px;
    min-height: 100%;
    text-align: center;
    color: #5f6f7a;
}

.pos-empty-state strong {
    color: #1d2b34;
    font-size: 1.25rem;
}

.pos-session-work {
    display: grid;
    gap: 8px;
}

.pos-session-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #cfe1dd;
    border-radius: 8px;
    background: #f2fbf8;
}

.pos-session-header h2 {
    margin: 2px 0;
    font-size: 1.25rem;
}

.pos-state-badge {
    display: inline-flex;
    justify-content: center;
    min-width: 92px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #102830;
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
}

.js-session-timer {
    display: block;
    margin-top: 8px;
    text-align: right;
}

.pos-center-block {
    padding: 10px;
}

.pos-mini-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: .82rem;
}

.pos-mini-table th,
.pos-mini-table td {
    padding: 7px;
    border-bottom: 1px solid #e8eef2;
}

.pos-product-inline {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 70px 110px 118px;
    gap: 7px;
    margin: 8px 0;
}

.pos-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    max-height: 185px;
    overflow-y: auto;
}

.pos-shortcut-grid .product-tile {
    grid-template-rows: 44px auto auto;
    min-height: 112px;
}

.pos-shortcut-grid .product-tile img {
    height: 44px;
}

.pos-held-products,
.pos-payment-summary>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #edf2f4;
}

.pos-product-hint {
    display: block;
    margin-top: 4px;
    color: #6b7785;
    font-size: .74rem;
    font-weight: 800;
}

.pos-summary-total strong {
    color: #0b6264;
    font-size: 1.35rem;
}

.pos-session-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 8px;
}

.pos-session-actions .disabled {
    pointer-events: none;
    opacity: .55;
}

.pos-side-form,
.pos-receipts-list {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    gap: 7px;
    min-height: 0;
    padding: 9px;
    overflow-y: auto;
}

.pos-side-form.is-focused {
    border-color: #0f8b8d;
    box-shadow: 0 0 0 3px rgba(15, 139, 141, .16), 0 8px 22px rgba(36, 49, 63, .05);
}

.pos-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.pos-side-form .form-control,
.pos-side-form .form-select,
.pos-product-inline .form-control,
.pos-product-inline .form-select {
    min-height: 36px;
    font-size: .82rem;
}

.pos-payment-methods.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.pos-payment-methods.compact span {
    min-height: 32px;
    padding: 6px 8px;
    font-size: .72rem;
}

.pos-receipt-scroll {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.pos-receipt-row-card {
    display: grid;
    gap: 2px;
    padding: 7px;
    border: 1px solid #e2eaee;
    border-radius: 6px;
    color: #1d2b34;
    text-decoration: none;
}

.pos-receipt-row-card span,
.pos-receipt-row-card small {
    color: #5f6f7a;
    font-size: .72rem;
}

.pos-receipt-row-card b {
    color: #0b6264;
}

.pos-receipt-footer {
    grid-template-columns: repeat(2, 1fr);
    margin-top: auto;
}

.pos-console-bottom {
    grid-template-columns: minmax(330px, 1fr) auto minmax(300px, 1fr);
}

.pos-console-bottom strong {
    color: #1d2b34;
    font-size: .86rem;
}

@media (max-width: 1220px) {
    .pos-console {
        height: auto;
        min-height: calc(100vh - 16px);
        min-height: calc(100dvh - 16px);
        overflow: visible;
    }

    .cashier-shell .main:has(.pos-console) {
        height: auto;
        overflow: auto;
    }

    .pos-console-main,
    .pos-console-top,
    .pos-console-bottom {
        grid-template-columns: 1fr;
    }

    .pos-side-panel {
        grid-template-rows: auto auto;
    }
}

/* Held chair money and compact ticket totals */
.pos-chair-hold {
    color: #0b6264 !important;
    font-weight: 900;
}

.pos-chair-hold-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    padding: 8px 10px;
    border: 1px solid #cfe1dd;
    border-radius: 6px;
    background: #f2fbf8;
}

.pos-chair-hold-box span {
    color: #5f6f7a;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.pos-chair-hold-box strong {
    color: #0b6264;
    font-size: 1rem;
}

.pos-chair-hold-box small {
    grid-column: 1 / -1;
    color: #5f6f7a;
    font-size: .72rem;
}

.pos-ticket-card {
    gap: 8px;
}

.pos-ticket-card div {
    padding: 8px 10px;
}

.pos-ticket-card strong {
    font-size: .92rem;
}

.pos-checkout {
    padding: 12px;
}

.pos-receipt-preview {
    padding: 10px;
}

.pos-checkout-head {
    gap: 8px;
    margin-bottom: 10px;
}

.pos-total-display {
    height: 46px;
    font-size: 1.18rem;
}

.pos-tender-lines {
    gap: 6px;
    margin: 8px 0;
}

.pos-tender-lines div {
    min-height: 32px;
    padding: 6px 8px;
}

.pos-cash-box {
    margin-top: 10px;
    padding: 10px;
}

.pos-keypad {
    display: none;
}

@media (max-width: 760px) {
    .pos-workbench {
        gap: 8px;
    }

    .pos-chair-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-tile-grid {
        max-height: 210px;
    }
}

/* Smaller chair product panel */
.pos-workbench {
    grid-template-columns: minmax(520px, 1fr) minmax(300px, 360px);
}

.pos-product-sale .pos-section-head {
    margin-bottom: 6px;
    padding-bottom: 6px;
}

.pos-product-sale .pos-section-head h3 {
    font-size: .9rem;
}

.pos-product-sale .row {
    --bs-gutter-x: .45rem;
    --bs-gutter-y: .45rem;
}

.pos-product-sale .form-label {
    font-size: .72rem;
}

.pos-product-sale .form-control,
.pos-product-sale .form-select {
    min-height: 36px;
    font-size: .86rem;
}

.pos-product-sale .btn-primary {
    min-height: 38px;
    font-weight: 900;
}

.pos-product-sale .pos-chair-context {
    min-height: 28px;
    padding: 4px 8px;
    font-size: .78rem;
}

.pos-product-sale .pos-customer-benefits {
    display: none;
}

.pos-product-shortcuts {
    border: 1px solid #d8e2e7;
    border-radius: 6px;
    background: #fbfcfd;
}

.pos-product-shortcuts summary {
    padding: 7px 9px;
    color: #0b6264;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 900;
    list-style: none;
}

.pos-product-shortcuts summary::-webkit-details-marker {
    display: none;
}

.pos-product-shortcuts summary::after {
    content: "+";
    float: right;
    color: #5f6f7a;
}

.pos-product-shortcuts[open] summary::after {
    content: "-";
}

.pos-product-shortcuts .product-tile-grid {
    display: flex;
    gap: 6px;
    max-height: 118px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 7px 7px;
}

.pos-product-shortcuts .product-tile {
    grid-template-rows: 34px auto auto;
    flex: 0 0 104px;
    min-height: 96px;
    padding: 6px;
}

.pos-product-shortcuts .product-tile img {
    height: 34px;
}

.pos-product-shortcuts .product-tile span {
    display: none;
}

.pos-product-shortcuts .product-tile strong {
    min-height: 30px;
    font-size: .74rem;
}

.pos-product-shortcuts .product-tile small {
    font-size: .72rem;
}

@media (max-width: 1180px) {
    .pos-workbench {
        grid-template-columns: 1fr;
    }
}

/* POS professional refresh */
.cashier-shell {
    background: #eef3f5;
}

.cashier-shell .main {
    padding: 18px;
}

.cashier-topbar {
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.cashier-pos {
    display: grid;
    gap: 14px;
    max-width: 1560px;
    margin-inline: auto;
}

.pos-head {
    align-items: center;
    padding: 14px;
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.pos-kicker {
    color: #5f6f7a;
    font-size: .74rem;
}

.pos-head h2 {
    font-size: 1.35rem;
    line-height: 1.1;
}

.pos-register-meta span {
    min-height: 24px;
    background: #f4f7f9;
}

.pos-status-strip {
    min-width: min(760px, 100%);
    border-color: #d8e2e7;
    box-shadow: none;
}

.pos-status-strip div {
    min-width: 120px;
    background: #fbfcfd;
}

.pos-status-strip strong {
    color: #1d2b34;
    font-size: .98rem;
}

.pos-section,
.pos-checkout,
.pos-recent {
    border-color: #d8e2e7;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.pos-section {
    padding: 14px;
}

.pos-product-sale {
    order: 1;
}

.pos-grid-stacked {
    order: 2;
}

.pos-recent {
    max-width: 1560px;
    margin-inline: auto;
}

.pos-section-head {
    min-height: 38px;
    border-bottom: 1px solid #edf2f4;
    padding-bottom: 10px;
}

.pos-section-head h3,
.pos-section-head h2 {
    color: #1d2b34;
    font-size: .98rem;
    font-weight: 800;
}

.pos-section-head p {
    font-size: .86rem;
}

.pos-register-lower,
.payment-register-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}

.pos-field-grid-customer,
.pos-field-grid-new,
.pos-field-grid-session {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pos-field-grid .form-label,
.pos-section .form-label,
.pos-checkout .form-label {
    margin-bottom: 4px;
    color: #5f6f7a;
    font-size: .78rem;
    font-weight: 800;
}

.pos-section .form-control,
.pos-section .form-select,
.pos-checkout .form-control,
.pos-checkout .form-select {
    min-height: 42px;
    border-color: #d4dfe5;
    background-color: #fbfcfd;
}

.service-tile-grid,
.product-tile-grid,
.payment-queue-grid {
    scrollbar-width: thin;
}

.service-tile {
    min-height: 96px;
    border-color: #d8e2e7;
    background: #fff;
}

.service-tile:hover,
.service-tile.active,
.payment-queue-card:hover,
.payment-queue-card.active,
.product-tile:hover,
.product-tile.active {
    border-color: #0f8b8d;
    background: #f2fbfa;
}

.service-tile.active,
.payment-queue-card.active,
.product-tile.active {
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.product-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    padding: 2px;
}

.product-tile {
    display: grid;
    grid-template-rows: 86px auto auto auto;
    gap: 4px;
    min-height: 174px;
    padding: 8px;
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    color: #1d2b34;
    text-align: left;
}

.product-tile img {
    width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 6px;
    background: #edf2f4;
}

.product-tile span {
    color: #5f6f7a;
    font-size: .74rem;
    font-weight: 800;
}

.product-tile strong {
    min-height: 38px;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.product-tile small {
    color: #0b6264;
    font-weight: 900;
}

.pos-ticket-card {
    border-color: #d8e2e7;
    background: #fff;
}

.pos-ticket-card div {
    padding: 10px;
    border-color: #d8e2e7;
}

.pos-customer-benefits span {
    border-radius: 6px;
    background: #f4f7f9;
}

.pos-checkout {
    top: 84px;
    padding: 16px;
}

.pos-receipt-preview {
    background: #fff;
}

.pos-checkout-head {
    margin-bottom: 12px;
}

.pos-total-display {
    height: 64px;
    border: 0;
    background: #102830;
    color: #fff;
    font-size: 1.8rem;
    text-align: right;
}

.pos-payment-methods span {
    min-height: 44px;
    border-radius: 6px;
}

.pos-keypad button,
.pos-quick-cash button {
    border-radius: 6px;
}

.pos-submit {
    width: 100%;
    min-height: 52px;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .pos-head {
        align-items: stretch;
    }

    .pos-status-strip {
        min-width: 0;
    }

    .pos-register-lower,
    .payment-register-grid {
        grid-template-columns: 1fr;
    }

    .pos-checkout {
        position: static;
    }
}

@media (max-width: 760px) {
    .cashier-shell .main {
        padding: 10px;
    }

    .pos-field-grid-customer,
    .pos-field-grid-new,
    .pos-field-grid-session,
    .pos-ticket-card {
        grid-template-columns: 1fr;
    }

    .pos-ticket-card div {
        border-right: 0;
        border-bottom: 1px solid #d8e2e7;
    }

    .pos-ticket-card div:last-child {
        border-bottom: 0;
    }

    .product-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.product-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
}

.menu-card-visual {
    overflow: hidden;
}

.menu-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.menu-card-img~.menu-card-info,
.menu-card-img~.menu-card-price,
.menu-card-img~.menu-card-name {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.menu-card-visual:has(.menu-card-img)::before,
.menu-card-visual:has(.menu-card-img)::after,
.menu-card-visual:has(.menu-card-img) .menu-card-name::before {
    content: none;
    display: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.cashier-shell {
    display: block;
}

.mobile-topbar,
.sidebar-backdrop {
    display: none;
}

body.nav-open {
    overflow: hidden;
}

.sidebar {
    width: 250px;
    background: #16333d;
    color: #fff;
    padding: 20px 14px;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.sidebar .brand {
    flex: 0 0 auto;
}

.sidebar nav {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.sidebar nav::-webkit-scrollbar {
    width: 8px;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
    border-radius: 999px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    margin-bottom: 26px;
}

.brand-logo {
    display: block;
    border-radius: 20px;
}

.brand-logo-mark {
    width: 38px;
    height: 38px;
}

.brand-logo-full {
    width: min(230px, 100%);
    max-height: 84px;
}

.brand-mark {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 8px;
}

.sidebar nav a,
.sidebar-group summary {
    display: block;
    color: #dce9ed;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.sidebar-group {
    margin-bottom: 4px;
}

.sidebar-group summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.sidebar-group summary::-webkit-details-marker {
    display: none;
}

.sidebar-group summary::after {
    content: "+";
    float: right;
    font-weight: 800;
}

.sidebar-group[open] summary::after {
    content: "-";
}

.sidebar nav a.active,
.sidebar nav a:hover,
.sidebar-group summary.active,
.sidebar-group summary:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.sidebar-subnav {
    margin: 0 0 8px 10px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.sidebar-subnav a {
    font-size: .92rem;
}

.main {
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: 24px;
}

.cashier-shell .main {
    width: 100%;
    margin-left: 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.topbar h1 {
    font-size: 1.55rem;
    margin: 0;
}

.topbar p {
    margin: 3px 0 0;
    color: var(--muted);
}

.topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cashier-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: -24px -24px 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(243, 247, 249, .96);
    backdrop-filter: blur(8px);
}

.cashier-topbar h1 {
    font-size: 1.35rem;
}

.cashier-topbar .topbar-actions .btn {
    min-height: 34px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 16px;
}

.stat-card span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.stat-card strong {
    display: block;
    font-size: 1.45rem;
    margin-top: 4px;
}

.finance-tree {
    display: grid;
    gap: 6px;
}

.finance-tree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 12px;
    background: #fff;
}

.finance-tree-row:hover,
.finance-tree-row.active {
    border-color: var(--accent);
    background: rgba(40, 93, 25, .06);
}

.finance-tree-row strong {
    white-space: nowrap;
}

.billing-window-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.billing-window-grid-single {
    grid-template-columns: 1fr;
}

.billing-subwindow {
    min-width: 0;
}

.billing-subwindow.is-active-window {
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}

.billing-window-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.billing-window-dropzone {
    margin-top: 12px;
    min-height: 40px;
    border: 1px dashed transparent;
    border-radius: 8px;
    padding: 2px;
    transition: border-color .15s ease, background-color .15s ease;
}

.billing-window-dropzone.js-window-dropzone-over {
    border-color: var(--brand, #2563eb);
    background: rgba(37, 99, 235, .06);
}

.billing-window-tx-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: .82rem;
    background: var(--surface, #fff);
}

.billing-window-tx-row.js-window-tx-row {
    cursor: grab;
}

.billing-window-tx-row.js-window-tx-row:active {
    cursor: grabbing;
}

.billing-window-tx-row.js-window-tx-dragging {
    opacity: .4;
}

.billing-window-tx-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-window-tx-amount {
    white-space: nowrap;
    font-weight: 600;
}

.billing-transaction-row-payment {
    background: #f0fdf4;
}

.billing-window-totals span {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--muted);
    background: #f8fafb;
}

.billing-row-payment {
    --bs-table-bg: #eef8f0;
}

.billing-row-refund,
.billing-row-reversal {
    --bs-table-bg: #fff3f3;
}

.billing-row-adjustment,
.billing-row-discount {
    --bs-table-bg: #fff8e6;
}

.billing-complimentary-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #cffafe;
    color: #155e75;
    font-size: 0.72rem;
    font-weight: 700;
}

.billing-transaction-detail {
    border-top: 1px solid var(--line);
    padding: 10px 0;
}

.billing-transaction-detail summary {
    cursor: pointer;
    font-weight: 700;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #e5f3f2, #f8fbfc);
}

.login-card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0 12px 35px rgba(31, 50, 64, .12);
}

.login-brand {
    color: #16333d;
    justify-content: center;
    margin-bottom: 18px;
}

.login-brand .brand-logo-full {
    width: min(260px, 100%);
    max-height: 130px;
}

.login-actions {
    display: grid;
    gap: 10px;
}

.badge-soft {
    background: #e8f5f4;
    color: var(--accent-dark);
}

.table th {
    color: #52616f;
    font-weight: 600;
}

.table {
    min-width: 640px;
}

.table-responsive .table {
    min-width: 720px;
}

.table th,
.table td {
    vertical-align: middle;
}

.form-control,
.form-select,
.btn {
    min-height: 40px;
}

.time-input,
input[type="time"] {
    min-width: 118px;
}

.date-display-control {
    position: relative;
}

.date-display-control .date-picker-trigger {
    width: auto;
    min-width: 44px;
    flex: 0 0 auto;
}

.date-display-control .date-native-picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.date-display-control.is-invalid+.invalid-feedback {
    display: block;
}

.patient-therapist-history {
    margin-top: 4px;
}

.is-invalid {
    border-color: #dc3545;
}

.btn-sm {
    min-height: 32px;
}

.d-inline .btn-sm,
td .btn-sm {
    margin-block: 2px;
}

.audit-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.audit-stat-card {
    display: grid;
    gap: 4px;
    min-height: 106px;
    padding: 16px;
    border: 1px solid #d6e1e6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .05);
}

.audit-stat-card span,
.audit-stat-card small {
    color: #667481;
    font-size: .82rem;
    font-weight: 700;
}

.audit-stat-card strong {
    color: #1f2d36;
    font-size: 1.55rem;
    line-height: 1.1;
}

.audit-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.audit-section-head h2 {
    margin: 0;
    color: #1f2d36;
    font-size: 1.08rem;
    font-weight: 800;
}

.audit-section-head p {
    margin: 4px 0 0;
    color: #667481;
    font-size: .88rem;
}

.audit-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
    align-items: end;
}

.audit-filter-search {
    grid-column: span 2;
}

.audit-log-panel {
    padding-bottom: 10px;
}

.audit-table {
    min-width: 980px;
}

.audit-table thead th {
    border-bottom: 1px solid #dbe4ec;
    background: #f7fafb;
    color: #52616f;
    font-size: .78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.audit-table tbody tr:hover {
    background: #f8fbfb;
}

.audit-table td {
    border-bottom: 1px solid #edf2f4;
}

.audit-table td strong,
.audit-table td span {
    display: block;
}

.audit-table td span {
    color: #6b7785;
    font-size: .8rem;
}

.audit-summary {
    min-width: 320px;
    color: #253441;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.audit-pill {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem !important;
    font-weight: 800;
    line-height: 1;
    text-transform: capitalize;
}

.audit-station-pill {
    border-color: #d7e3ea;
    background: #f4f8fa;
    color: #314451 !important;
}

.audit-badge-success {
    border-color: #b8dfcc;
    background: #edf8f2;
    color: #1f6b45 !important;
}

.audit-badge-warning {
    border-color: #ead79f;
    background: #fff8df;
    color: #775c13 !important;
}

.audit-badge-danger {
    border-color: #efb9b9;
    background: #fff0f0;
    color: #9f2f2f !important;
}

.audit-badge-neutral {
    border-color: #cad6df;
    background: #f2f5f7;
    color: #435462 !important;
}

.print-header {
    display: none;
}

.receipt {
    max-width: 720px;
    margin-inline: auto;
}

.receipt table th {
    width: 190px;
}

.schedule-board-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.schedule-board {
    --slot-height: 30px;
    display: grid;
    grid-template-columns: 72px repeat(var(--chair-count), minmax(170px, 1fr));
    grid-template-rows: 40px repeat(var(--slot-count), var(--slot-height));
    min-width: calc(72px + (var(--chair-count) * 170px));
    position: relative;
}

.schedule-corner,
.schedule-chair-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 8px 10px;
    background: #f8fbfc;
    border-bottom: 1px solid var(--line);
    color: #52616f;
    font-weight: 700;
    font-size: .88rem;
}

.schedule-corner {
    left: 0;
    z-index: 5;
    border-right: 1px solid var(--line);
}

.schedule-chair-head {
    justify-content: center;
    border-right: 1px solid var(--line);
}

.schedule-lane {
    grid-row: 2 / span var(--slot-count);
    border-right: 1px solid var(--line);
    background:
        repeating-linear-gradient(to bottom,
            #fff 0,
            #fff calc(var(--slot-height) - 1px),
            #edf2f5 calc(var(--slot-height) - 1px),
            #edf2f5 var(--slot-height));
}

.schedule-time {
    position: sticky;
    left: 0;
    z-index: 3;
    grid-column: 1;
    padding: 4px 8px;
    background: #f8fbfc;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
}

.schedule-appointment {
    z-index: 2;
    min-width: 0;
    margin: 3px;
    padding: 7px 8px;
    overflow: auto;
    border: 1px solid #b8dadd;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: #eaf8f7;
    box-shadow: 0 4px 12px rgba(23, 49, 57, .08);
    font-size: .82rem;
    line-height: 1.25;
}

.schedule-appointment strong,
.schedule-appointment span {
    display: block;
    overflow-wrap: anywhere;
}

.schedule-appointment-time {
    color: var(--accent-dark);
    font-weight: 700;
}

.schedule-status {
    margin-top: 3px;
    color: #52616f;
    font-weight: 700;
}

.schedule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.schedule-actions .btn {
    min-height: 28px;
    padding: 2px 7px;
    font-size: .75rem;
}

.schedule-status-checked_in {
    background: #fff7e6;
    border-color: #e2c16d;
    border-left-color: #b7791f;
}

.schedule-status-completed {
    background: #eef9ef;
    border-color: #a9d8af;
    border-left-color: #2f8f46;
}

.schedule-status-paid {
    background: #f1f4f6;
    border-color: #ccd5dd;
    border-left-color: #6b7785;
}

.schedule-status-cancelled,
.schedule-status-no_show {
    background: #fbefef;
    border-color: #e5b6b6;
    border-left-color: #b94a48;
    opacity: .78;
}

.schedule-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 12px;
}

.schedule-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}

.schedule-view-tabs {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fbfc;
}

.schedule-view-tabs a {
    min-width: 64px;
    padding: 9px 12px;
    color: #52616f;
    text-align: center;
    font-weight: 700;
    border-right: 1px solid var(--line);
}

.schedule-view-tabs a:last-child {
    border-right: 0;
}

.schedule-view-tabs a.active,
.schedule-view-tabs a:hover {
    background: var(--accent);
    color: #fff;
}

.schedule-count {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .92rem;
}

.employee-schedule-strip {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfe;
}

.employee-schedule-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #52616f;
    font-size: .88rem;
}

.employee-schedule-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.employee-schedule-item {
    min-width: 0;
    padding: 8px;
    border: 1px solid #d9e5ea;
    border-left: 4px solid #456e56;
    border-radius: 6px;
    background: #fff;
}

.employee-schedule-item strong,
.employee-schedule-item span,
.employee-schedule-item small {
    display: block;
    overflow-wrap: anywhere;
}

.employee-schedule-item span {
    color: var(--ink);
    font-size: .84rem;
    font-weight: 700;
}

.employee-schedule-item small {
    color: var(--muted);
}

.emp-shift-block {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-radius: 5px;
    border-left: 4px solid #2f8f6a;
    background: linear-gradient(160deg, #e6f9f1 0%, #ccf0e2 100%);
    color: #1a5c3e;
    font-size: .75rem;
    line-height: 1.3;
    overflow: hidden;
}

.emp-shift-rest {
    border-left-color: #c08a1e !important;
    background: linear-gradient(160deg, #fdf5e6 0%, #f6e3bb 100%) !important;
    color: #7a5910 !important;
}

.emp-shift-day-off {
    border-left-color: #6b7280 !important;
    background: linear-gradient(160deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    color: #374151 !important;
}

.emp-shift-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: .76rem;
}

.emp-shift-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.emp-shift-time {
    display: block;
    font-size: .69rem;
    opacity: .8;
    margin-top: 3px;
    padding-left: 12px;
}

.emp-shift-break-hint {
    display: block;
    font-size: .67rem;
    margin-top: 2px;
    padding-left: 12px;
    color: #c08a1e;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Day-view direct-slot cells (no rowspan) */
.emp-day-slot {
    vertical-align: top;
    padding: 2px 6px;
}

.emp-day-slot-work {
    background: #e6f9f1;
    border-left: 3px solid #2f8f6a !important;
}

.emp-day-slot-rest {
    background: #fdf5e6;
    border-left: 3px solid #c08a1e !important;
}

.emp-day-slot-off {
    background: #f3f4f6;
    border-left: 3px solid #6b7280 !important;
}

.emp-day-c0.emp-day-slot-work {
    background: #e6f9f1;
    border-left-color: #2f8f6a !important;
}

.emp-day-c1.emp-day-slot-work {
    background: #e6f0ff;
    border-left-color: #3d7ed1 !important;
}

.emp-day-c2.emp-day-slot-work {
    background: #fce6f2;
    border-left-color: #b83070 !important;
}

.emp-day-c3.emp-day-slot-work {
    background: #fef6e6;
    border-left-color: #d17820 !important;
}

.emp-day-c4.emp-day-slot-work {
    background: #f1e6ff;
    border-left-color: #7040c8 !important;
}

.emp-day-c5.emp-day-slot-work {
    background: #fde6e6;
    border-left-color: #c03838 !important;
}

.emp-day-c6.emp-day-slot-work {
    background: #e6f7fd;
    border-left-color: #1898b8 !important;
}

.emp-day-c7.emp-day-slot-work {
    background: #eef8e6;
    border-left-color: #5c9e18 !important;
}

.emp-day-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-day-time {
    display: block;
    font-size: .65rem;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-day-break-hint {
    display: block;
    font-size: .63rem;
    color: #c08a1e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-shift-notes {
    display: block;
    font-size: .67rem;
    opacity: .65;
    margin-top: 3px;
    padding-left: 12px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Per-employee colour palette (8 colours, assigned round-robin) */
.emp-shift-c0 {
    border-left-color: #2f8f6a;
    background: linear-gradient(160deg, #e6f9f1, #c8f0e0);
    color: #1a5c3e;
}

.emp-shift-c1 {
    border-left-color: #3d7ed1;
    background: linear-gradient(160deg, #e6f0ff, #c8ddf7);
    color: #1e3f6e;
}

.emp-shift-c2 {
    border-left-color: #b83070;
    background: linear-gradient(160deg, #fce6f2, #f5c8e4);
    color: #6e1a45;
}

.emp-shift-c3 {
    border-left-color: #d17820;
    background: linear-gradient(160deg, #fef6e6, #f7e3c0);
    color: #6e3e10;
}

.emp-shift-c4 {
    border-left-color: #7040c8;
    background: linear-gradient(160deg, #f1e6ff, #e2c8f7);
    color: #3e1a6e;
}

.emp-shift-c5 {
    border-left-color: #c03838;
    background: linear-gradient(160deg, #fde6e6, #f7c8c8);
    color: #6e1a1a;
}

.emp-shift-c6 {
    border-left-color: #1898b8;
    background: linear-gradient(160deg, #e6f7fd, #c8eef7);
    color: #0e5868;
}

.emp-shift-c7 {
    border-left-color: #5c9e18;
    background: linear-gradient(160deg, #eef8e6, #d8f0c0);
    color: #3a6010;
}

/* Name tags in week view – same palette */
.emp-shift-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emp-shift-name-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    border-left: 3px solid #2f8f6a;
    background: #e6f9f1;
    color: #1a5c3e;
    font-size: .72rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-shift-name-tag.is-rest {
    border-left-color: #c08a1e !important;
    background: #fdf5e6 !important;
    color: #7a5910 !important;
}

.emp-shift-name-tag.is-day-off {
    border-left-color: #6b7280 !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.emp-shift-name-tag.emp-shift-c0 {
    border-left-color: #2f8f6a;
    background: #e6f9f1;
    color: #1a5c3e;
}

.emp-shift-name-tag.emp-shift-c1 {
    border-left-color: #3d7ed1;
    background: #e6f0ff;
    color: #1e3f6e;
}

.emp-shift-name-tag.emp-shift-c2 {
    border-left-color: #b83070;
    background: #fce6f2;
    color: #6e1a45;
}

.emp-shift-name-tag.emp-shift-c3 {
    border-left-color: #d17820;
    background: #fef6e6;
    color: #6e3e10;
}

.emp-shift-name-tag.emp-shift-c4 {
    border-left-color: #7040c8;
    background: #f1e6ff;
    color: #3e1a6e;
}

.emp-shift-name-tag.emp-shift-c5 {
    border-left-color: #c03838;
    background: #fde6e6;
    color: #6e1a1a;
}

.emp-shift-name-tag.emp-shift-c6 {
    border-left-color: #1898b8;
    background: #e6f7fd;
    color: #0e5868;
}

.emp-shift-name-tag.emp-shift-c7 {
    border-left-color: #5c9e18;
    background: #eef8e6;
    color: #3a6010;
}

.time-grid-day-single {
    min-width: 420px;
}

/* Break row UI in shift form */
.break-row {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 6px 10px;
    border: 1px solid #e3e8ee;
}

.break-row .form-control {
    max-width: 130px;
}

#breaks-list,
#template-breaks-list {
    margin-bottom: 6px;
}

.schedule-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.schedule-table {
    margin-bottom: 0;
    min-width: 1040px;
}

.schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbfc;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.schedule-table tbody tr:hover {
    background: #f8fbfc;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #edf2f5;
    color: #52616f;
    font-size: .78rem;
    font-weight: 700;
    text-transform: capitalize;
}

.status-reserved {
    background: #eaf8f7;
    color: #0b6264;
}

.status-checked_in {
    background: #fff3d8;
    color: #8a5a00;
}

.status-completed {
    background: #e6f5e8;
    color: #26743a;
}

.status-paid {
    background: #edf2f5;
    color: #52616f;
}

.status-cancelled,
.status-no_show {
    background: #f9e5e5;
    color: #9b2f2f;
}

.schedule-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 250px;
}

.schedule-row-actions form {
    margin: 0;
}

.schedule-row-actions .btn {
    min-height: 30px;
    padding: 3px 8px;
}

.pagination-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.pagination-ellipsis {
    color: var(--muted);
    font-weight: 800;
    padding: 0 4px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
    min-width: 360px;
}

.permission-form {
    margin: 0;
}

.permission-form .form-check {
    min-height: 28px;
    margin: 0;
}

td form.d-inline-flex {
    flex-wrap: wrap;
    max-width: 100%;
    vertical-align: middle;
}

td form.d-inline-flex .form-control,
td form.d-inline-flex .form-select {
    min-height: 32px;
}

code.text-break,
.text-break {
    overflow-wrap: anywhere;
}

.time-grid-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    max-height: 72vh;
}

.time-grid {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 980px;
}

.time-grid-day {
    min-width: 1660px;
}

.time-grid-week {
    min-width: 1180px;
}

.time-grid th,
.time-grid td {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid #edf2f5;
    vertical-align: top;
}

.time-grid thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 42px;
    padding: 9px 10px;
    background: #f8fbfc;
    color: #52616f;
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.time-grid thead th:first-child,
.time-grid-time {
    position: sticky;
    left: 0;
    z-index: 5;
    width: 74px;
    background: #f8fbfc;
}

.time-grid-time {
    padding: 8px 10px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.time-grid td {
    height: 46px;
    min-width: 0;
    padding: 4px;
    background:
        linear-gradient(to bottom, rgba(237, 242, 245, .55), rgba(237, 242, 245, .55)) top / 100% 1px no-repeat,
        #fff;
}

.time-grid tr:hover td,
.time-grid tr:hover .time-grid-time {
    background-color: #fbfdfe;
}

.time-card {
    min-width: 0;
    margin-bottom: 4px;
    padding: 7px;
    border: 1px solid #b8dadd;
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: #eaf8f7;
    box-shadow: 0 3px 10px rgba(23, 49, 57, .08);
    font-size: .78rem;
    line-height: 1.25;
}

.time-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.time-card-head .status-pill {
    min-width: auto;
    padding: 2px 6px;
    font-size: .68rem;
}

.time-card-patient {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.time-card-meta {
    color: #52616f;
    overflow-wrap: anywhere;
}

.time-card .schedule-row-actions {
    min-width: 0;
    gap: 4px;
    margin-top: 6px;
}

.time-card .schedule-row-actions .btn {
    min-height: 26px;
    padding: 2px 6px;
    font-size: .7rem;
}

.time-card-paid {
    background: #f1f4f6;
    border-color: #ccd5dd;
    border-left-color: #6b7785;
}

.time-card-checked_in {
    background: #fff7e6;
    border-color: #e2c16d;
    border-left-color: #b7791f;
}

.time-card-completed {
    background: #eef9ef;
    border-color: #a9d8af;
    border-left-color: #2f8f46;
}

.time-card-cancelled,
.time-card-no_show {
    background: #fbefef;
    border-color: #e5b6b6;
    border-left-color: #b94a48;
    opacity: .82;
}

.js-schedule-slot {
    min-height: 58px;
    transition: background .12s ease, box-shadow .12s ease;
}

.js-schedule-slot:empty {
    cursor: cell;
}

.js-schedule-slot:empty:hover {
    background: #f1faf8;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .24);
}

.js-schedule-slot.is-drop-target {
    background: #e0f5f2;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.js-schedule-slot.is-past-slot {
    background: repeating-linear-gradient(135deg, #f5f5f4, #f5f5f4 8px, #ebebe8 8px, #ebebe8 16px);
}

.js-schedule-slot.is-past-slot:empty {
    cursor: not-allowed;
}

.js-schedule-slot.is-past-slot:empty:hover {
    background: repeating-linear-gradient(135deg, #f5f5f4, #f5f5f4 8px, #ebebe8 8px, #ebebe8 16px);
    box-shadow: none;
}

.js-schedule-card[draggable="true"] {
    cursor: grab;
}

.js-schedule-card.is-dragging {
    opacity: .55;
    cursor: grabbing;
}

.js-employee-schedule-slot {
    min-height: 42px;
    transition: background .12s ease, box-shadow .12s ease;
}

.js-employee-schedule-slot:empty {
    cursor: cell;
}

.js-employee-schedule-slot:empty:hover {
    background: #f5fafc;
    box-shadow: inset 0 0 0 1px rgba(47, 105, 130, .22);
}

.time-grid-wrap {
    border-radius: 8px;
    border: 1px solid var(--line);
    overflow: auto;
    background: #fff;
}

.time-grid {
    margin: 0;
}

.emp-shift-block {
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(23, 49, 57, .08);
}

.schedule-appointment-modal {
    position: fixed;
    inset: 0;
    z-index: 2040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.schedule-appointment-dialog {
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 18px;
}

.schedule-appointment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.schedule-appointment-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.schedule-appointment-open-btn {
    min-height: 32px;
    padding-inline: 10px;
    white-space: nowrap;
}

.schedule-employees-open-btn {
    min-height: 32px;
    padding-inline: 10px;
    white-space: nowrap;
}

.schedule-employees-dialog {
    width: min(860px, 100%);
}

.schedule-employees-dialog .employee-schedule-strip {
    margin-bottom: 0;
}

.guest-create-open-btn {
    min-height: 32px;
    padding-inline: 10px;
    white-space: nowrap;
}

.guest-modal {
    position: fixed;
    inset: 0;
    z-index: 2045;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.guest-dialog {
    position: relative;
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 18px;
}

.guest-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1.4rem;
    line-height: 1;
}

.guest-modal-close:hover {
    background: #e2e8f0;
}

.reports-modal {
    position: fixed;
    inset: 0;
    z-index: 2060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.reports-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 20px;
}

.reports-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1.4rem;
    line-height: 1;
}

.reports-modal-close:hover {
    background: #e2e8f0;
}

.reports-search {
    margin-bottom: 14px;
}

.reports-modal-body {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    min-height: 320px;
}

.reports-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid #e2e8f0;
    padding-right: 12px;
}

.reports-category-chip {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: .88rem;
}

.reports-category-chip:hover {
    background: #f1f5f9;
}

.reports-category-chip.active {
    background: #0d6efd;
    color: #fff;
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-content: start;
}

.reports-list-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
}

.reports-list-item:hover {
    border-color: #0d6efd;
    background: #f0f7ff;
}

.reports-list-item strong {
    display: block;
    font-size: .92rem;
}

.reports-list-item span {
    display: block;
    font-size: .78rem;
    color: #64748b;
    margin-top: 2px;
}

.reports-list-empty {
    color: #64748b;
    font-size: .88rem;
    padding: 8px 0;
}

.reports-options-dialog {
    width: min(560px, 100%);
}

.reports-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.reports-options-note {
    background: #fff7e6;
    border: 1px solid #ffe1a8;
    border-radius: 6px;
    padding: 8px 10px;
}

.reports-options-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.reports-format-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.report-section table th.js-report-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.report-section table th.js-report-sortable:after {
    content: '\2195';
    margin-left: 5px;
    color: #94a3b8;
    font-size: .8em;
}

.report-section table th.js-report-sortable.sort-asc:after {
    content: '\2191';
    color: #0d6efd;
}

.report-section table th.js-report-sortable.sort-desc:after {
    content: '\2193';
    color: #0d6efd;
}

.report-section.js-report-highlight {
    animation: reportHighlightPulse 1.6s ease-out;
}

@keyframes reportHighlightPulse {
    0% { box-shadow: 0 0 0 3px rgba(13, 110, 253, .55); }
    100% { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
}

.history-options-popover {
    position: fixed;
    z-index: 2070;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
    padding: 6px;
}

.history-options-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: #0f172a;
    text-decoration: none;
    font-size: .88rem;
}

.history-options-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.billing-actions-panel {
    padding-block: 12px;
}

.billing-page-modal {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.billing-page-dialog {
    width: min(1080px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 18px;
}

.billing-page-table-dialog {
    width: min(1440px, 100%);
}

.multi-session-tabbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2060;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #0f172a;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .35);
}

.multi-session-tab {
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    padding: 6px 12px;
    font-size: .84rem;
    white-space: nowrap;
}

.multi-session-tab:hover {
    background: rgba(255, 255, 255, .16);
}

.multi-session-tab.active {
    background: #0d6efd;
    color: #fff;
}

.multi-session-tabbar-close {
    margin-left: auto;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    padding: 6px 12px;
    font-size: .84rem;
}

.multi-session-tabbar-close:hover {
    background: rgba(220, 53, 69, .7);
}

.billing-page-dialog .table {
    margin-bottom: 0;
}

.employee-schedule-actions-panel {
    padding-block: 12px;
}

.employee-working-hours-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.employee-working-hours-toolbar > div:first-child {
    flex: 0 1 220px;
    min-width: 180px;
}

.employee-working-hours-toolbar h2 {
    font-size: 1.05rem;
}

.employee-working-hours-nav {
    gap: 6px !important;
}

.employee-working-hours-nav .btn,
.employee-working-hours-toolbar .schedule-filter .btn {
    min-height: 34px;
    padding: 5px 12px;
    font-size: .9rem;
}

.employee-working-hours-toolbar .schedule-filter {
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: 8px;
}

.employee-date-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #52616f;
    font-size: .82rem;
    font-weight: 700;
}

.employee-working-hours-toolbar .schedule-filter .form-control,
.employee-working-hours-toolbar .schedule-filter .form-select {
    min-height: 34px;
    padding: 5px 10px;
    font-size: .9rem;
}

.employee-working-hours-toolbar .schedule-filter .form-control[type="date"] {
    width: 126px;
    flex: 0 0 126px;
}

.employee-working-hours-toolbar .schedule-filter .form-select {
    width: 170px;
    flex: 1 1 160px;
    max-width: 190px;
}

.employee-working-hours-toolbar .schedule-view-tabs {
    flex: 0 0 auto;
    overflow: visible;
}

.employee-working-hours-toolbar .schedule-view-tabs a {
    min-width: 58px;
    padding: 7px 10px;
    font-size: .9rem;
}

.employee-schedule-action-dialog {
    width: min(980px, 100%);
}

.employee-shift-templates-dialog {
    width: min(1060px, 100%);
}

.cashier-command {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.cashier-action {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 4px 12px;
    min-height: 116px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

.cashier-action:hover {
    border-color: #a9c8cb;
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(36, 49, 63, .08);
}

.cashier-action span {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #eef4f6;
    color: #52616f;
    font-weight: 700;
}

.cashier-action strong {
    align-self: end;
    font-size: 1rem;
}

.cashier-action small {
    color: var(--muted);
    line-height: 1.35;
}

.cashier-action.primary {
    background: #0f8b8d;
    border-color: #0f8b8d;
    color: #fff;
}

.cashier-action.primary span {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.cashier-action.primary small {
    color: rgba(255, 255, 255, .84);
}

.cashier-action.muted {
    background: #f8fbfc;
}

.cashier-pos {
    margin-bottom: 18px;
}

.pos-head {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 14px;
}

.pos-kicker {
    margin: 0 0 4px;
    color: var(--accent-dark);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pos-head h2 {
    margin: 0;
    font-size: 1.55rem;
}

.pos-register-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.pos-register-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #fff;
    color: #52616f;
    font-size: .82rem;
    font-weight: 700;
}

.pos-status-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.pos-status-strip div {
    padding: 11px 14px;
    border-right: 1px solid var(--line);
}

.pos-status-strip div:last-child {
    border-right: 0;
}

.pos-status-strip span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
}

.pos-status-strip strong {
    display: block;
    margin-top: 2px;
    font-size: 1.05rem;
    white-space: nowrap;
}

.pos-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

.pos-grid-stacked {
    grid-template-columns: 1fr;
}

.pos-register-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

.payment-register-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

.pos-main {
    display: grid;
    gap: 14px;
}

.pos-main-register {
    grid-template-columns: minmax(300px, .9fr) minmax(460px, 1.1fr);
}

.pos-section,
.pos-checkout {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}

.pos-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pos-section-head h2,
.pos-section-head h3 {
    margin: 0;
    font-size: 1rem;
}

.pos-field-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.pos-field-grid-customer {
    grid-template-columns: minmax(230px, 1.1fr) minmax(160px, .9fr) minmax(150px, .8fr);
}

.pos-field-grid-new {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .8fr) minmax(180px, 1fr);
}

.pos-field-grid-session {
    grid-template-columns: minmax(180px, 1.3fr) minmax(110px, .7fr) minmax(150px, .9fr) minmax(120px, .7fr) minmax(140px, .8fr);
}

.pos-main-register .pos-field-grid-session {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pos-section-subhead {
    margin: 4px 0 10px;
    color: #52616f;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pos-service-select {
    width: min(360px, 100%);
}

.pos-service-search {
    width: min(220px, 100%);
}

.pos-service-strip {
    overflow: hidden;
}

.service-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 560px;
    overflow: auto;
    padding-right: 2px;
}

.service-tile-strip {
    display: flex;
    gap: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
}

.service-tile-strip .service-tile {
    flex: 0 0 176px;
    scroll-snap-align: start;
}

.service-tile-strip .service-tile[hidden] {
    display: none;
}

.service-tile {
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 13px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #f8fbfc;
    color: var(--ink);
    text-align: left;
}

.service-tile:hover,
.service-tile.active {
    border-color: var(--accent);
    background: #eaf8f7;
}

.service-tile.active {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.service-tile span {
    min-height: 38px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.service-tile strong {
    color: var(--accent-dark);
    font-size: 1.25rem;
}

.service-tile small {
    color: var(--muted);
    font-weight: 700;
}

.pos-queue-strip {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 14px;
    padding: 14px;
}

.pos-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pos-queue-head a {
    color: var(--accent-dark);
    font-weight: 700;
}

.pos-queue-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.pos-queue-card,
.pos-queue-empty {
    display: grid;
    gap: 3px;
    min-height: 86px;
    padding: 12px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #f8fbfc;
    color: var(--ink);
}

.pos-queue-card:hover {
    border-color: var(--accent);
    background: #eaf8f7;
    color: var(--ink);
}

.pos-queue-card span,
.pos-queue-card small,
.pos-queue-empty {
    color: var(--muted);
    font-size: .84rem;
}

.pos-queue-card strong {
    overflow-wrap: anywhere;
}

.payment-queue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    max-height: 620px;
    overflow: auto;
    padding-right: 2px;
}

.payment-queue-card {
    display: grid;
    gap: 5px;
    min-height: 134px;
    padding: 13px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #f8fbfc;
    color: var(--ink);
    text-align: left;
}

.payment-queue-card:hover,
.payment-queue-card.active {
    border-color: var(--accent);
    background: #eaf8f7;
}

.payment-queue-card.active {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.payment-queue-card span,
.payment-queue-card small {
    color: var(--muted);
}

.payment-queue-card strong {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.payment-queue-card b {
    color: var(--accent-dark);
    font-size: 1.25rem;
}

.pos-ticket-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #f8fbfc;
}

.pos-ticket-card div {
    min-width: 0;
    padding: 12px;
    border-right: 1px solid #d6e2e8;
}

.pos-ticket-card div:last-child {
    border-right: 0;
    background: #102830;
    color: #fff;
}

.pos-ticket-card span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
}

.pos-ticket-card div:last-child span {
    color: rgba(255, 255, 255, .72);
}

.pos-ticket-card strong {
    display: block;
    margin-top: 3px;
    overflow-wrap: anywhere;
    font-size: .98rem;
}

.pos-customer-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.pos-customer-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #f8fbfc;
    color: #52616f;
    font-size: .82rem;
    font-weight: 700;
}

.pos-customer-benefits strong {
    margin-left: 4px;
    color: #102830;
}

.pos-checkout {
    position: sticky;
    top: 20px;
}

.pos-receipt-preview {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #fbfdfe;
    font-size: .9rem;
}

.pos-receipt-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px dashed #c9d8df;
}

.pos-receipt-top span {
    color: var(--muted);
}

.pos-receipt-row,
.pos-receipt-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding-block: 5px;
}

.pos-receipt-row span {
    color: var(--muted);
}

.pos-receipt-row strong,
.pos-receipt-item strong {
    text-align: right;
}

.pos-receipt-item {
    margin-top: 7px;
    padding-top: 10px;
    border-top: 1px dashed #c9d8df;
}

.pos-receipt-item small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.pos-checkout-head {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.pos-checkout-head span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-weight: 700;
}

.pos-total-display {
    height: 58px;
    color: #102830;
    background: #f8fbfc;
    border-color: #c9d8df;
    font-size: 1.75rem;
    font-weight: 700;
}

.pos-tender-lines {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.pos-tender-lines div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #52616f;
    font-size: .9rem;
}

.pos-tender-lines strong {
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.pos-payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.pos-payment-methods label {
    margin: 0;
}

.pos-payment-methods input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pos-payment-methods span {
    display: grid;
    place-items: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfc;
    color: #52616f;
    font-weight: 700;
    cursor: pointer;
}

.pos-payment-methods input:checked+span {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.pos-cash-box {
    margin-bottom: 16px;
}

.pos-quick-cash {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 9px;
}

.pos-quick-cash button,
.pos-keypad button {
    min-height: 38px;
    border: 1px solid #d6e2e8;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
}

.pos-quick-cash button:hover,
.pos-keypad button:hover {
    border-color: var(--accent);
    background: #eaf8f7;
}

.pos-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 9px;
}

.pos-keypad button {
    min-height: 46px;
    font-size: 1.05rem;
}

.pos-change-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef4f6;
}

.pos-change-due span {
    color: #52616f;
    font-weight: 700;
}

.pos-change-due strong {
    color: #102830;
    font-size: 1.25rem;
}

.pos-submit {
    width: 100%;
    min-height: 52px;
    font-weight: 700;
}

.pos-checkout-links {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.pos-checkout-links a {
    color: var(--accent-dark);
    font-weight: 700;
}

.pos-recent .table {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .app-shell {
        display: block;
    }

    .mobile-topbar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1030;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        background: #16333d;
        color: #fff;
        padding: 10px 14px;
        box-shadow: 0 8px 22px rgba(22, 51, 61, .18);
    }

    .mobile-topbar .brand {
        margin-bottom: 0;
        min-width: 0;
    }

    .mobile-topbar .brand span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-topbar .brand-logo-mark {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(18, 31, 39, .45);
    }

    body.nav-open .sidebar-backdrop {
        display: block;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1040;
        width: min(82vw, 310px);
        min-height: 100vh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar .brand {
        margin-bottom: 18px;
    }

    .sidebar nav a {
        padding: 12px;
        margin-bottom: 6px;
    }

    .main {
        margin-left: 0;
        width: 100%;
        padding: 14px;
    }

    .cashier-topbar {
        margin: -14px -14px 14px;
        padding: 12px 14px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 14px;
    }

    .topbar h1 {
        font-size: 1.35rem;
    }

    .topbar-actions {
        width: 100%;
    }

    .topbar-actions .btn {
        flex: 1 1 130px;
    }

    .panel {
        padding: 14px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .billing-window-grid {
        grid-template-columns: 1fr;
    }

    .audit-stats,
    .audit-filter-grid {
        grid-template-columns: 1fr;
    }

    .audit-filter-search {
        grid-column: auto;
    }

    .audit-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .row.g-3>[class*="col-"] {
        width: 100%;
    }

    form .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    form .d-flex.gap-2>* {
        flex: 1 1 150px;
    }

    .table-search {
        min-width: 220px;
    }

    .permission-grid {
        grid-template-columns: 1fr;
        min-width: 260px;
    }

    td form.d-inline-flex {
        display: flex !important;
        margin-top: 6px;
    }

    td form.d-inline-flex .form-control,
    td form.d-inline-flex .form-select,
    td form.d-inline-flex .btn {
        width: 100% !important;
        flex: 1 1 140px;
    }

    .schedule-board {
        --slot-height: 34px;
        grid-template-columns: 64px repeat(var(--chair-count), minmax(150px, 1fr));
        min-width: calc(64px + (var(--chair-count) * 150px));
    }

    .schedule-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .schedule-filter,
    .schedule-view-tabs {
        width: 100%;
    }

    .schedule-filter .form-control,
    .schedule-filter .btn,
    .schedule-view-tabs a {
        flex: 1;
    }

    .time-grid-wrap {
        max-height: 70vh;
    }

    .time-grid-day {
        min-width: 1480px;
    }

    .time-grid-week {
        min-width: 980px;
    }

    .cashier-command {
        grid-template-columns: 1fr;
    }

    .pos-head,
    .pos-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .pos-status-strip {
        grid-template-columns: 1fr;
    }

    .pos-status-strip div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .pos-status-strip div:last-child {
        border-bottom: 0;
    }

    .pos-grid,
    .payment-register-grid,
    .pos-register-lower,
    .pos-main-register,
    .pos-field-grid-customer,
    .pos-field-grid-new,
    .pos-field-grid-session {
        grid-template-columns: 1fr;
    }

    .pos-ticket-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-ticket-card div:nth-child(2) {
        border-right: 0;
    }

    .pos-ticket-card div:nth-child(-n+2) {
        border-bottom: 1px solid #d6e2e8;
    }

    .pos-checkout {
        position: static;
    }

    .pos-service-select,
    .pos-service-search {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .main {
        padding: 10px;
    }

    .login-card {
        padding: 20px;
    }

    .panel {
        padding: 12px;
    }

    .d-flex.flex-wrap.gap-2 .btn,
    .panel>.d-flex.gap-2 .btn {
        flex: 1 1 100%;
    }

    .receipt table th {
        width: 130px;
    }

    .table {
        font-size: .92rem;
    }

    .schedule-appointment {
        font-size: .78rem;
    }

    .pos-ticket-card,
    .pos-payment-methods {
        grid-template-columns: 1fr;
    }

    .pos-ticket-card div {
        border-right: 0;
        border-bottom: 1px solid #d6e2e8;
    }

    .pos-ticket-card div:last-child {
        border-bottom: 0;
    }
}

.payments-section {
    padding: 0;
    overflow: hidden;
}

.payments-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}

.payments-section-summary::-webkit-details-marker {
    display: none;
}

.payments-section-summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d7dde8;
    border-radius: 8px;
    color: #334155;
    font-weight: 700;
}

.payments-section[open]>.payments-section-summary::after {
    content: "-";
}

.payments-section-summary span {
    font-size: 1rem;
    font-weight: 700;
    color: #172033;
}

.payments-section-summary small {
    margin-left: auto;
    color: #64748b;
    font-size: .85rem;
}

.payments-section > :not(summary) {
    margin-left: 22px;
    margin-right: 22px;
}

.payments-section > :last-child {
    margin-bottom: 22px;
}

@media print {

    .sidebar,
    .mobile-topbar,
    .sidebar-backdrop,
    .topbar,
    .no-print,
    .btn,
    form,
    .table-search {
        display: none !important;
    }

    .main {
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .panel {
        border: 0;
        padding: 0;
    }

    .table {
        min-width: 0;
    }

    .print-header {
        display: block;
        margin-bottom: 14px;
    }

    .receipt {
        max-width: 100%;
    }
}

.menu-page {
    background: #f5f8f7;
    color: #172b31;
}

.menu-hero {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: #16333d;
}

.menu-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-hero-overlay {
    position: relative;
    z-index: 1;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px clamp(18px, 4vw, 56px) 72px;
    color: #fff;
    background: linear-gradient(90deg, rgba(12, 39, 45, .88), rgba(12, 39, 45, .52) 52%, rgba(12, 39, 45, .08));
}

.menu-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
}

.menu-brand:hover {
    color: #fff;
}

.menu-nav-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.menu-hero-copy {
    max-width: 660px;
}

.menu-kicker {
    margin: 0 0 8px;
    color: #6cc5bd;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: .82rem;
}

.menu-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1;
    letter-spacing: 0;
}

.menu-hero-copy p:last-child {
    margin: 16px 0 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .88);
    font-size: 1.1rem;
}

.menu-main {
    width: min(1160px, calc(100% - 32px));
    margin: -42px auto 0;
    position: relative;
    z-index: 2;
}

.menu-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
    box-shadow: 0 16px 38px rgba(27, 53, 60, .12);
}

.menu-summary div {
    background: #fff;
    padding: 20px;
}

.menu-summary span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.menu-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 1.6rem;
}

.menu-section {
    padding: 44px 0 28px;
}

.menu-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 22px;
}

.menu-section-head h2 {
    margin: 0;
    font-size: 1.75rem;
}

.menu-section-head>p {
    max-width: 420px;
    margin: 0;
    color: var(--muted);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.menu-card {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 16px;
    align-items: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    min-height: 144px;
}

.menu-card-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f5f4;
    color: var(--accent-dark);
    font-weight: 700;
}

.menu-card-body h3 {
    margin: 0;
    font-size: 1.1rem;
}

.menu-card-body p {
    margin: 8px 0 0;
    color: var(--muted);
}

.menu-card-meta {
    text-align: right;
    min-width: 96px;
}

.menu-card-meta span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
}

.menu-card-meta strong {
    display: block;
    margin-top: 6px;
    color: #0c6f70;
    font-size: 1.45rem;
}

.menu-empty {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

.menu-footer {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 34px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

@media (max-width: 760px) {

    .menu-hero,
    .menu-hero-overlay {
        min-height: 420px;
    }

    .menu-hero-overlay {
        padding: 16px 16px 58px;
        background: linear-gradient(180deg, rgba(12, 39, 45, .9), rgba(12, 39, 45, .56));
    }

    .menu-nav {
        align-items: flex-start;
    }

    .menu-nav-actions {
        width: 100%;
    }

    .menu-nav-actions .btn {
        flex: 1 1 140px;
    }

    .menu-main,
    .menu-footer {
        width: min(100% - 20px, 1160px);
    }

    .menu-summary,
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .menu-summary div {
        padding: 16px;
    }

    .menu-section {
        padding-top: 32px;
    }

    .menu-section-head {
        display: block;
    }

    .menu-section-head>p {
        margin-top: 10px;
    }

    .menu-card {
        grid-template-columns: 44px 1fr;
    }

    .menu-card-meta {
        grid-column: 2;
        text-align: left;
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 14px;
    }

    .menu-footer {
        display: block;
    }

    .menu-footer span {
        display: block;
        margin-bottom: 6px;
    }
}

/* Professional public menu polish */
.menu-page {
    background: #e9edf0;
    color: #162027;
}

.menu-shell {
    width: min(100%, 1120px);
    background: #fbfcfb;
}

.menu-hero {
    min-height: clamp(470px, 58vh, 600px);
    background: #1d312d;
}

.menu-hero-overlay {
    min-height: clamp(470px, 58vh, 600px);
    padding: 22px clamp(18px, 4vw, 48px) 82px;
    background:
        linear-gradient(180deg, rgba(10, 18, 16, .48), rgba(10, 18, 16, .16) 42%, rgba(10, 18, 16, .72)),
        linear-gradient(90deg, rgba(10, 26, 22, .72), rgba(10, 26, 22, .16) 62%, rgba(10, 26, 22, .24));
}

.menu-page .brand-mark {
    background: #315c24;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.menu-brand {
    font-size: .98rem;
}

.menu-brand .brand-logo-full {
    width: min(220px, 42vw);
    max-height: 78px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .28));
}

.menu-nav-actions .btn {
    border-radius: 8px;
    font-weight: 800;
}

.menu-hero-copy {
    max-width: 760px;
}

.menu-hero-copy h1 {
    font-size: clamp(2.45rem, 6vw, 5.25rem);
    line-height: .98;
}

.menu-hero-copy p:last-child {
    max-width: 620px;
    font-size: clamp(1rem, 2.2vw, 1.18rem);
}

.menu-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.menu-hero-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.menu-main {
    background: #fbfcfb;
}

.menu-summary {
    width: min(960px, calc(100% - 36px));
    margin-top: -40px;
    border-color: #d8e0d8;
    background: #d8e0d8;
}

.menu-summary div {
    padding: 18px 20px;
    border-right-color: #d8e0d8;
}

.menu-summary span {
    color: #66716a;
}

.menu-summary strong {
    color: #1a271c;
}

.menu-category-bar {
    gap: 10px;
    padding: 22px clamp(18px, 4vw, 48px);
    border-bottom: 0;
    background: rgba(251, 252, 251, .97);
}

.menu-category-bar a {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 9px;
    min-width: auto;
    min-height: 44px;
    padding: 9px 13px 9px 15px;
    border: 1px solid #cad8c6;
    color: #243126;
    background: #fff;
    box-shadow: 0 4px 12px rgba(36, 49, 39, .05);
}

.menu-category-bar a small {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #eef3ed;
    color: #55704f;
    font-size: .72rem;
    font-weight: 900;
}

.menu-category-bar a.active,
.menu-category-bar a:hover,
.menu-category-bar a:focus {
    border-color: #315c24;
    background: #315c24;
    color: #fff;
}

.menu-category-bar a.active small,
.menu-category-bar a:hover small,
.menu-category-bar a:focus small {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.menu-section {
    scroll-margin-top: 104px;
    padding: 48px clamp(18px, 4vw, 48px) 4px;
}

.menu-section-head {
    width: min(960px, 100%);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dde5dd;
}

.menu-kicker {
    color: #315c24;
    font-size: .74rem;
}

.menu-section-head h2 {
    font-size: clamp(1.65rem, 3.4vw, 2.25rem);
    letter-spacing: 0;
}

.menu-section-head>p {
    color: #647069;
    font-size: .95rem;
}

.menu-grid {
    width: min(960px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.menu-card {
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: stretch;
    min-height: 154px;
    border-color: #dfe7df;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 42, 33, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.menu-card:hover {
    transform: translateY(-2px);
    border-color: #bacdb5;
    box-shadow: 0 14px 32px rgba(30, 42, 33, .1);
}

.menu-card-visual {
    min-height: 154px;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, .42);
}

.menu-card-visual::before {
    bottom: 25px;
    width: 46px;
    height: 92px;
    border-width: 3px;
    border-top-width: 7px;
    border-radius: 8px 8px 20px 20px;
}

.menu-card-visual::after {
    bottom: 115px;
    width: 66px;
    height: 28px;
}

.visual-service::before {
    width: 94px;
    height: 58px;
}

.visual-service::after {
    bottom: 88px;
    width: 78px;
    height: 34px;
}

.menu-card-body {
    display: block;
    min-height: 0;
    padding: 15px 16px 16px;
}

.menu-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 8px;
}

.menu-card-topline span,
.menu-card-topline small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}

.menu-card-topline span {
    background: #edf3ed;
    color: #315c24;
}

.menu-card-topline small {
    background: #f3f5f6;
    color: #617078;
}

.menu-card-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 8px;
}

.menu-card-title h3 {
    margin: 0;
    color: #15222b;
    font-size: 1.06rem;
    line-height: 1.22;
}

.menu-card-title strong {
    color: #315c24;
    font-size: 1.02rem;
    line-height: 1.2;
    white-space: nowrap;
}

.menu-card-body p {
    color: #65716a;
    font-size: .9rem;
    line-height: 1.42;
}

.menu-footer {
    width: min(960px, calc(100% - 36px));
    color: #68736d;
}

@media (min-width: 880px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .menu-hero,
    .menu-hero-overlay {
        min-height: 560px;
    }

    .menu-hero-overlay {
        padding-bottom: 76px;
    }

    .menu-summary {
        width: calc(100% - 24px);
    }

    .menu-category-bar {
        padding: 18px 16px;
    }

    .menu-section {
        padding: 42px 16px 0;
    }

    .menu-section-head {
        display: block;
        text-align: left;
    }

    .menu-section-head>p {
        margin-top: 8px;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .menu-card {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .menu-card-visual {
        min-height: 142px;
    }
}

@media (max-width: 430px) {

    .menu-hero,
    .menu-hero-overlay {
        min-height: 530px;
    }

    .menu-hero-copy h1 {
        font-size: 2.35rem;
    }

    .menu-hero-badges {
        justify-content: flex-start;
    }

    .menu-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-summary div {
        padding: 12px 10px;
        border-right: 1px solid #d8e0d8;
        border-bottom: 0;
    }

    .menu-summary div:last-child {
        border-right: 0;
    }

    .menu-card {
        grid-template-columns: 96px minmax(0, 1fr);
        min-height: 150px;
    }

    .menu-card-body {
        padding: 13px 12px;
    }

    .menu-card-title {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .menu-card-title strong {
        white-space: normal;
    }
}

@media print {

    .menu-hero-badges,
    .menu-card-topline {
        display: none;
    }

    .menu-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card-visual {
        display: block;
        min-height: 0;
        height: auto;
        padding: 0;
        background: none;
    }

    .menu-card-visual::before,
    .menu-card-visual::after,
    .menu-card-visual .menu-card-name::before {
        display: none;
    }

    .menu-card-name {
        margin: 0 0 6px;
        padding: 0;
        color: #111;
        font-size: 1rem;
        text-shadow: none;
    }

    .menu-card-price {
        position: static;
        display: inline-flex;
        min-height: 0;
        padding: 0;
        color: #111;
        background: none;
        box-shadow: none;
        font-size: .95rem;
    }

    .menu-card-title {
        grid-template-columns: 1fr auto;
    }
}

.pos-billing-upgrade {
    overflow: hidden;
}

.pos-billing-product-picker {
    border: 1px solid #dfe5df;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcfb;
}

.pos-billing-product-picker .table,
.pos-billing-cart-table {
    margin-bottom: 0;
}

.pos-billing-cart-table th,
.pos-billing-cart-table td,
.pos-receipt-items th,
.pos-receipt-items td {
    vertical-align: middle;
}

.pos-billing-cart-table input {
    min-width: 92px;
}

.pos-billing-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.pos-billing-totals span {
    display: flex;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dfe5df;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    color: #66736a;
    font-size: .78rem;
}

.pos-billing-totals strong {
    color: #17221a;
    font-size: .95rem;
}

.pos-receipt {
    max-width: 820px;
    margin: 0 auto;
}

.billing-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #dfe5df;
}

.billing-popup-window-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.billing-popup-window {
    display: grid;
    gap: 4px;
    min-height: 86px;
    border: 1px solid #dfe5df;
    border-radius: 8px;
    padding: 10px;
    background: #fbfcfb;
}

.billing-popup-window span {
    color: #66736a;
    font-size: .78rem;
}

.billing-popup-forms {
    display: grid;
    gap: 12px;
    padding: 12px 16px 16px;
    border-top: 1px solid #dfe5df;
}

.pos-checkout-modal {
    padding: 24px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(5px);
}

.pos-checkout-dialog {
    width: min(1120px, 95vw);
    max-height: 90vh;
    max-height: 90dvh;
    overflow: auto;
    border-radius: 20px;
    background: #f7faf9;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .34);
    animation: posCheckoutIn .22s ease-out;
}

@keyframes posCheckoutIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pos-checkout-head {
    padding: 18px 22px;
    background: #fff;
}

.pos-checkout-kicker,
.pos-checkout-session span,
.pos-checkout-card-title span {
    color: #087f7b;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.pos-checkout-head h2 {
    margin: 2px 0 3px;
    font-size: 1.45rem;
    color: #15231f;
}

.pos-checkout-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: .83rem;
}

.pos-checkout-head-actions strong {
    color: #15231f;
}

.pos-checkout-close,
.pos-icon-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dbe5e2;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 1.35rem;
    line-height: 1;
}

.pos-icon-button {
    width: 28px;
    height: 28px;
    color: #b42318;
    font-size: 1.05rem;
}

.pos-checkout-panel {
    padding: 18px 22px 22px;
}

.pos-checkout-session {
    display: grid;
    grid-template-columns: 48px repeat(5, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    border: 1px solid #dbe5e2;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.pos-checkout-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #e6f6f3;
    color: #087f7b;
    font-weight: 800;
}

.pos-checkout-session strong,
.pos-checkout-session small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-checkout-session strong {
    color: #15231f;
    font-size: .95rem;
}

.pos-checkout-session small,
.pos-checkout-total-line span,
.pos-checkout-item small {
    color: #64746c;
    font-size: .78rem;
}

.pos-checkout-details {
    white-space: nowrap;
    color: #087f7b;
    font-weight: 700;
}

.pos-checkout-body {
    display: grid;
    grid-template-columns: minmax(0, 64fr) minmax(320px, 36fr);
    gap: 24px;
    align-items: start;
}

.pos-checkout-card {
    border: 1px solid #dbe5e2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.pos-checkout-card-title,
.pos-checkout-payment h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid #e6eeeb;
}

.pos-checkout-card-title h3,
.pos-checkout-payment h3 {
    margin: 0;
    color: #15231f;
    font-size: 1.02rem;
}

.pos-checkout-items {
    display: grid;
}

.pos-checkout-item {
    display: grid;
    grid-template-columns: minmax(180px, 2.1fr) .8fr .45fr .8fr .75fr .8fr 48px;
    gap: 10px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #edf2f0;
    color: #26352f;
    font-size: .88rem;
}

.pos-checkout-item-head {
    background: #f6faf8;
    color: #64746c;
    font-size: .73rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pos-checkout-item strong,
.pos-checkout-item small {
    display: block;
}

.pos-checkout-item b {
    color: #15231f;
}

.pos-checkout-empty {
    padding: 22px 18px;
    color: #64746c;
    text-align: center;
}

.pos-checkout-popover {
    padding: 14px 18px 18px;
}

.pos-checkout-popover summary {
    width: max-content;
    cursor: pointer;
    color: #087f7b;
    font-weight: 800;
}

.pos-checkout-add-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    margin-top: 12px;
}

.pos-checkout-custom-charge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}

.pos-checkout-product-results {
    grid-column: 1 / -1;
    max-height: 240px;
    overflow: auto;
    border: 1px solid #e2ebe8;
    border-radius: 12px;
}

.pos-checkout-product-results table {
    margin: 0;
}

.pos-checkout-product-results small {
    display: block;
    color: #64746c;
}

.pos-checkout-payment {
    position: sticky;
    top: 86px;
    overflow: hidden;
}

.pos-checkout-total-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 18px;
    font-size: .9rem;
}

.pos-checkout-total-due {
    margin: 10px 18px 14px;
    border-radius: 14px;
    padding: 15px;
    background: #e6f6f3;
    color: #087f7b;
}

.pos-checkout-total-due span,
.pos-checkout-total-due strong {
    display: block;
}

.pos-checkout-total-due strong {
    margin-top: 4px;
    color: #043f3e;
    font-size: 1.65rem;
}

.pos-checkout-payment-form,
.pos-checkout-bill-action {
    padding: 0 18px 18px;
}

.pos-checkout-finalize {
    padding: 0 18px 18px;
}

.pos-checkout-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.pos-checkout-methods input {
    position: absolute;
    opacity: 0;
}

.pos-checkout-methods span {
    display: grid;
    min-height: 48px;
    place-items: center;
    border: 1px solid #dbe5e2;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-weight: 800;
}

.pos-checkout-methods input:checked + span {
    border-color: #087f7b;
    background: #e6f6f3;
    color: #043f3e;
}

.pos-checkout-quick-cash {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.pos-checkout-quick-cash button {
    border: 1px solid #dbe5e2;
    border-radius: 999px;
    padding: 6px 12px;
    background: #fff;
    color: #334155;
    font-weight: 700;
}

.pos-checkout-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.pos-checkout-metrics span {
    border: 1px solid #e2ebe8;
    border-radius: 10px;
    padding: 8px;
    color: #64746c;
    font-size: .78rem;
}

.pos-checkout-metrics strong {
    display: block;
    color: #15231f;
    font-size: .9rem;
}

.pos-checkout-footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 16px -18px -18px;
    padding: 14px 18px;
    border-top: 1px solid #e2ebe8;
    background: #fff;
}

.pos-checkout-footer label {
    color: #64746c;
    font-size: .84rem;
}

@media (max-width: 980px) {
    .pos-checkout-session,
    .pos-checkout-body {
        grid-template-columns: 1fr;
    }

    .pos-checkout-payment {
        position: static;
    }

    .pos-checkout-item {
        grid-template-columns: minmax(160px, 1.7fr) .7fr .45fr .75fr .7fr .75fr 40px;
        overflow-x: auto;
    }
}

@media (max-width: 620px) {
    .pos-checkout-modal {
        padding: 0;
    }

    .pos-checkout-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .pos-checkout-head,
    .pos-checkout-footer,
    .pos-checkout-custom-charge {
        grid-template-columns: 1fr;
    }

    .pos-checkout-head-actions {
        flex-wrap: wrap;
    }

    .pos-checkout-panel {
        padding: 12px;
    }

    .pos-checkout-item {
        grid-template-columns: minmax(170px, 1.8fr) 70px 42px 82px 76px 82px 36px;
    }
}

@media (max-width: 760px) {
    .pos-billing-totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-billing-cart-table input {
        min-width: 76px;
    }
}

@media print {
    .pos-receipt {
        max-width: 80mm;
        border: 0;
        box-shadow: none;
        padding: 0;
        font-size: 11px;
    }

    .pos-receipt .table th,
    .pos-receipt .table td {
        padding: 4px 2px;
    }
}

.modal-open {
    overflow: hidden;
}

.pos-billing-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(17, 24, 39, .56);
    backdrop-filter: blur(2px);
    overflow: hidden;
}

.pos-billing-dialog {
    width: min(1280px, 100%);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    background: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    padding: 0;
}

.pos-billing-window-dialog {
    width: min(1180px, 100%);
}

.pos-billing-window-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pos-billing-window-top h3 {
    margin: 0;
    font-size: 1.1rem;
}

.pos-billing-window-top span {
    color: #64748b;
}

.pos-billing-window-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 16px;
    align-items: start;
}

.pos-billing-window-card {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
}

.pos-billing-window-card h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.pos-billing-extend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #dbe6ec;
    border-radius: 8px;
}

.pos-billing-extend h3 {
    margin: 0 0 3px;
    font-size: 1rem;
}

.pos-billing-extend span {
    color: #64748b;
    font-size: .88rem;
}

.pos-billing-extend-actions,
.pos-post-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pos-post-type-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pos-billing-post-form,
.pos-billing-payment-form {
    display: grid;
    gap: 10px;
}

.pos-billing-post-grid,
.pos-billing-mixed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pos-billing-post-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.pos-billing-window-grid-ledger-only {
    grid-template-columns: 1fr;
}

.pos-billing-empty-state {
    min-height: 260px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
}

.pos-billing-empty-state h3 {
    margin: 0;
}

.pos-billing-empty-state p {
    margin: 0;
    color: #64748b;
}

.pos-post-charge-popup {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.pos-post-charge-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 18px;
}

.pos-post-charge-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.pos-post-charge-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.pos-post-charge-head span {
    color: #64748b;
    font-size: .9rem;
}

.pos-picker-popup {
    position: fixed;
    inset: 0;
    z-index: 2055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .55);
}

.pos-picker-dialog {
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
    padding: 18px;
}

.pos-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.pos-picker-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.js-picker-row {
    cursor: pointer;
    user-select: none;
}

.js-picker-row:hover {
    background: #f1f5f9;
}

.pos-billing-head,
.pos-billing-summary,
.pos-billing-grid,
.pos-billing-form {
    display: grid;
    gap: 10px;
}

.pos-billing-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.pos-billing-head h2,
.pos-billing-grid h3 {
    margin: 0;
}

.pos-billing-head h2 {
    font-size: 1.02rem;
    line-height: 1.2;
}

.pos-billing-head span,
.pos-billing-summary span {
    color: #64748b;
}

.pos-billing-panel {
    padding: 18px;
}

.pos-billing-summary {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.pos-billing-summary > div {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 10px;
}

.pos-billing-summary strong {
    display: block;
    margin-top: 2px;
    font-size: .96rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pos-billing-summary .pos-billing-balance {
    border-color: #86efac;
    background: #f0fdf4;
}

.pos-billing-summary .pos-billing-balance strong {
    color: #166534;
    font-size: 1.08rem;
}

.pos-billing-balance.is-balance-negative {
    border-color: #fca5a5;
    background: #fef2f2;
}

.pos-billing-balance.is-balance-negative strong {
    color: #b91c1c;
}

.pos-billing-balance.is-balance-zero {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.pos-billing-balance.is-balance-zero strong {
    color: #475569;
}

.pos-billing-summary-ledger {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.pos-billing-summary-ledger > div {
    min-height: 54px;
}

.pos-billing-summary-ledger span {
    display: block;
    font-size: .72rem;
    line-height: 1.15;
}

.pos-billing-summary-ledger strong {
    font-size: .88rem;
}

.pos-billing-summary-ledger .pos-billing-balance strong {
    font-size: 1rem;
}

.pos-billing-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.pos-billing-grid > section {
    min-width: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px;
}

.pos-billing-grid h3 {
    font-size: .98rem;
    margin-bottom: 10px;
}

.pos-billing-dialog .table {
    margin-bottom: 0;
    font-size: .9rem;
}

.pos-billing-dialog .table th {
    color: #475569;
    font-weight: 700;
    white-space: nowrap;
}

.pos-billing-dialog .table td {
    vertical-align: middle;
}

.pos-billing-form {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.pos-billing-form .btn {
    min-height: 38px;
}

@media (max-width: 860px) {
    .panel:has(.table-responsive),
    .panel:has(table) {
        overflow-x: auto;
    }

    .pos-billing-modal {
        padding: 8px;
    }

    .pos-billing-panel {
        padding: 12px;
    }

    .pos-billing-head {
        grid-template-columns: 1fr;
        padding: 12px 14px;
    }

    .pos-billing-window-top,
    .pos-billing-window-grid,
    .pos-billing-extend {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pos-billing-post-grid,
    .pos-billing-mixed-grid {
        grid-template-columns: 1fr;
    }

    .report-section-filter > .col-auto {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .pos-billing-modal {
        padding: 0;
        align-items: center;
    }

    .pos-billing-dialog {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .pos-billing-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-billing-form {
        grid-template-columns: 1fr;
    }

    .main > .panel {
        padding: 10px 8px;
    }

    .report-section-filter > .col-auto,
    .audit-filter-grid > .col-auto,
    .schedule-filter > .col-auto {
        width: 100%;
    }

    .main > .panel > .row > [class^="col-"] {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .pos-billing-summary {
        grid-template-columns: 1fr;
    }
}

/* Final POS overrides */
.cashier-shell {
    background: #eef3f5;
}

.cashier-shell .main {
    padding: 18px;
}

.cashier-topbar,
.pos-head,
.pos-section,
.pos-checkout,
.pos-recent {
    border: 1px solid #d8e2e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(36, 49, 63, .06);
}

.cashier-pos {
    display: grid;
    gap: 14px;
    max-width: 1560px;
    margin-inline: auto;
}

.pos-head {
    align-items: center;
    padding: 14px;
}

.pos-head h2 {
    font-size: 1.35rem;
    line-height: 1.1;
}

.pos-kicker {
    color: #5f6f7a;
    font-size: .74rem;
}

.pos-register-meta span {
    min-height: 24px;
    background: #f4f7f9;
}

.pos-status-strip {
    min-width: min(760px, 100%);
    border-color: #d8e2e7;
    box-shadow: none;
}

.pos-status-strip div {
    min-width: 120px;
    background: #fbfcfd;
}

.pos-status-strip strong {
    color: #1d2b34;
    font-size: .98rem;
}

.pos-section {
    padding: 14px;
}

.pos-recent {
    max-width: 1560px;
    margin-inline: auto;
}

.pos-section-head {
    min-height: 38px;
    border-bottom: 1px solid #edf2f4;
    padding-bottom: 10px;
}

.pos-section-head h2,
.pos-section-head h3 {
    color: #1d2b34;
    font-size: .98rem;
    font-weight: 800;
}

.pos-register-lower,
.payment-register-grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}

.pos-field-grid-customer,
.pos-field-grid-new,
.pos-field-grid-session {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pos-field-grid .form-label,
.pos-section .form-label,
.pos-checkout .form-label {
    margin-bottom: 4px;
    color: #5f6f7a;
    font-size: .78rem;
    font-weight: 800;
}

.pos-section .form-control,
.pos-section .form-select,
.pos-checkout .form-control,
.pos-checkout .form-select {
    min-height: 42px;
    border-color: #d4dfe5;
    background-color: #fbfcfd;
}

.service-tile,
.payment-queue-card,
.product-tile {
    border-color: #d8e2e7;
    border-radius: 8px;
    background: #fff;
}

.service-tile {
    min-height: 96px;
}

.service-tile:hover,
.service-tile.active,
.payment-queue-card:hover,
.payment-queue-card.active,
.product-tile:hover,
.product-tile.active {
    border-color: #0f8b8d;
    background: #f2fbfa;
}

.service-tile.active,
.payment-queue-card.active,
.product-tile.active {
    box-shadow: inset 0 0 0 2px #0f8b8d;
}

.product-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    padding: 2px;
}

.product-tile {
    display: grid;
    grid-template-rows: 86px auto auto auto;
    gap: 4px;
    min-height: 174px;
    padding: 8px;
    color: #1d2b34;
    text-align: left;
}

.product-tile img {
    width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 6px;
    background: #edf2f4;
}

.product-tile span {
    color: #5f6f7a;
    font-size: .74rem;
    font-weight: 800;
}

.product-tile strong {
    min-height: 38px;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.product-tile small {
    color: #0b6264;
    font-weight: 900;
}

.pos-ticket-card,
.pos-ticket-card div {
    border-color: #d8e2e7;
}

.pos-customer-benefits span {
    border-radius: 6px;
    background: #f4f7f9;
}

.pos-checkout {
    top: 84px;
    padding: 16px;
}

.pos-total-display {
    height: 64px;
    border: 0;
    background: #102830;
    color: #fff;
    font-size: 1.8rem;
    text-align: right;
}

.pos-payment-methods span,
.pos-keypad button,
.pos-quick-cash button {
    border-radius: 6px;
}

.pos-submit {
    width: 100%;
    min-height: 52px;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .pos-status-strip {
        min-width: 0;
    }

    .pos-register-lower,
    .payment-register-grid {
        grid-template-columns: 1fr;
    }

    .pos-checkout {
        position: static;
    }
}

@media (max-width: 760px) {
    .cashier-shell .main {
        padding: 10px;
    }

    .pos-field-grid-customer,
    .pos-field-grid-new,
    .pos-field-grid-session,
    .pos-ticket-card {
        grid-template-columns: 1fr;
    }

    .product-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Public menu section refinement */
.menu-main {
    background:
        linear-gradient(180deg, #fbfcfb 0, #f5f7f4 42%, #fbfcfb 100%);
}

.menu-summary {
    box-shadow: 0 18px 44px rgba(21, 34, 27, .12);
}

.menu-summary div {
    background: linear-gradient(180deg, #fff, #fbfcfb);
}

.menu-summary span {
    color: #66746a;
    font-size: .75rem;
    text-transform: uppercase;
}

.menu-summary strong {
    color: #15241a;
    font-weight: 900;
}

.menu-category-bar {
    justify-content: flex-start;
    max-width: none;
    padding-block: 18px;
    border-bottom: 1px solid #dfe7dd;
    background: rgba(251, 252, 251, .94);
    backdrop-filter: blur(12px);
}

.menu-category-bar a {
    min-height: 46px;
    padding: 9px 14px;
    border-color: #d4dfd0;
    background: #fff;
    color: #26342a;
    box-shadow: none;
}

.menu-category-bar a span {
    font-size: .9rem;
}

.menu-category-bar a.active {
    background: #244f1a;
    border-color: #244f1a;
    box-shadow: 0 10px 22px rgba(36, 79, 26, .18);
}

.menu-section {
    padding-top: 54px;
}

.menu-section+.menu-section {
    margin-top: 8px;
}

.menu-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    align-items: end;
    gap: 22px;
    padding: 0 0 18px 16px;
    border-bottom: 1px solid #dce5da;
    border-left: 4px solid #315c24;
}

.menu-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.menu-section-title-row h2 {
    margin: 0;
    color: #14221a;
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    line-height: 1;
}

.menu-section-title-row span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid #d8e2d5;
    border-radius: 8px;
    background: #fff;
    color: #60705f;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.menu-section-head>p {
    color: #5f6d64;
    font-size: .94rem;
}

.menu-grid {
    gap: 16px;
}

.menu-card {
    position: relative;
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 148px;
    overflow: hidden;
    border-color: #dce6db;
    background: #fff;
    box-shadow: 0 1px 0 rgba(23, 36, 27, .03), 0 14px 34px rgba(23, 36, 27, .06);
}

.menu-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #315c24;
    opacity: .72;
}

.menu-card:hover {
    transform: translateY(-1px);
    border-color: #b8ccb2;
    box-shadow: 0 18px 40px rgba(23, 36, 27, .1);
}

.menu-card-visual {
    min-height: 148px;
    border-right: 1px solid #edf1eb;
}

.menu-card-visual::before {
    bottom: 26px;
}

.menu-card-body {
    padding: 15px 17px 16px;
}

.menu-card-topline {
    margin-bottom: 9px;
}

.menu-card-topline span,
.menu-card-topline small {
    border-radius: 8px;
}

.menu-card-topline span {
    border: 1px solid #dbe6d8;
    background: #f6faf5;
}

.menu-card-title {
    align-items: baseline;
    gap: 14px;
}

.menu-card-title h3 {
    color: #15202a;
    font-size: 1.1rem;
    font-weight: 900;
}

.menu-card-title strong {
    padding: 4px 8px;
    border-radius: 8px;
    background: #eff5ed;
    color: #244f1a;
    font-size: .98rem;
    font-weight: 900;
}

.menu-card-body p {
    color: #627068;
    font-size: .91rem;
}

@media (min-width: 1060px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .menu-section {
        padding-top: 44px;
    }

    .menu-section-head {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 12px;
    }

    .menu-section-title-row h2 {
        font-size: 1.85rem;
    }

    .menu-card {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .menu-card-title {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .menu-card-title strong {
        width: fit-content;
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .menu-category-bar {
        padding-inline: 12px;
    }

    .menu-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .menu-card-visual {
        min-height: 150px;
    }

    .menu-card-body {
        padding: 13px 12px 14px;
    }

    .menu-card-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* Public menu layout request: no top counters, two-column item grid */
.menu-category-bar {
    margin-top: 0;
}

.menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .menu-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card::before {
        width: 100%;
        height: 3px;
        inset: 0 0 auto 0;
    }

    .menu-card-visual {
        min-height: 128px;
        height: 128px;
        border-right: 0;
        border-bottom: 1px solid #edf1eb;
    }

    .menu-card-visual::before {
        bottom: 18px;
        width: 42px;
        height: 82px;
    }

    .menu-card-visual::after {
        bottom: 101px;
        width: 58px;
        height: 24px;
    }

    .visual-service::before {
        width: 82px;
        height: 52px;
    }

    .visual-service::after {
        bottom: 74px;
        width: 66px;
        height: 28px;
    }

    .menu-card-body {
        padding: 12px;
    }

    .menu-card-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        min-height: 0;
        margin-bottom: 8px;
    }

    .menu-card-topline span,
    .menu-card-topline small {
        min-height: 22px;
        padding: 3px 7px;
        font-size: .68rem;
    }

    .menu-card-title {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .menu-card-title h3 {
        font-size: .98rem;
    }

    .menu-card-title strong {
        width: fit-content;
        font-size: .9rem;
        white-space: normal;
    }

    .menu-card-body p {
        font-size: .82rem;
        line-height: 1.35;
    }
}

@media (max-width: 430px) {
    .menu-section {
        padding-inline: 12px;
    }

    .menu-grid {
        gap: 10px;
    }

    .menu-card-visual {
        min-height: 110px;
        height: 110px;
    }

    .menu-card-visual::before {
        width: 36px;
        height: 70px;
    }

    .menu-card-visual::after {
        bottom: 88px;
        width: 50px;
    }

    .menu-card-body {
        padding: 10px;
    }

    .menu-card-title h3 {
        font-size: .92rem;
    }

    .menu-card-body p {
        font-size: .78rem;
    }
}

@media print {
    .menu-page {
        background: #fff;
    }

    .menu-hero {
        min-height: auto;
        background: none;
    }

    .menu-hero-img,
    .menu-nav-actions {
        display: none;
    }

    .menu-hero-overlay {
        min-height: auto;
        padding: 0 0 18px;
        color: #111;
        background: none;
    }

    .menu-brand {
        color: #111;
    }

    .menu-hero-copy h1 {
        font-size: 2rem;
    }

    .menu-hero-copy p:last-child {
        color: #444;
    }

    .menu-main {
        width: 100%;
        margin: 0;
    }

    .menu-summary,
    .menu-card {
        box-shadow: none;
        break-inside: avoid;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .menu-footer {
        width: 100%;
    }
}

/* Full public menu layout */
.menu-page {
    min-height: 100vh;
    background: #ececf1;
    color: #18242b;
}

.menu-shell {
    width: min(100%, 980px);
    min-height: 100vh;
    margin-inline: auto;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 39, 47, .14);
}

.menu-hero {
    position: relative;
    min-height: clamp(420px, 66vh, 620px);
    overflow: hidden;
    background: #233a33;
}

.menu-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-hero-overlay {
    position: relative;
    z-index: 1;
    min-height: clamp(420px, 66vh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px clamp(18px, 4vw, 42px) 96px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(15, 24, 21, .42), rgba(15, 24, 21, .16) 35%, rgba(15, 24, 21, .64)),
        linear-gradient(90deg, rgba(18, 34, 30, .5), rgba(18, 34, 30, .08));
}

.menu-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.menu-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    font-weight: 800;
}

.menu-brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-brand:hover {
    color: #fff;
}

.menu-brand .brand-logo-full {
    width: min(220px, 42vw);
    max-height: 78px;
}

.menu-page .brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 8px;
    background: #285d19;
}

.menu-nav-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.menu-language-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 46px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #1f2d25;
}

.menu-language-icon-btn::after {
    margin-left: 0;
}

.menu-language-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.menu-language-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-language-code {
    min-width: 20px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.menu-hero-copy {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}

.menu-kicker {
    margin: 0 0 8px;
    color: #5f8f41;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.menu-hero-copy .menu-kicker {
    color: rgba(255, 255, 255, .9);
}

.menu-hero-copy h1 {
    margin: 0;
    font-size: clamp(2.35rem, 8vw, 5.5rem);
    line-height: .95;
    letter-spacing: 0;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .22);
}

.menu-hero-copy p:last-child {
    width: min(520px, 100%);
    margin: 16px auto 0;
    color: rgba(255, 255, 255, .92);
    font-size: 1.04rem;
}

.menu-main {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding-bottom: 28px;
    background: #fff;
}

.menu-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(850px, calc(100% - 32px));
    margin: -48px auto 0;
    overflow: hidden;
    border: 1px solid #e0e5df;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(31, 43, 35, .13);
}

.menu-summary div {
    min-width: 0;
    padding: 18px;
    border-right: 1px solid #e0e5df;
    background: #fff;
}

.menu-summary div:last-child {
    border-right: 0;
}

.menu-summary span {
    display: block;
    color: #6a756d;
    font-size: .78rem;
    font-weight: 700;
}

.menu-summary strong {
    display: block;
    margin-top: 4px;
    color: #1d2b20;
    font-size: clamp(1.25rem, 4vw, 1.7rem);
    line-height: 1;
}

.menu-category-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: 100%;
    padding: 28px clamp(16px, 4vw, 42px);
    border-bottom: 1px solid #edf0ec;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 18px rgba(33, 44, 38, .06);
    scrollbar-width: none;
}

.menu-category-bar::-webkit-scrollbar {
    display: none;
}

.menu-category-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 56px;
    padding: 12px 20px;
    border: 2px solid #285d19;
    border-radius: 8px;
    color: #26312b;
    background: #f8f9f7;
    font-weight: 800;
    white-space: nowrap;
}

.menu-category-bar a.active,
.menu-category-bar a:hover,
.menu-category-bar a:focus {
    color: #fff;
    background: #285d19;
}

.menu-section {
    scroll-margin-top: 122px;
    padding: 56px clamp(16px, 4vw, 42px) 8px;
}

.menu-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    width: min(850px, 100%);
    margin: 0 auto 24px;
}

.menu-section-head h2 {
    margin: 0;
    color: #1a2730;
    font-size: clamp(1.7rem, 4vw, 2.25rem);
    line-height: 1;
}

.menu-section-head>p {
    max-width: 360px;
    margin: 0;
    color: #69746f;
    line-height: 1.45;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: min(850px, 100%);
    margin-inline: auto;
}

.menu-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e7e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(31, 42, 35, .07);
}

.menu-card-visual {
    position: relative;
    min-height: 164px;
    overflow: hidden;
    background:
        radial-gradient(circle at 26% 18%, rgba(255, 255, 255, .92) 0 12%, transparent 13%),
        linear-gradient(135deg, #eff2ed, #dbe2d8);
}

.menu-card-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 58px;
    height: 116px;
    border: 4px solid rgba(255, 255, 255, .78);
    border-top: 8px solid rgba(255, 255, 255, .9);
    border-radius: 10px 10px 24px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
    box-shadow: 0 18px 26px rgba(24, 34, 28, .2);
    transform: translateX(-50%);
}

.menu-card-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 134px;
    width: 82px;
    height: 36px;
    border-radius: 999px;
    transform: translateX(-50%) rotate(-8deg);
}

.visual-mojito {
    background:
        radial-gradient(circle at 58% 42%, rgba(255, 255, 255, .8) 0 8%, transparent 9%),
        linear-gradient(135deg, #f4f8f0, #bde5d2 45%, #48c0a4);
}

.visual-mojito::before {
    background: linear-gradient(180deg, rgba(230, 255, 222, .84) 0 18%, #72dbc2 19% 82%, #16a888);
}

.visual-mojito::after {
    background: radial-gradient(circle, #8ccf47 0 18%, transparent 20%), linear-gradient(90deg, #f5db65, #6ecf5b);
}

.visual-berry {
    background:
        radial-gradient(circle at 70% 32%, rgba(255, 255, 255, .84) 0 8%, transparent 9%),
        linear-gradient(135deg, #f6efed, #eac5b7 45%, #764948);
}

.visual-berry::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .72), #d99073 35%, #6e3b47);
}

.visual-berry::after {
    background: radial-gradient(circle, #6b273d 0 18%, transparent 20%), linear-gradient(90deg, #e76967, #7fcf72);
}

.visual-lime {
    background: linear-gradient(135deg, #faf7e5, #bfe693 48%, #78a63d);
}

.visual-lime::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), #dff2a0 36%, #8fc946);
}

.visual-lime::after {
    background: linear-gradient(90deg, #f1de58, #7fc65b);
}

.visual-strawberry {
    background: linear-gradient(135deg, #fff2ef, #e7b6ad 48%, #b34e50);
}

.visual-strawberry::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), #f3a09d 38%, #c74851);
}

.visual-strawberry::after {
    background: radial-gradient(circle, #e55458 0 18%, transparent 20%), linear-gradient(90deg, #f9d978, #74bf57);
}

.visual-special,
.visual-vanilla,
.visual-cappuccino {
    background: linear-gradient(135deg, #f7f3e9, #dfd4bd 48%, #a88552);
}

.visual-special::before,
.visual-vanilla::before,
.visual-cappuccino::before {
    background: linear-gradient(180deg, #fff6e7, #d6b98a 42%, #a87a46);
}

.visual-special::after,
.visual-vanilla::after,
.visual-cappuccino::after {
    background: linear-gradient(90deg, #f0d07b, #8aa655);
}

.visual-caramel,
.visual-chocolate,
.visual-oreo {
    background: linear-gradient(135deg, #f3ebe3, #c5a184 48%, #583d31);
}

.visual-caramel::before,
.visual-chocolate::before,
.visual-oreo::before {
    background: linear-gradient(180deg, #f8e8cf, #a97955 44%, #4b332b);
}

.visual-caramel::after,
.visual-chocolate::after,
.visual-oreo::after {
    background: linear-gradient(90deg, #e5b75e, #6f4f3b);
}

.visual-coffee-cold,
.visual-americano,
.visual-hot,
.visual-tea {
    background: linear-gradient(135deg, #f8f2e8, #d9c3a1 48%, #735740);
}

.visual-coffee-cold::before,
.visual-americano::before,
.visual-hot::before,
.visual-tea::before {
    height: 86px;
    border-radius: 12px 12px 18px 18px;
    background: linear-gradient(180deg, #fff2dd, #8b5f43 55%, #463126);
}

.visual-coffee-cold::after,
.visual-americano::after,
.visual-hot::after,
.visual-tea::after {
    bottom: 116px;
    width: 56px;
    height: 28px;
    background: rgba(255, 255, 255, .52);
    filter: blur(6px);
}

.visual-water,
.visual-soft,
.visual-lemonade {
    background: linear-gradient(135deg, #f4f7f7, #b5d6db 48%, #4e9aac);
}

.visual-water::before,
.visual-soft::before,
.visual-lemonade::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), #9ad4e5 45%, #2f8fb0);
}

.visual-water::after,
.visual-soft::after,
.visual-lemonade::after {
    background: linear-gradient(90deg, #fff, #80c6d8);
}

.visual-service {
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .84) 0 11%, transparent 12%),
        linear-gradient(135deg, #f6f8f7, #dae5e4 46%, #74aaa8);
}

.visual-service::before {
    bottom: 30px;
    width: 126px;
    height: 78px;
    border: 0;
    border-radius: 999px 999px 32px 32px;
    background: #fff;
    box-shadow: 0 18px 30px rgba(34, 45, 41, .18);
}

.visual-service::after {
    bottom: 103px;
    width: 100px;
    height: 42px;
    border-radius: 18px;
    background: linear-gradient(90deg, #7bbbbb, #fff);
}

.menu-card-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 16px 16px 18px;
    min-height: 164px;
}

.menu-card-body h3 {
    margin: 0;
    color: #162331;
    font-size: clamp(1rem, 3vw, 1.22rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.menu-card-body p {
    margin: 0;
    color: #66716b;
    font-size: .92rem;
    line-height: 1.4;
}

.menu-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    text-align: left;
}

.menu-card-meta span {
    color: #6b746f;
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}

.menu-card-meta strong {
    color: #285d19;
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: right;
}

.menu-empty {
    width: min(850px, calc(100% - 32px));
    margin: 30px auto 0;
    padding: 22px;
    border: 1px solid #e3e8e1;
    border-radius: 8px;
    background: #f8faf7;
    color: #68736d;
    text-align: center;
}

.menu-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: min(850px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 38px;
    border-top: 1px solid #e8ece7;
    color: #68736d;
}

@media (min-width: 880px) {
    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .menu-shell {
        box-shadow: none;
    }

    .menu-hero,
    .menu-hero-overlay {
        min-height: 620px;
    }

    .menu-hero-overlay {
        padding: 16px 14px 88px;
    }

    .menu-nav {
        align-items: flex-start;
    }

    .menu-page .brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .menu-brand .brand-logo-full {
        width: min(180px, 58vw);
    }

    .menu-summary {
        width: calc(100% - 22px);
    }

    .menu-summary div {
        padding: 14px 12px;
    }

    .menu-category-bar {
        gap: 14px;
        padding: 22px 26px;
    }

    .menu-category-bar a {
        min-width: 108px;
        min-height: 64px;
        padding: 10px 16px;
    }

    .menu-section {
        padding: 50px 16px 0;
    }

    .menu-section-head {
        display: block;
        text-align: center;
    }

    .menu-section-head>p {
        margin: 10px auto 0;
    }

    .menu-grid {
        gap: 14px;
    }

    .menu-card-visual {
        min-height: 142px;
    }

    .menu-card-visual::before {
        width: 50px;
        height: 102px;
    }

    .menu-card-body {
        padding: 14px 12px 16px;
        min-height: 160px;
    }

    .menu-card-meta {
        display: block;
    }

    .menu-card-meta strong {
        display: block;
        margin-top: 4px;
        text-align: left;
    }

    .menu-footer {
        display: block;
        width: calc(100% - 32px);
    }

    .menu-footer span {
        display: block;
        margin-bottom: 6px;
    }
}

@media (max-width: 430px) {

    .menu-grid,
    .menu-summary {
        grid-template-columns: 1fr;
    }

    .menu-summary div {
        border-right: 0;
        border-bottom: 1px solid #e0e5df;
    }

    .menu-summary div:last-child {
        border-bottom: 0;
    }
}

@media print {

    .menu-page,
    .menu-shell {
        background: #fff;
        box-shadow: none;
    }

    .menu-hero {
        min-height: auto;
        background: none;
    }

    .menu-hero-img,
    .menu-nav-actions,
    .menu-category-bar,
    .menu-card-visual {
        display: none;
    }

    .menu-hero-overlay {
        min-height: auto;
        padding: 0 0 18px;
        color: #111;
        background: none;
    }

    .menu-brand {
        color: #111;
    }

    .menu-hero-copy {
        text-align: left;
        margin: 0;
    }

    .menu-hero-copy h1 {
        font-size: 2rem;
        text-shadow: none;
    }

    .menu-hero-copy p:last-child {
        color: #444;
        margin-left: 0;
    }

    .menu-main,
    .menu-summary,
    .menu-grid,
    .menu-footer {
        width: 100%;
        margin: 0;
    }

    .menu-summary {
        box-shadow: none;
    }

    .menu-section {
        padding: 18px 0 0;
        break-inside: avoid;
    }

    .menu-section-head {
        width: 100%;
    }

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* Final public menu overrides */
.menu-shell {
    width: min(100%, 1120px);
    background: #fbfcfb;
}

.menu-hero,
.menu-hero-overlay {
    min-height: clamp(470px, 58vh, 600px);
}

.menu-hero-overlay {
    padding: 22px clamp(18px, 4vw, 48px) 82px;
    background:
        linear-gradient(180deg, rgba(10, 18, 16, .48), rgba(10, 18, 16, .16) 42%, rgba(10, 18, 16, .72)),
        linear-gradient(90deg, rgba(10, 26, 22, .72), rgba(10, 26, 22, .16) 62%, rgba(10, 26, 22, .24));
}

.menu-hero-copy h1 {
    font-size: clamp(2.45rem, 6vw, 5.25rem);
    line-height: .98;
}

.menu-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.menu-hero-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.menu-main {
    background: #fbfcfb;
}

.menu-summary {
    width: min(960px, calc(100% - 36px));
    margin-top: -40px;
    border-color: #d8e0d8;
    background: #d8e0d8;
}

.menu-summary div {
    padding: 18px 20px;
    border-right-color: #d8e0d8;
}

.menu-category-bar {
    gap: 10px;
    padding: 22px clamp(18px, 4vw, 48px);
    border-bottom: 0;
    background: rgba(251, 252, 251, .97);
}

.menu-category-bar a {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 9px;
    min-width: auto;
    min-height: 44px;
    padding: 9px 13px 9px 15px;
    border: 1px solid #cad8c6;
    color: #243126;
    background: #fff;
    box-shadow: 0 4px 12px rgba(36, 49, 39, .05);
}

.menu-category-bar a small {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 6px;
    border-radius: 999px;
    background: #eef3ed;
    color: #55704f;
    font-size: .72rem;
    font-weight: 900;
}

.menu-category-bar a.active,
.menu-category-bar a:hover,
.menu-category-bar a:focus {
    border-color: #315c24;
    background: #315c24;
    color: #fff;
}

.menu-category-bar a.active small,
.menu-category-bar a:hover small,
.menu-category-bar a:focus small {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.menu-section {
    scroll-margin-top: 96px;
    padding: 28px clamp(8px, 2vw, 22px) 4px;
    border: 0;
}

.menu-section+.menu-section {
    border-top: 0;
}

.menu-section-head {
    display: flex;
    align-items: center;
    width: min(960px, 100%);
    margin: 0 auto 18px;
    padding: 0 4px;
    border: 0;
    box-shadow: none;
}

.menu-section-head .menu-kicker,
.menu-section-head>p {
    display: none;
}

.menu-section-head::after {
    content: none;
    display: none;
}

.menu-section-head h2 {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #233126;
    box-shadow: none;
    font-size: clamp(1.55rem, 3.4vw, 2.3rem);
    font-weight: 850;
    line-height: 1.08;
    text-transform: none;
}

.menu-section-title-row {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.menu-section-title-row::before,
.menu-section-title-row::after,
.menu-section-title-row h2::before,
.menu-section-title-row h2::after {
    content: none;
    display: none;
}

.menu-grid {
    width: min(960px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 0;
}

.menu-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
    border: 0;
    border-radius: 0;
    /* border-right: 1px solid rgba(223, 231, 223, .55);
    border-bottom: 1px solid rgba(223, 231, 223, .55);
    background: #fff; */
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.menu-card:nth-child(2n) {
    border-right: 0;
}

.menu-card::before {
    content: none;
    display: none;
}

.menu-card:hover {
    transform: none;
    border-color: #dfe7df;
    box-shadow: inset 0 0 0 999px rgba(49, 92, 36, .035);
}

.menu-card-visual {
    display: flex;
    align-items: flex-end;
    min-height: 330px;
    height: 100%;
    aspect-ratio: 1 / 1.14;
    width: 100%;
    padding: 18px;
}

.menu-card-visual::before {
    bottom: 42px;
    width: 84px;
    height: 158px;
    border-width: 4px;
    border-top-width: 8px;
    z-index: 1;
}

.menu-card-visual::after {
    bottom: 188px;
    width: 108px;
    height: 44px;
    z-index: 1;
}

.menu-card-price {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: #315c24;
    box-shadow: 0 8px 20px rgba(22, 35, 31, .18);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.menu-card-info {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 118px);
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(24, 36, 31, .74);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 35, 31, .14);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.menu-card-name {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: auto 0 0;
    padding: 42px 0 0;
    color: #fff;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    font-weight: 900;
    line-height: 1.08;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .38);
    overflow-wrap: anywhere;
}

.menu-card-visual .menu-card-name::before {
    content: "";
    position: absolute;
    inset: -72px -18px -18px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(17, 25, 22, 0), rgba(17, 25, 22, .68));
}

.menu-card-body {
    display: block;
    min-height: 0;
    padding: 14px 16px 18px;
}

.menu-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 8px;
}

.menu-card-topline span,
.menu-card-topline small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
}

.menu-card-topline span {
    background: #edf3ed;
    color: #315c24;
}

.menu-card-topline small {
    background: #f3f5f6;
    color: #617078;
}

.menu-card-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 8px;
}

.menu-card-title h3 {
    margin: 0;
    color: #15222b;
    font-size: 1.06rem;
    line-height: 1.22;
}

.menu-card-title strong {
    color: #315c24;
    font-size: 1.02rem;
    line-height: 1.2;
    white-space: nowrap;
}

.menu-card-body p {
    color: #65716a;
    font-size: .9rem;
    line-height: 1.42;
}

.menu-footer {
    width: min(960px, calc(100% - 36px));
}

@media (min-width: 880px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {

    .menu-hero,
    .menu-hero-overlay {
        min-height: 560px;
    }

    .menu-summary {
        width: calc(100% - 24px);
    }

    .menu-section-head {
        display: flex;
        text-align: left;
    }

    /* .menu-section {
        padding: 26px 6px 4px;
    } */

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .menu-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card-visual {
        min-height: 215px;
        height: 100%;
        padding: 12px;
    }

    .menu-card-visual::before {
        bottom: 28px;
        width: 58px;
        height: 108px;
    }

    .menu-card-visual::after {
        bottom: 128px;
        width: 72px;
        height: 30px;
    }

    .menu-card-price {
        top: 8px;
        right: 8px;
        min-height: 26px;
        padding: 6px 8px;
        font-size: .74rem;
    }

    .menu-card-info {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 96px);
        min-height: 26px;
        padding: 6px 8px;
        font-size: .68rem;
    }

    .menu-card-name {
        padding-top: 34px;
        font-size: .98rem;
    }

    .menu-card-body {
        padding: 13px 12px 14px;
    }

    .menu-card-topline {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    .menu-card-title {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .menu-card-title strong {
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .menu-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-summary div {
        padding: 12px 10px;
        border-right: 1px solid #d8e0d8;
        border-bottom: 0;
    }

    .menu-summary div:last-child {
        border-right: 0;
    }

    .menu-card {
        min-height: 0;
        padding: 5px 5px;
    }

    .menu-card-visual {
        min-height: 180px;
        height: 100%;
        padding: 10px;
        border-radius: 12.5px;
    }

    .menu-card-visual::before {
        bottom: 22px;
        width: 48px;
        height: 90px;
    }

    .menu-card-visual::after {
        bottom: 108px;
        width: 60px;
        height: 24px;
    }

    .menu-card-price {
        min-height: 24px;
        padding: 5px 7px;
        font-size: .68rem;
    }

    .menu-card-info {
        min-height: 24px;
        padding: 5px 7px;
        font-size: .62rem;
    }

    .menu-card-name {
        font-size: .86rem;
    }

    .menu-card-visual .menu-card-name::before {
        inset: -54px -10px -10px;
    }

    .menu-card-body {
        padding: 11px 10px 12px;
    }

    .menu-card-topline span,
    .menu-card-topline small {
        min-height: 21px;
        padding: 3px 6px;
        font-size: .66rem;
    }

    .menu-card-title h3 {
        font-size: .94rem;
    }

    .menu-card-title strong {
        font-size: .9rem;
    }

    .menu-card-body p {
        font-size: .8rem;
        line-height: 1.34;
    }
}

@media print {

    .menu-hero-badges,
    .menu-card-topline {
        display: none;
    }

    .menu-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .menu-card-visual {
        display: block;
        min-height: 0;
        height: auto;
        padding: 0;
        background: none;
    }

    .menu-card-visual::before,
    .menu-card-visual::after,
    .menu-card-visual .menu-card-name::before {
        display: none;
    }

    .menu-card-name {
        margin: 0 0 6px;
        padding: 0;
        color: #111;
        font-size: 1rem;
        text-shadow: none;
    }

    .menu-card-price {
        position: static;
        display: inline-flex;
        min-height: 0;
        padding: 0;
        color: #111;
        background: none;
        box-shadow: none;
        font-size: .95rem;
    }

    .menu-card-info {
        position: static;
        display: inline-flex;
        min-height: 0;
        padding: 0;
        color: #111;
        background: none;
        box-shadow: none;
        font-size: .9rem;
    }

    .menu-card-title {
        grid-template-columns: 1fr auto;
    }
}

/* Session Full History Modal (Compact, Refined & Elegant) */
.billing-history-modal .pos-billing-dialog,
.billing-page-modal .pos-billing-dialog {
    width: min(1040px, 94vw);
    max-height: calc(100vh - 50px);
    max-height: calc(100dvh - 50px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.20);
    padding: 16px 20px;
}

.pos-checkout-kicker {
    color: #087f7b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.billing-history-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

@media (max-width: 860px) {
    .billing-history-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
}

.billing-history-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #087f7b;
    border-radius: 5px;
    padding: 6px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.billing-history-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 1px;
    text-transform: capitalize;
}

.billing-history-stat-val {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}

.billing-history-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    color: #334155;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.billing-history-table-container {
    border: 1px solid #f1f5f9;
    border-radius: 5px;
    overflow-x: auto;
    background: #ffffff;
    margin-bottom: 12px;
}

.billing-history-table {
    margin-bottom: 0;
    width: 100%;
}

.billing-history-table th {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    background: #fafafa;
    border-bottom: 1.5px solid #e2e8f0;
    white-space: nowrap;
    padding: 6px 7px;
}

.billing-history-table td {
    font-size: 0.74rem;
    padding: 6px 7px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}

.billing-history-table tbody tr:hover {
    background-color: #f8fafc;
}

.billing-btn-open-bill {
    background-color: #087f7b;
    color: #ffffff !important;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 4px;
    border: none;
    font-size: 0.78rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.billing-btn-open-bill:hover {
    background-color: #066562;
    color: #ffffff !important;
}