html, body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

.page-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.no-access {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 64px auto;
    max-width: 480px;
    text-align: center;
}

.table-panel {
    margin-bottom: 16px;
    overflow-x: auto;
}

.table-panel th {
    white-space: nowrap;
}

.row-inactive td {
    color: var(--mud-palette-text-secondary);
}

.cell-actions {
    text-align: end;
}

.cell-nowrap {
    white-space: nowrap;
}

.cell-details {
    max-width: 360px;
    overflow-wrap: anywhere;
}

.cell-empty {
    color: var(--mud-palette-text-secondary);
    padding: 24px !important;
    text-align: center !important;
}

.pager {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 8px 16px;
}

.pager > span:first-child {
    color: var(--mud-palette-text-secondary);
    margin-inline-end: auto;
}

.role-list {
    padding: 8px;
}

.role-item {
    background: none;
    border: 0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    padding: 12px;
    text-align: start;
    width: 100%;
}

.role-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.role-item.active {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.role-count {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.right-group {
    color: var(--mud-palette-text-secondary);
    margin: 16px 0 4px;
}

.right-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 40px;
}

.right-note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.field-label .right-note {
    font-weight: 400;
    margin-inline-start: 8px;
}

.form-actions-split {
    justify-content: space-between;
    padding-top: 16px;
}

.form-actions-split > :only-child {
    margin-inline-start: auto;
}

.account-line {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 4px 0;
}

.account-line > span {
    color: var(--mud-palette-text-secondary);
}

.account-card {
    height: 100%;
    margin-bottom: 0;
}

.account-card .form-actions {
    padding-top: 16px;
}

.account-note {
    color: var(--mud-palette-text-secondary);
    margin-top: 16px;
}

.sub-tabs {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.sub-tabs a {
    border-bottom: 3px solid transparent;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    padding: 10px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.sub-tabs a.active {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

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

.section .section-heading h2 {
    margin-bottom: 0;
}

.field-label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.field-help {
    color: var(--mud-palette-text-secondary);
}

.day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

.row-editor {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.row-editor:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.row-remove {
    align-items: flex-start;
    display: flex;
    justify-content: flex-end;
}

.combo-slot {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px;
}

.combo-slot:last-child {
    padding-bottom: 12px;
}

.cell-thumb {
    width: 56px;
}

.cell-thumb img {
    border-radius: 6px;
    display: block;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.cell-price {
    min-width: 130px;
    width: 160px;
}

.image-editor {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.image-editor img {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    height: 120px;
    object-fit: cover;
    width: 120px;
}

.file-button {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 8px;
    color: var(--mud-palette-primary);
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    margin-inline-end: 8px;
    padding: 8px 16px;
    position: relative;
}

.file-button:hover {
    background: var(--mud-palette-primary-hover);
}

.file-button input[type="file"] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.ordered-row {
    align-items: center;
    border-radius: 8px;
    display: flex;
}

.ordered-row.active {
    background: var(--mud-palette-primary-hover);
}

.ordered-row.active .role-item {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.role-item.row-inactive {
    color: var(--mud-palette-text-secondary);
}

.preview-item {
    align-items: baseline;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    padding: 8px 0;
}

.preview-item:last-child {
    border-bottom: 0;
}

.preview-name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.preview-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.price-special {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.price-special small {
    font-weight: 400;
    margin-inline-start: 4px;
}

.sold-out-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.sold-out-tile {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font: inherit;
    gap: 6px;
    justify-content: space-between;
    min-height: 84px;
    padding: 12px;
    text-align: start;
}

.sold-out-tile:hover {
    border-color: var(--mud-palette-primary);
}

.sold-out-tile.is-out {
    background: #FBE9E9;
    border-color: #C93F3F;
}

.tile-name {
    font-weight: 600;
}

.tile-state {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.is-out .tile-state {
    color: #C93F3F;
    font-weight: 600;
}

.order-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.order-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 5px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    text-decoration: none;
}

.order-card:hover {
    border-color: var(--mud-palette-primary);
}

.order-card.progress-held {
    border-inline-start-color: #C98A1E;
}

.order-card.progress-inkitchen {
    border-inline-start-color: #006C4F;
}

.order-card.progress-ready {
    border-inline-start-color: #006C4F;
}

.order-card.progress-served {
    border-inline-start-color: #56655F;
}

.order-card-top,
.order-card-bottom {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.order-number {
    font-size: 1.25rem;
    font-weight: 700;
}

.order-age,
.order-progress,
.order-card-type {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-chip {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    min-height: 44px;
    padding: 8px 14px;
}

.choice-chip small {
    color: var(--mud-palette-text-secondary);
    margin-inline-start: 6px;
}

.choice-chip.active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.choice-chip.active small {
    color: #fff;
}

.choice-chip:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.menu-tile:disabled {
    cursor: not-allowed;
}

.qty-stepper {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.qty-stepper button {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    height: 44px;
    width: 44px;
}

.qty-stepper button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.qty-stepper span {
    font-weight: 600;
    min-width: 32px;
    text-align: center;
}

.qty-small button {
    font-size: 1rem;
    height: 32px;
    width: 32px;
}

.dialog-total {
    font-size: 1.15rem;
    font-weight: 700;
    padding-inline-start: 8px;
}

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

.order-line-top {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.order-line-name {
    font-weight: 600;
}

.order-line-detail {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    padding-inline-start: 12px;
}

.order-line-note {
    font-style: italic;
}

.order-line-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
}

.line-status {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    margin-inline-end: auto;
}

.status-ready .line-status {
    color: #006C4F;
    font-weight: 600;
}

.status-inkitchen .line-status {
    color: #006C4F;
    font-weight: 600;
}

.status-voided .order-line-name,
.status-voided .order-line-top strong {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.order-total {
    display: flex;
    font-size: 1.15rem;
    justify-content: space-between;
    padding: 14px 0 6px;
}

.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.order-paid {
    color: #006C4F;
    font-size: 0.875rem;
    font-weight: 600;
}

.bill-card {
    height: 100%;
    margin-bottom: 0;
}

.discount-note {
    color: #006C4F;
}

.bill-totals {
    padding-top: 10px;
}

.bill-totals > div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 2px 0;
}

.bill-vat {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.bill-total {
    font-size: 1.15rem;
    font-weight: 700;
    padding-top: 6px !important;
}

.payment-row {
    align-items: center;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
}

.payment-row.is-reversed {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.payment-actions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.pay-due {
    align-items: baseline;
    display: flex;
    font-size: 1.25rem;
    justify-content: space-between;
    margin-bottom: 12px;
}

.share-row {
    align-items: center;
}

.share-row .choice-chip {
    min-height: 36px;
    padding: 4px 12px;
}

a.choice-chip {
    text-decoration: none;
}

.refund-row {
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 6px 0;
}

.receipt {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    color: #000;
    font-size: 0.875rem;
    margin: 0 auto;
    max-width: 380px;
    padding: 16px;
}

.receipt-head {
    text-align: center;
}

.receipt-head h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.receipt-trn {
    font-weight: 600;
    margin-top: 4px;
}

.receipt-title {
    border-bottom: 1px dashed #000;
    border-top: 1px dashed #000;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: space-between;
    margin: 10px 0;
    padding: 6px 0;
}

.receipt dl {
    margin: 0 0 8px;
}

.receipt dl > div {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 1px 0;
}

.receipt dd {
    margin: 0;
    text-align: end;
}

.receipt-lines {
    border-bottom: 1px dashed #000;
    border-collapse: collapse;
    margin-bottom: 8px;
    width: 100%;
}

.receipt-lines th,
.receipt-lines td {
    padding: 3px 0;
    text-align: start;
    vertical-align: top;
}

.receipt-lines th {
    border-bottom: 1px dashed #000;
}

.receipt-lines th:not(:first-child),
.receipt-lines td:not(:first-child) {
    padding-inline-start: 8px;
    text-align: end;
    white-space: nowrap;
}

.receipt-detail {
    font-size: 0.8rem;
}

.receipt-logo {
    display: block;
    margin: 0 auto 8px;
    max-height: 90px;
    max-width: 70%;
}

.receipt-copy {
    border: 2px solid #000;
    display: inline-block;
    font-weight: 700;
    margin-top: 6px;
    padding: 2px 10px;
}

.receipt-footer {
    border-top: 1px dashed #000;
    margin-top: 8px;
    padding-top: 6px;
    text-align: center;
}

.logo-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}

.shop-logo-preview {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    max-height: 72px;
    max-width: 200px;
}

.visually-hidden {
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

/* The till. It fills the screen and scrolls inside its panes, never as a whole page. */
.pos-shell {
    background: var(--mud-palette-background);
    display: flex;
    flex-direction: column;
    inset: 0;
    position: fixed;
}

.pos-bar {
    align-items: center;
    background: #063D32;
    color: #E8F5F0;
    display: flex;
    flex: none;
    gap: 6px;
    min-height: 52px;
    padding: 4px 10px;
}

.pos-brand {
    font-weight: 700;
    margin-inline-end: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-terminal {
    background: #0B5244;
    border-radius: 4px;
    font-size: 0.8rem;
    padding: 2px 8px;
}

.pos-spacer {
    flex: 1;
}

.pos-person {
    font-size: 0.875rem;
    margin-inline: 6px;
    white-space: nowrap;
}

.pos-bar-button {
    align-items: center;
    background: transparent;
    border: 1px solid #2C6A5B;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.875rem;
    gap: 6px;
    min-height: 40px;
    padding: 4px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.pos-bar-held {
    background: #8A5A00;
    border-color: #8A5A00;
}

.pos-lock-button {
    background: #006C4F;
    border-color: #006C4F;
}

.pos-badge {
    background: #E8F5F0;
    border-radius: 10px;
    color: #063D32;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 6px;
    text-align: center;
}

.pos-terminal-pick {
    align-items: center;
    background: #FDF3DF;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.pos-main {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    min-height: 0;
}

.pos-menu {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
}

.pos-search {
    display: flex;
    flex: none;
    gap: 8px;
    margin-bottom: 8px;
}

.pos-search-input {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    flex: 1;
    font: inherit;
    min-height: 44px;
    min-width: 0;
    padding: 0 12px;
}

.pos-star-toggle {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    padding: 0 12px;
    white-space: nowrap;
}

.pos-star-toggle.active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.pos-categories {
    display: flex;
    flex: none;
    gap: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pos-category {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    cursor: pointer;
    flex: none;
    font: inherit;
    font-weight: 600;
    min-height: 48px;
    padding: 4px 16px;
}

.pos-category.active {
    background: #063D32;
    border-color: #063D32;
    color: #fff;
}

.pos-grid {
    align-content: start;
    display: grid;
    flex: 1;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    min-height: 0;
    overflow-y: auto;
}

.pos-tile {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    align-items: flex-start;
    gap: 4px;
    justify-content: space-between;
    min-height: 88px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: start;
    touch-action: manipulation;
}

.pos-tile:active {
    background: #DDF5EB;
}

.pos-tile img {
    border-radius: 4px;
    height: 72px;
    object-fit: cover;
    width: 100%;
}

.pos-tile.is-out {
    background: #EEF2F0;
    color: var(--mud-palette-text-secondary);
    cursor: not-allowed;
}

.pos-tile-name {
    font-weight: 600;
    line-height: 1.25;
}

.pos-tile-price {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.pos-tile-star {
    color: #C6D6CF;
    font-size: 1.4rem;
    inset-inline-end: 6px;
    line-height: 1;
    position: absolute;
    top: 4px;
}

.pos-tile-star.on {
    color: #E5A12E;
}

.pos-empty {
    color: var(--mud-palette-text-secondary);
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
}

.pos-ticket {
    background: #fff;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.pos-ticket-empty {
    flex: 1;
}

.pos-types {
    display: grid;
    flex: none;
    gap: 6px;
    grid-template-columns: repeat(2, 1fr);
}

.pos-type {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 52px;
}

.pos-type.active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.pos-ticket-head {
    align-items: baseline;
    display: flex;
    flex: none;
    justify-content: space-between;
}

.pos-ticket-head strong {
    font-size: 1.15rem;
}

.pos-ticket-type {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    margin-inline-start: 8px;
}

.pos-ticket-head-actions {
    display: flex;
    gap: 10px;
}

.pos-link {
    background: none;
    border: 0;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 32px;
    padding: 0;
}

.pos-ticket-details {
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    flex: none;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.pos-ticket-prompt {
    background: #FDF3DF;
    border: 1px dashed #C98A1E;
    border-radius: 6px;
    cursor: pointer;
    flex: none;
    font: inherit;
    font-size: 0.875rem;
    margin-top: 4px;
    min-height: 36px;
}

.pos-lines {
    flex: 1;
    margin-block: 6px;
    min-height: 60px;
    overflow-y: auto;
}

.pos-line {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: 6px;
    justify-content: space-between;
    padding: 6px 0;
}

.pos-line.status-voided {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.pos-line-main {
    align-items: flex-start;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font: inherit;
    gap: 1px;
    min-width: 0;
    padding: 2px;
    text-align: start;
}

.pos-line-name {
    font-weight: 600;
}

.pos-line-detail {
    font-size: 0.8rem;
}

.pos-line-note {
    color: #006C4F;
}

.pos-line-status {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.pos-line-side {
    align-items: flex-end;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 4px;
}

.pos-line-qty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.pos-line-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pos-line-buttons .pos-action {
    flex: 1 1 100px;
}

.pos-totals {
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: none;
    font-size: 0.9rem;
    padding-top: 6px;
}

.pos-totals > div {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
}

.pos-total {
    font-size: 1.25rem;
    font-weight: 700;
}

.pos-actions-small {
    display: grid;
    flex: none;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
}

.pos-action {
    align-items: center;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.85rem;
    justify-content: center;
    min-height: 44px;
    padding: 2px 6px;
    text-align: center;
    text-decoration: none;
}

.pos-action:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.pos-action-danger {
    color: #C93F3F;
}

.pos-actions-main {
    display: flex;
    flex: none;
    gap: 6px;
    margin-top: 6px;
}

.pos-action-big {
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    min-height: 64px;
    touch-action: manipulation;
}

.pos-pay-hint {
    margin: 0;
    padding: 8px;
}

.pos-send {
    background: #006C4F;
}

.pos-pay {
    background: var(--mud-palette-primary);
}

.pos-pay-form {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.pos-method {
    flex: 1;
    min-height: 52px;
}

.pos-pay-entry {
    align-items: center;
    background: #F5F8F7;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 10px 12px;
}

.pos-pay-entry-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.pos-pay-entry-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.pos-pay-entry-value.is-default {
    color: var(--mud-palette-text-secondary);
}

.pos-change strong {
    color: #006C4F;
    font-size: 1.6rem;
}

.pos-remaining {
    color: #8A5A00;
    font-size: 1rem;
}

.pos-pay-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pos-notes {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, 1fr);
}

.pos-notes button {
    background: #E8F7F1;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 44px;
}

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

.pos-keypad button {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    min-height: 54px;
    touch-action: manipulation;
}

.pos-keypad button:active {
    background: #DDF5EB;
}

.pos-done-change {
    align-items: baseline;
    display: flex;
    font-size: 1.25rem;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pos-done-change strong {
    color: #006C4F;
    font-size: 2.5rem;
}

.pos-order-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
}

.pos-order-row {
    display: flex;
    gap: 6px;
}

.pos-order-open {
    align-items: center;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: grid;
    flex: 1;
    font: inherit;
    gap: 10px;
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 6px 10px;
    text-align: start;
}

.pos-order-state {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.pos-order-held {
    color: #8A5A00;
    font-weight: 600;
}

.pos-action.is-on {
    background: #C93F3F;
    border-color: #C93F3F;
    color: #fff;
}

.kitchen-printer-warning {
    background: #C93F3F;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 8px;
}

.kds-rush {
    background: #C93F3F;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-inline: 6px;
    padding: 1px 6px;
}

.kds-allergy {
    color: #C93F3F;
    font-weight: 800;
}

/* The kitchen. Dark, so it's easy on the eyes under hot lights, with big tap targets. */
.kds-shell {
    background: #031F1A;
    color: #EEF7F3;
}

.kds-bar {
    background: #021512;
    flex-wrap: wrap;
}

.kds-bar .pos-bar-button.active {
    background: #E8F5F0;
    border-color: #E8F5F0;
    color: #031F1A;
    font-weight: 700;
}

.kds-note-bar {
    background: #0B3A30;
    flex: none;
    font-size: 0.875rem;
    margin: 0;
    padding: 6px 12px;
}

.kds-void-alerts {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px 0;
}

.kds-void-alert {
    align-items: center;
    background: #C93F3F;
    border-radius: 6px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.05rem;
    gap: 12px;
    padding: 6px 12px;
}

.kds-void-alert .pos-action {
    color: #031F1A;
    margin-inline-start: auto;
}

.kds-main {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.kds-main.with-all-day {
    grid-template-columns: minmax(0, 1fr) 240px;
}

.kds-board {
    align-content: start;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.kds-card {
    background: #0A2E27;
    border-radius: 8px;
    border-top: 8px solid #00A878;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kds-card.timing-late {
    border-top-color: #E5A12E;
}

.kds-card.timing-verylate {
    border-top-color: #DC4C4C;
}

.kds-card.is-rush {
    outline: 3px solid #DC4C4C;
}

.kds-card.expo-complete {
    border-top-color: #00A878;
    box-shadow: 0 0 0 2px #00A878;
}

.kds-card-head {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 10px;
}

.kds-card-title {
    font-size: 1.3rem;
}

.kds-card-sub {
    color: #A9C4BB;
    font-size: 0.8rem;
}

.kds-timer {
    font-size: 1.5rem;
    font-weight: 800;
}

.timing-late .kds-timer {
    color: #F2B92E;
}

.timing-verylate .kds-timer {
    color: #FF6B60;
}

.kds-item {
    align-items: flex-start;
    background: none;
    border: 0;
    border-top: 1px solid #174D41;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 2px;
    min-height: 52px;
    padding: 8px 10px;
    text-align: start;
    touch-action: manipulation;
    width: 100%;
}

.kds-item:active {
    background: #00A878;
}

.kds-item-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.kds-item-detail {
    color: #CFE3DC;
    font-size: 0.9rem;
}

.kds-item-where {
    color: #8FB0A5;
    font-size: 0.8rem;
}

.kds-shell .kds-allergy,
.kds-note.is-allergy {
    background: #DC4C4C;
    border-radius: 3px;
    color: #fff;
    font-weight: 800;
    padding: 0 6px;
}

.kds-note {
    color: #F2B92E;
    font-weight: 700;
}

.kds-item-voided {
    border-top: 1px solid #174D41;
    color: #FF8A80;
    padding: 6px 10px;
    text-decoration: line-through;
}

.kds-card-foot {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding: 8px 10px;
}

.kds-card-foot .pos-action {
    color: #031F1A;
}

.kds-bump {
    background: #00A878;
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    flex: 1;
    font: inherit;
    font-weight: 700;
    min-height: 48px;
    touch-action: manipulation;
}

.kds-bump:disabled {
    background: #174D41;
    color: #8FB0A5;
    cursor: not-allowed;
}

.kds-empty {
    color: #8FB0A5;
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
}

.kds-all-day {
    background: #062620;
    border-inline-start: 1px solid #174D41;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.kds-all-day h2 {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.kds-all-day-row {
    align-items: baseline;
    border-bottom: 1px solid #174D41;
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.kds-all-day-row strong {
    font-size: 1.4rem;
    min-width: 2.2em;
}

.kds-tray {
    align-items: center;
    background: #021512;
    display: flex;
    flex: none;
    gap: 8px;
    min-height: 56px;
    overflow-x: auto;
    padding: 6px 10px;
}

.kds-tray-label {
    color: #8FB0A5;
    flex: none;
    font-size: 0.8rem;
}

.kds-recall {
    align-items: center;
    background: #0A2E27;
    border: 1px solid #174D41;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font: inherit;
    font-size: 0.85rem;
    gap: 6px;
    min-height: 44px;
    padding: 2px 10px;
}

.kds-recall-where {
    font-weight: 700;
}

.expo-line {
    align-items: center;
    border-top: 1px solid #174D41;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
}

.expo-line .pos-action {
    color: #031F1A;
    flex: none;
    font-size: 0.8rem;
    margin-inline-start: auto;
}

.expo-line-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.expo-mark {
    flex: none;
    font-size: 1.3rem;
    font-weight: 800;
    width: 22px;
}

.status-line-ready .expo-mark {
    color: #00E69C;
}

/* The floor. A plan keeps its shape at any size, and on a phone it becomes a simple grid of tables. */
.floor-page {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.floor-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.floor-canvas {
    aspect-ratio: 1000 / 700;
    background: #fff;
    background-image: radial-gradient(#CFE0D8 1px, transparent 1px);
    background-size: 2.5% 3.57%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    flex: none;
    max-height: calc(100dvh - 190px);
    margin-inline: auto;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.floor-canvas-edit .floor-item {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.floor-item.selected {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.floor-fixture {
    position: absolute;
}

.floor-fixture-wall {
    background: #56655F;
    border-radius: 2px;
}

.floor-fixture-label {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.floor-canvas-edit .floor-fixture-label {
    border: 1px dashed var(--mud-palette-lines-inputs);
}

.floor-table {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #063D32;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    font-size: 0.75rem;
    gap: 1px;
    justify-content: center;
    line-height: 1.15;
    overflow: hidden;
    padding: 2px;
    position: absolute;
    text-align: center;
    touch-action: manipulation;
}

.floor-table.shape-round {
    border-radius: 50%;
}

.floor-table-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.floor-table-status {
    font-weight: 600;
}

.floor-table-total {
    font-weight: 700;
}

.status-free {
    background-color: #EEF3F1;
    border-color: #CCD9D4;
}

.status-seated {
    background-color: #CFE2F7;
    border-color: #3B7FC4;
}

.status-ordered {
    background-color: #FBDDB5;
    border-color: #D9821B;
}

.status-foodready {
    background-color: #BDF2D9;
    border-color: #00875F;
}

.status-served {
    background-color: #D2F3E5;
    border-color: #006C4F;
}

.status-billrequested {
    background-color: #E2D3F5;
    border-color: #7A45C2;
}

.status-needsclearing {
    background-color: #FBF0A8;
    border-color: #B8A200;
}

.floor-table.is-late {
    border-color: #C93F3F;
    border-width: 3px;
}

.floor-table.status-foodready {
    animation: floor-pulse 1.4s ease-in-out infinite;
}

@keyframes floor-pulse {
    50% {
        box-shadow: 0 0 0 6px rgba(0, 135, 95, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .floor-table.status-foodready {
        animation: none;
    }
}

.floor-legend {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 4px 14px;
    margin-top: 8px;
}

.floor-legend-item {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.floor-dot {
    border: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.seat-count {
    min-height: 44px;
    min-width: 44px;
}

/* The waiter's order screen, side by side on a tablet and one at a time on a phone. */
.waiter-tabs {
    display: none;
    flex: none;
    gap: 6px;
    padding: 6px 10px 0;
}

.waiter-tabs .pos-type {
    flex: 1;
    min-height: 44px;
}

.waiter-main {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 380px);
    min-height: 0;
}

.waiter-picks {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 8px;
}

.waiter-pick {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.waiter-served {
    align-self: center;
    flex: none;
    padding-inline: 10px;
}

.waiter-bill-note {
    background: #E2D3F5;
    border-radius: 4px;
    flex: none;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 4px;
    padding: 3px 8px;
    text-align: center;
}

.waiter-fire {
    font-size: 0.9rem;
    min-height: 54px;
}

.line-state-ready {
    color: #006C4F;
    font-weight: 700;
}

.tablet-alerts {
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    inset-inline: 10px;
    position: fixed;
    z-index: 2000;
}

.tablet-alert {
    background: #006C4F;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
}

.tablet-alert-open {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1;
    align-items: flex-start;
    flex-direction: column;
    font: inherit;
    min-height: 56px;
    padding: 8px 14px;
    text-align: start;
}

.tablet-alert-close {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    min-width: 52px;
}

@media (max-width: 760px) {
    .waiter-tabs {
        display: flex;
    }

    .waiter-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .waiter-main.show-menu .waiter-ticket,
    .waiter-main.show-ticket .waiter-menu {
        display: none;
    }

    .waiter-ticket {
        border-inline-start: 0;
    }

    .floor-canvas {
        aspect-ratio: auto;
        background-image: none;
        border: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        max-height: none;
        overflow: visible;
    }

    .floor-canvas .floor-fixture {
        display: none;
    }

    .floor-canvas .floor-table {
        border-radius: 8px;
        height: auto !important;
        left: auto !important;
        min-height: 88px;
        position: static;
        top: auto !important;
        width: auto !important;
    }

    .floor-canvas-edit {
        aspect-ratio: 1000 / 700;
        display: block;
    }
}

@media (max-width: 640px) {
    .pos-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    }

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

.receipt-break {
    border-top: 1px dashed #000;
    margin-top: 4px;
    padding-top: 4px !important;
}

.receipt-grand {
    border-top: 1px dashed #000;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
    padding-top: 4px !important;
}

/* Shifts and reports. */
.pos-bar-warning {
    background: #C93F3F;
    border-color: #C93F3F;
    color: #fff;
    font-weight: 700;
}

.pos-open-shift {
    background: #C93F3F;
    color: #fff;
    text-decoration: none;
}

.shift-shell {
    overflow: hidden;
}

.shift-page {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px;
    justify-content: center;
    overflow-y: auto;
    padding: 16px;
}

.shift-card {
    background: #fff;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    padding: 20px;
}

.shift-card h1 {
    font-size: 1.3rem;
    font-weight: 600;
}

.shift-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.shift-report h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.shift-report h3,
.report-panel h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 6px;
}

.report-rows {
    display: flex;
    flex-direction: column;
}

.report-rows > div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 3px 0;
}

.report-rows small {
    color: var(--mud-palette-text-secondary);
}

.report-total {
    border-top: 1px solid var(--mud-palette-lines-inputs);
    font-weight: 700;
    margin-top: 2px;
    padding-top: 5px !important;
}

.report-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    padding-inline-start: 12px !important;
}

.report-panel .mud-tabs-panels {
    padding: 16px;
}

.report-narrow {
    max-width: 460px;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

.page-heading .report-actions {
    margin-top: 0;
}

.is-short {
    color: #C93F3F;
    font-weight: 600;
}

.is-over {
    color: #006C4F;
    font-weight: 600;
}

.cash-count {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cash-count-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 64px 14px minmax(70px, 1fr) 90px;
}

.cash-count-row .mud-input-control {
    margin: 0;
}

.cash-count-note {
    font-weight: 600;
    text-align: end;
}

.cash-count-value {
    text-align: end;
}

.cash-count-total {
    border-top: 1px solid var(--mud-palette-lines-inputs);
    display: flex;
    font-size: 1.15rem;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 8px;
}

.day-close-date {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.day-close-shift {
    margin-inline-start: 10px;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stat {
    height: 100%;
    padding: 18px 20px;
}

.stat-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-detail {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.stat-line {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 4px;
}

.stat-line > span {
    color: var(--mud-palette-text-secondary);
}

.section {
    margin-bottom: 16px;
    padding: 20px;
}

.section h2 {
    margin-bottom: 16px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Arabic text reads right to left on an English screen, and numbers, email addresses and
   English text read left to right on an Arabic one. */
.input-rtl input,
.input-rtl textarea {
    direction: rtl;
}

.input-ltr input,
.input-ltr textarea {
    direction: ltr;
}

[dir="rtl"] .input-ltr input,
[dir="rtl"] .input-ltr textarea {
    text-align: right;
}

/* ------------------------------------------------------------------------------------------
   The G Serve look. Colours are from the brand guide in G_Serve_Single_Shop_Design_and_Assets.
   Everything is scaled from the 15px root: dense, but easy to read and hit.
   Fields and buttons are about 36px; touch screens (till, tablet, kitchen) stay at 40px a tap or more.
   ------------------------------------------------------------------------------------------ */
:root {
    --g-forest: #063D32;
    --g-dark: #031F1A;
    --g-emerald: #00E69C;
    --g-deep: #006C4F;
    --g-mint: #9BECCB;
    --g-wash: #E8F7F1;
    --g-canvas: #F5F8F7;
    --g-ink: #141C24;
    --g-muted: #56655F;
    --g-line: #DCE8E3;
    --g-amber: #E5A12E;
    --g-amber-wash: #FDF3DF;
    --g-red: #C93F3F;
    --g-red-wash: #FBE9E9;
    --g-shadow: 0 1px 2px rgba(6, 61, 50, 0.06), 0 6px 18px rgba(6, 61, 50, 0.05);
}

html {
    font-size: 15px;
}

body {
    background: var(--g-forest);
    color: var(--g-ink);
}

.g-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

/* The fields, buttons and tables on every screen. */
/* One height for every field, dense or not, so fields in a row line up. */
.mud-input.mud-input-outlined > input.mud-input-root-outlined,
.mud-input.mud-input-outlined > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined,
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    box-sizing: border-box;
    height: 36px;
    padding: 8px 12px;
}

.mud-input.mud-input-outlined > textarea.mud-input-root-outlined,
.mud-input.mud-input-outlined > textarea.mud-input-root-outlined.mud-input-root-margin-dense {
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 9px 12px;
}

.mud-input.mud-input-outlined > input.mud-input-root-outlined.mud-input-root-adorned-end,
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-inline-end: 0;
}

.mud-input.mud-input-outlined > input.mud-input-root-outlined.mud-input-root-adorned-start,
.mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-inline-start: 0;
}

.mud-input-adornment .mud-icon-button {
    padding: 4px;
}

.mud-input-adornment .mud-icon-root,
.mud-select .mud-select-input .mud-icon-root {
    font-size: 1.2rem;
    height: 1.2rem;
    width: 1.2rem;
}

.mud-input-control {
    margin-top: 0;
}

.mud-input-control.mud-input-control-margin-dense,
.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin: 0;
}

.mud-input-label-outlined,
.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(12px, 9px) scale(1);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(12px, -7px) scale(0.8);
}

.mud-application-layout-rtl .mud-input-label-outlined,
.mud-application-layout-rtl .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(-12px, 9px) scale(1);
}

.mud-application-layout-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-12px, -7px) scale(0.8);
}

.mud-input-helper-text,
.mud-input-control-helper-container {
    font-size: 0.79rem;
    margin-top: 1px;
}

.mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: 9px;
}

.mud-button-root.mud-button {
    border-radius: 9px;
    box-shadow: none;
    font-size: 0.875rem;
    min-height: 36px;
    padding: 5px 14px;
}

.mud-button-root.mud-button.mud-button-text {
    padding: 5px 10px;
}

.mud-button-root.mud-button .mud-button-icon-start {
    margin-inline-end: 5px;
}

.mud-button-root.mud-button .mud-icon-root {
    font-size: 1.15rem;
}

.mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(180deg, #007F5D, var(--g-deep));
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: linear-gradient(180deg, var(--g-deep), var(--g-forest));
}

.mud-button-outlined.mud-button-outlined-primary {
    background: #fff;
    border-color: #A9D8C5;
}

.mud-icon-button {
    padding: 6px;
}

.mud-simple-table table * tr > td,
.mud-simple-table table * tr th,
.mud-simple-table.mud-table-dense * tr td,
.mud-simple-table.mud-table-dense * tr th,
.mud-table-dense * .mud-table-row .mud-table-cell,
.mud-table-cell {
    font-size: 0.875rem;
    padding: 8px 12px;
}

.mud-simple-table table * tr th,
.mud-table-head .mud-table-cell {
    background: #F0F6F3;
    color: var(--g-muted);
    font-size: 0.79rem;
    font-weight: 700;
    white-space: nowrap;
}

.mud-simple-table table tbody tr:hover > td {
    background: #F3FAF7;
}

.mud-paper-outlined {
    background: linear-gradient(180deg, #fff, #FBFDFC);
    border-color: var(--g-line);
    border-radius: 12px;
    box-shadow: var(--g-shadow);
}

.mud-alert {
    border-radius: 9px;
    font-size: 0.875rem;
    padding: 6px 12px;
}

.mud-alert .mud-alert-icon {
    margin-inline-end: 8px;
    padding: 3px 0;
}

.mud-alert .mud-alert-message {
    padding: 3px 0;
}

.mud-chip {
    font-size: 0.79rem;
    height: 24px;
}

/* MudBlazor's switch is big, and its parts depend on each other: a 44 by 26 box, a track inset
   to 34 by 14, and a 20px thumb in a 26px base that travels the 18px left over. */
.mud-switch-span.mud-switch-span-medium {
    height: 26px;
    padding: 6px 5px;
    width: 44px;
}

.mud-switch-span.mud-switch-span-medium .mud-switch-track {
    border-radius: 7px;
}

.mud-switch-base.mud-switch-base-medium {
    border-radius: 50%;
    padding: 3px;
}

.mud-switch-base.mud-switch-base-medium.mud-checked {
    transform: translateX(18px);
}

/* MudBlazor doesn't mirror its switch, so Arabic starts it from the right here. */
.mud-application-layout-rtl .mud-switch-base.mud-switch-base-medium {
    left: auto;
    right: 0;
}

.mud-application-layout-rtl .mud-switch-base.mud-switch-base-medium.mud-checked {
    transform: translateX(-18px);
}

.mud-checkbox .mud-icon-button,
.mud-radio .mud-icon-button {
    padding: 4px;
}

.mud-dialog {
    border-radius: 14px;
}

.mud-dialog-title {
    border-bottom: 1px solid var(--g-line);
    padding: 12px 18px;
}

.mud-dialog-title .mud-typography {
    font-size: 1.05rem;
}

.mud-dialog-content {
    padding: 12px 18px;
}

.mud-dialog-actions {
    gap: 6px;
    padding: 10px 14px;
}

.mud-dialog-actions .mud-button-root.mud-button.mud-button-filled {
    min-height: 38px;
    padding: 5px 18px;
}

.mud-tabs-tabbar {
    background: transparent;
    min-height: 38px;
}

.mud-tabs .mud-tabs-tabbar .mud-tab {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 38px;
    min-width: 92px;
    padding: 6px 14px;
    text-transform: none;
    width: auto;
}

.mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner,
.mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-content {
    min-height: 38px;
}

.mud-list-item {
    min-height: 34px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.mud-list-item-text .mud-typography {
    font-size: 0.875rem;
}

.mud-snackbar {
    border-radius: 10px;
    font-size: 0.875rem;
    min-height: 42px;
    padding: 4px 12px;
}

.mud-picker-container {
    font-size: 0.875rem;
}

.section {
    margin-bottom: 14px;
    padding: 16px;
}

.section h2,
.section .mud-typography-h6 {
    margin-bottom: 10px;
}

.section-heading {
    margin-bottom: 8px;
}

.table-panel {
    margin-bottom: 12px;
}

.field-label {
    font-size: 0.86rem;
}

.field-help {
    font-size: 0.86rem;
}

.right-row {
    min-height: 36px;
}

.choice-chip {
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 36px;
    padding: 5px 12px;
}

.choice-chip.active {
    background: linear-gradient(180deg, #007F5D, var(--g-deep));
    border-color: var(--g-deep);
}

.share-row .choice-chip {
    min-height: 34px;
    padding: 2px 10px;
}

.sub-tabs {
    background: #fff;
    border: 1px solid var(--g-line);
    border-radius: 10px;
    box-shadow: var(--g-shadow);
    gap: 2px;
    margin-bottom: 12px;
    padding: 3px;
}

.sub-tabs a {
    border: 0;
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 7px 14px;
}

.sub-tabs a:hover {
    background: var(--g-wash);
}

.sub-tabs a.active {
    background: linear-gradient(180deg, #007F5D, var(--g-deep));
    color: #fff;
}

.order-card {
    border-radius: 11px;
    box-shadow: var(--g-shadow);
    gap: 4px;
    padding: 11px 12px;
}

.order-number {
    font-size: 1.15rem;
}

.order-grid {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.sold-out-tile {
    border-radius: 10px;
    box-shadow: var(--g-shadow);
    min-height: 66px;
    padding: 10px 12px;
}

.order-line {
    padding: 8px 0;
}

/* The back office: a dark side menu, a white bar and a light canvas. */
.g-shell .mud-main-content {
    background: var(--g-forest);
    min-height: 100vh;
    padding: 6px;
    padding-inline-start: 0;
}

.g-canvas {
    background: var(--g-canvas);
    border-radius: 14px;
    min-height: calc(100vh - 74px);
    padding: 12px;
}

.g-shell .mud-drawer {
    background:
        linear-gradient(180deg, var(--g-forest) calc(100% - 340px), rgba(6, 61, 50, 0) calc(100% - 190px)),
        url("brand/sidebar-food.jpg") bottom center / 100% auto no-repeat,
        var(--g-forest);
}

.g-brand {
    align-items: center;
    display: flex;
    padding: 10px 14px 8px;
}

.g-brand img {
    display: block;
    height: 52px;
    width: auto;
}

.g-shell .mud-drawer .mud-navmenu {
    padding-bottom: 12px;
}

.g-shell .mud-drawer .mud-nav-link {
    background: rgba(9, 68, 56, 0.82);
    border: 1px solid rgba(155, 236, 203, 0.12);
    border-radius: 9px;
    font-size: 0.93rem;
    line-height: 1.3;
    margin: 4px 8px;
    min-height: 36px;
    padding: 7px 10px;
    width: calc(100% - 16px);
}

.g-shell .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: rgba(155, 236, 203, 0.14);
}

.g-shell .mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--g-mint);
    font-size: 1.25rem;
    height: 1.25rem;
    width: 1.25rem;
}

.g-shell .mud-drawer .mud-nav-link .mud-nav-link-text {
    margin-inline-start: 9px;
}

.g-shell .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: linear-gradient(90deg, #fff, #BFF3DD);
    border-color: transparent;
    color: var(--g-forest);
    font-weight: 700;
}

.g-shell .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--g-deep);
}

.g-topbar {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(3, 31, 26, 0.25);
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
    min-height: 54px;
    padding: 6px 12px;
    position: sticky;
    top: 6px;
    z-index: 20;
}

.g-topbar form {
    display: inline-flex;
}

.g-menu-toggle.mud-icon-button {
    color: var(--g-forest);
}

.g-shop {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 9px;
    min-width: 0;
    text-decoration: none;
}

.g-shop-logo {
    align-items: center;
    background: linear-gradient(160deg, #0B5A47, var(--g-forest));
    border-radius: 9px;
    display: flex;
    flex: none;
    height: 38px;
    justify-content: center;
    overflow: hidden;
    width: 38px;
}

.g-shop-logo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.g-shop-logo img.is-mark {
    height: 28px;
    width: 28px;
}

.g-shop-text,
.g-date-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.g-shop-text strong {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-shop-text small,
.g-date-text small {
    color: var(--g-muted);
    font-size: 0.79rem;
}

.g-date {
    align-items: center;
    border-inline-start: 1px solid var(--g-line);
    display: flex;
    gap: 8px;
    padding-inline-start: 10px;
    white-space: nowrap;
}

.g-date-icon {
    align-items: center;
    background: var(--g-wash);
    border-radius: 8px;
    color: var(--g-deep);
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.g-date-text strong {
    font-size: 0.93rem;
    font-weight: 700;
}

.g-spacer {
    flex: 1;
}

.g-language {
    background: #EEF4F1;
    border-radius: 16px;
    display: inline-flex;
    padding: 2px;
}

.g-language button {
    background: none;
    border: 0;
    border-radius: 14px;
    color: var(--g-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    min-height: 28px;
    padding: 0 12px;
}

.g-language button.active {
    background: var(--g-forest);
    color: #fff;
}

.g-status {
    align-items: center;
    background: var(--g-wash);
    border: 1px solid #BFE9D7;
    border-radius: 10px;
    color: var(--g-forest);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 600;
    gap: 6px;
    min-height: 34px;
    padding: 3px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.g-status.is-warning {
    background: var(--g-red-wash);
    border-color: #F1C5C5;
    color: var(--g-red);
}

.g-person {
    align-items: center;
    border: 1px solid var(--g-line);
    border-radius: 10px;
    color: inherit;
    display: inline-flex;
    font-size: 0.93rem;
    font-weight: 600;
    gap: 6px;
    min-height: 34px;
    padding: 3px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.g-person:hover,
.g-status:hover {
    border-color: var(--g-deep);
}

.g-footer {
    align-items: center;
    color: var(--g-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.79rem;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 2px 0;
}

.g-footer img {
    height: 22px;
}

.g-footer-brand {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

/* A page's title sits on the wave, as in the designs. */
.page-title,
.page-heading {
    background: url("brand/wave-desktop.svg") center / cover no-repeat, var(--g-forest);
    border-radius: 12px;
    color: #fff;
    margin-bottom: 12px;
    min-height: 52px;
    padding: 9px 16px;
}

.page-heading {
    gap: 8px;
}

.page-title.mud-typography,
.page-heading .mud-typography-h4 {
    color: #fff;
    font-size: 1.3rem;
}

.page-title.mud-typography {
    align-items: center;
    display: flex;
}

.page-heading .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(180deg, #2EEDB0, var(--g-emerald));
    color: var(--g-dark);
}

.page-heading .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--g-mint);
}

.page-heading .mud-button-outlined.mud-button-outlined-primary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(155, 236, 203, 0.6);
    color: #fff;
}

.page-heading .mud-button-text.mud-button-text-primary {
    color: var(--g-mint);
}

.g-hero {
    align-items: center;
    background:
        linear-gradient(90deg, var(--g-forest) 45%, rgba(6, 61, 50, 0.72) 68%, rgba(6, 61, 50, 0.2)),
        url("brand/hero-interior.jpg") right center / auto 100% no-repeat,
        var(--g-forest);
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
    min-height: 82px;
    overflow: hidden;
    padding: 12px 18px;
    position: relative;
}

.g-hero::before {
    background: url("brand/wave-desktop.svg") center / cover no-repeat;
    content: "";
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 72%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 72%);
    position: absolute;
}

[dir="rtl"] .g-hero {
    background:
        linear-gradient(270deg, var(--g-forest) 45%, rgba(6, 61, 50, 0.72) 68%, rgba(6, 61, 50, 0.2)),
        url("brand/hero-interior.jpg") left center / auto 100% no-repeat,
        var(--g-forest);
}

[dir="rtl"] .g-hero::before {
    -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent 72%);
    mask-image: linear-gradient(270deg, #000 40%, transparent 72%);
}

.g-hero > * {
    position: relative;
}

.g-hero h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.g-hero p {
    font-size: 0.93rem;
    margin: 1px 0 0;
    opacity: 0.9;
}

.g-hero-actions {
    display: flex;
    gap: 6px;
}

/* Dashboards. */
.g-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.g-stats {
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}

.g-row-3 {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}

.g-row-4 {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
}

.g-row-cashier {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}

.g-tiles {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 1180px) {
    .g-row-3,
    .g-row-4,
    .g-row-cashier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .g-row-3,
    .g-row-4,
    .g-row-cashier {
        grid-template-columns: minmax(0, 1fr);
    }
}

.g-card {
    background: linear-gradient(180deg, #fff, #FAFDFB);
    border: 1px solid var(--g-line);
    border-radius: 12px;
    box-shadow: var(--g-shadow);
    min-width: 0;
    padding: 11px 13px;
}

.g-card-head {
    align-items: center;
    display: flex;
    gap: 7px;
    margin-bottom: 6px;
}

.g-card-head .g-icon {
    color: var(--g-deep);
}

.g-card-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.g-card-title strong {
    font-size: 1rem;
    font-weight: 700;
}

.g-card-title small {
    color: var(--g-muted);
    font-size: 0.79rem;
}

.g-link {
    border: 1px solid var(--g-line);
    border-radius: 7px;
    color: var(--g-forest);
    flex: none;
    font-size: 0.79rem;
    font-weight: 600;
    padding: 1px 7px;
    text-decoration: none;
}

.g-link:hover {
    border-color: var(--g-deep);
}

.g-stat {
    align-items: flex-start;
    color: inherit;
    display: flex;
    gap: 8px;
    text-decoration: none;
}

.g-stat-icon {
    align-items: center;
    background: var(--g-wash);
    border-radius: 9px;
    color: var(--g-deep);
    display: flex;
    flex: none;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.g-stat-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.g-stat-label {
    font-size: 0.86rem;
    font-weight: 600;
}

.g-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.g-stat-detail {
    color: var(--g-muted);
    font-size: 0.79rem;
}

.g-chip {
    align-items: center;
    background: var(--g-wash);
    border-radius: 9px;
    color: var(--g-forest);
    display: inline-flex;
    font-size: 0.79rem;
    font-weight: 700;
    gap: 3px;
    padding: 0 7px;
    white-space: nowrap;
}

.g-chip.is-down,
.g-chip.is-danger {
    background: var(--g-red-wash);
    color: var(--g-red);
}

.g-chip.is-warning {
    background: var(--g-amber-wash);
    color: #8A5A00;
}

.g-split {
    background: #E3EFEA;
    border-radius: 4px;
    display: flex;
    gap: 2px;
    height: 8px;
    margin-top: 3px;
    overflow: hidden;
}

.g-split > span {
    display: block;
    height: 100%;
}

.g-rows {
    display: flex;
    flex-direction: column;
}

.g-rows > div,
.g-rows > a {
    align-items: center;
    border-bottom: 1px solid #EDF3F0;
    color: inherit;
    display: flex;
    font-size: 0.875rem;
    gap: 8px;
    justify-content: space-between;
    min-height: 28px;
    padding: 3px 0;
    text-decoration: none;
}

.g-rows > a:hover {
    background: #F3FAF7;
}

.g-rows > :last-child {
    border-bottom: 0;
}

.g-rows small {
    color: var(--g-muted);
    font-size: 0.79rem;
    white-space: nowrap;
}

.g-row-main {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.g-row-main > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-rank {
    align-items: center;
    background: var(--g-wash);
    border-radius: 6px;
    color: var(--g-forest);
    display: inline-flex;
    flex: none;
    font-size: 0.79rem;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.g-alert-icon {
    color: var(--g-amber);
    flex: none;
}

.g-alert-icon.is-danger {
    color: var(--g-red);
}

.g-empty {
    color: var(--g-muted);
    font-size: 0.86rem;
    padding: 6px 0;
}

.g-table {
    border-collapse: collapse;
    font-size: 0.875rem;
    width: 100%;
}

.g-table th {
    color: var(--g-muted);
    font-size: 0.79rem;
    font-weight: 700;
    padding: 1px 4px;
    text-align: start;
    white-space: nowrap;
}

.g-table td {
    border-top: 1px solid #EDF3F0;
    padding: 4px 5px;
}

.g-table a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.g-table a:hover {
    color: var(--g-deep);
}

.g-num {
    text-align: end !important;
    white-space: nowrap;
}

.g-action {
    align-items: center;
    background: linear-gradient(180deg, #fff, #F2FAF6);
    border: 1px solid var(--g-line);
    border-radius: 11px;
    box-shadow: var(--g-shadow);
    color: inherit;
    display: flex;
    gap: 8px;
    min-height: 52px;
    padding: 7px 11px;
    text-decoration: none;
}

.g-action:hover {
    border-color: var(--g-deep);
}

.g-action .g-icon {
    color: var(--g-deep);
}

.g-action strong {
    display: block;
    font-size: 0.93rem;
    line-height: 1.2;
}

.g-action small {
    color: var(--g-muted);
    display: block;
    font-size: 0.79rem;
    line-height: 1.2;
}

.g-action.is-primary {
    background: linear-gradient(160deg, #0B5A47, var(--g-forest));
    border-color: var(--g-forest);
    color: #fff;
}

.g-action.is-primary .g-icon {
    color: var(--g-mint);
}

.g-action.is-primary small {
    color: #C8E9DC;
}

.g-actions-grid {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g-actions-grid a {
    align-items: center;
    background: #F3FAF7;
    border: 1px solid var(--g-line);
    border-radius: 9px;
    color: inherit;
    display: flex;
    flex-direction: column;
    font-size: 0.79rem;
    font-weight: 600;
    gap: 1px;
    min-height: 50px;
    justify-content: center;
    padding: 3px;
    text-align: center;
    text-decoration: none;
}

.g-actions-grid a:hover {
    border-color: var(--g-deep);
}

.g-actions-grid .g-icon {
    color: var(--g-deep);
}

.g-mini-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.g-mini {
    background: #fff;
    border: 1px solid var(--g-line);
    border-radius: 10px;
    padding: 7px 10px;
}

.g-mini-label {
    align-items: center;
    display: flex;
    font-size: 0.79rem;
    font-weight: 600;
    gap: 4px;
}

.g-mini-label .g-icon {
    color: var(--g-deep);
}

.g-mini-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.g-table-tiles {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

.g-table-tile {
    border: 1px solid;
    border-radius: 8px;
    color: var(--g-forest);
    font-size: 0.79rem;
    font-weight: 700;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
}

/* Charts. Lines and bars in the brand green, text in ink, a tooltip on every mark. */
.g-chart {
    display: block;
    max-width: 640px;
    height: auto;
    width: 100%;
}

.g-chart text {
    fill: var(--g-muted);
    font-family: inherit;
    font-size: 11px;
}

.g-chart .g-grid-line {
    stroke: #E6EFEB;
    stroke-width: 1;
}

.g-chart-tip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms linear;
}

.g-chart-tip rect {
    fill: var(--g-forest);
}

.g-chart .g-chart-tip text {
    fill: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

.g-chart-point:hover .g-chart-tip,
.g-chart-point:focus .g-chart-tip,
.g-chart-tip.is-pinned {
    opacity: 1;
}

.g-chart-point:hover .g-chart-tip.is-pinned ~ .g-chart-tip {
    opacity: 1;
}

.g-chart-cross {
    opacity: 0;
    stroke: #A9C9BC;
    stroke-width: 1;
}

.g-chart-point:hover .g-chart-cross,
.g-chart-point:focus .g-chart-cross {
    opacity: 1;
}

.g-chart-point:focus {
    outline: none;
}

.g-chart-bar {
    fill: #35C997;
}

.g-chart-bar.is-peak {
    fill: var(--g-deep);
}

.g-chart-point:hover .g-chart-bar {
    fill: var(--g-forest);
}

.g-donut {
    align-items: center;
    display: flex;
    gap: 10px;
}

.g-donut svg {
    flex: none;
    height: 104px;
    width: 104px;
}

.g-donut-total {
    fill: var(--g-ink);
    font-size: 15px;
    font-weight: 700;
}

.g-donut-label {
    fill: var(--g-muted);
    font-size: 8.5px;
}

.g-legend {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.g-legend > div {
    align-items: center;
    display: flex;
    font-size: 0.86rem;
    gap: 6px;
}

.g-legend-key {
    border-radius: 3px;
    flex: none;
    height: 10px;
    width: 10px;
}

.g-legend-name {
    flex: 1;
    min-width: 0;
}

/* The till, tablet and kitchen. */
.pos-shell {
    background: #EDF3F0;
}

.pos-shell.kds-shell {
    background: var(--g-dark);
}

.pos-bar {
    background: linear-gradient(90deg, var(--g-dark), var(--g-forest) 55%, #0B5A47);
    gap: 5px;
    min-height: 46px;
    padding: 4px 8px;
}

.pos-bar::before {
    background: url("brand/monogram.svg") center / contain no-repeat;
    content: "";
    flex: none;
    height: 28px;
    width: 28px;
}

.pos-brand {
    font-size: 0.93rem;
}

.pos-terminal {
    background: rgba(155, 236, 203, 0.2);
    border-radius: 6px;
    font-size: 0.79rem;
    font-weight: 700;
}

.pos-bar-button {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(155, 236, 203, 0.32);
    border-radius: 8px;
    font-size: 0.86rem;
    min-height: 36px;
    padding: 3px 12px;
}

.pos-bar-button:hover {
    background: rgba(155, 236, 203, 0.18);
}

.pos-bar-warning,
.pos-lock-button {
    background: var(--g-red);
    border-color: var(--g-red);
}

.pos-lock-button {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(155, 236, 203, 0.5);
}

.pos-person {
    font-size: 0.86rem;
}

.pos-menu {
    padding: 8px;
}

.pos-search-input,
.pos-star-toggle {
    border-radius: 9px;
    font-size: 0.93rem;
    min-height: 40px;
}

.pos-category {
    border-radius: 9px;
    font-size: 0.93rem;
    min-height: 40px;
    padding: 3px 14px;
}

.pos-category.active {
    background: linear-gradient(180deg, #0B5A47, var(--g-forest));
    border-color: var(--g-forest);
}

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

.pos-tile {
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(6, 61, 50, 0.08);
    font-size: 0.93rem;
    min-height: 74px;
    padding: 9px 10px;
}

.pos-tile:hover {
    border-color: var(--g-deep);
}

.pos-tile img {
    height: 62px;
}

.pos-tile-price {
    color: var(--g-deep);
    font-size: 0.86rem;
    font-weight: 600;
}

.pos-main {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
}

.pos-ticket {
    border-inline-start: 0;
    box-shadow: -2px 0 12px rgba(6, 61, 50, 0.08);
    font-size: 0.93rem;
    padding: 10px;
}

.pos-type {
    border-radius: 9px;
    font-size: 0.93rem;
    min-height: 42px;
}

.pos-type.active {
    background: linear-gradient(180deg, #007F5D, var(--g-deep));
}

.pos-action {
    border-radius: 9px;
    font-size: 0.86rem;
    min-height: 42px;
}

.pos-action:hover:not(:disabled) {
    border-color: var(--g-deep);
}

.pos-action-big {
    border-radius: 11px;
    font-size: 1rem;
    min-height: 54px;
    text-decoration: none;
}

.pos-send {
    background: linear-gradient(160deg, #0B5A47, var(--g-forest));
}

.pos-pay {
    background: linear-gradient(180deg, #00936B, var(--g-deep));
}

.pos-open-shift {
    background: var(--g-red);
    font-size: 0.93rem;
}

.pos-total {
    font-size: 1.15rem;
}

.pos-notes button {
    background: var(--g-wash);
    border-radius: 8px;
    font-size: 0.93rem;
    min-height: 42px;
}

.pos-keypad button {
    border-radius: 9px;
    font-size: 1.15rem;
    min-height: 48px;
}

.pos-pay-entry {
    background: var(--g-canvas);
    border-radius: 9px;
    margin-bottom: 6px;
    padding: 8px 12px;
}

.pos-pay-entry-value,
.pos-change strong {
    font-size: 1.36rem;
}

.pos-done-change strong {
    font-size: 2rem;
}

.pos-order-open {
    border-radius: 9px;
    min-height: 46px;
    padding: 4px 10px;
}

.qty-stepper button {
    border-radius: 8px;
    font-size: 1.1rem;
    height: 40px;
    width: 40px;
}

.qty-small button {
    font-size: 0.93rem;
    height: 32px;
    width: 32px;
}

.seat-count {
    min-height: 40px;
    min-width: 40px;
}

.shift-page {
    gap: 10px;
    padding: 10px;
}

.shift-card {
    border-color: var(--g-line);
    border-radius: 12px;
    box-shadow: var(--g-shadow);
    gap: 10px;
    max-width: 460px;
    padding: 14px;
}

.shift-card h1 {
    font-size: 1.15rem;
}

.shift-report h2 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.shift-report h3,
.report-panel h3 {
    color: var(--g-forest);
    font-size: 0.93rem;
    margin: 10px 0 4px;
}

.report-rows > div {
    font-size: 0.93rem;
    padding: 3px 0;
}

.report-panel .mud-tabs-panels {
    padding: 12px 14px;
}

.report-panel {
    background: #fff;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    box-shadow: var(--g-shadow);
    overflow: hidden;
}

.cash-count {
    gap: 3px;
}

.cash-count-row {
    grid-template-columns: 56px 12px minmax(60px, 1fr) 84px;
}

.kds-card {
    border-radius: 11px;
    border-top-width: 5px;
}

.kds-card-title {
    font-size: 1.2rem;
}

.kds-board {
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 8px;
}

.kds-item {
    min-height: 44px;
    padding: 7px 10px;
}

.kds-item-name {
    font-size: 1.1rem;
}

.kds-timer {
    font-size: 1.3rem;
}

.kds-bump {
    background: linear-gradient(180deg, #00936B, var(--g-deep));
    border-radius: 9px;
    min-height: 44px;
}

.kds-bump:disabled {
    background: #174D41;
}

.kds-card-foot {
    padding: 6px 9px;
}

.kds-tray {
    min-height: 50px;
    padding: 4px 8px;
}

.kds-recall {
    border-radius: 8px;
    min-height: 40px;
}

.kds-bar .pos-bar-button.active {
    background: linear-gradient(90deg, #fff, #BFF3DD);
    border-color: transparent;
    color: var(--g-forest);
}

.floor-page {
    padding: 8px;
}

.floor-canvas {
    background-color: #fff;
    background-image: radial-gradient(#CFE0D8 1px, transparent 1px);
    border-color: var(--g-line);
    border-radius: 12px;
    box-shadow: var(--g-shadow);
    max-height: calc(100dvh - 140px);
}

.floor-table-name {
    font-size: 1rem;
}

.tablet-alert {
    background: linear-gradient(160deg, #007F5D, var(--g-forest));
    border-radius: 11px;
}

.tablet-alert-open {
    min-height: 48px;
    padding: 7px 12px;
}

/* Sign-in and setup. They're plain HTML with no live connection, so these don't rely on the theme. */
.auth-page {
    align-items: center;
    background: url("brand/wave-desktop.svg") center / cover no-repeat, var(--g-forest);
    color: var(--g-ink);
    display: grid;
    font-size: 0.93rem;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    min-height: 100vh;
    overflow: hidden;
    padding: 16px 28px;
    position: relative;
}

.auth-photo {
    bottom: 0;
    height: auto;
    inset-inline-start: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%), linear-gradient(90deg, #000 72%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 34%), linear-gradient(90deg, #000 72%, transparent);
    mask-composite: intersect;
    pointer-events: none;
    position: absolute;
    width: min(58vw, 880px);
}

[dir="rtl"] .auth-photo {
    transform: scaleX(-1);
}

.auth-hero {
    color: #fff;
    align-self: start;
    padding-top: 10vh;
    position: relative;
}

.auth-logo {
    display: block;
    height: 96px;
    width: auto;
}

.auth-rule {
    background: var(--g-emerald);
    border-radius: 2px;
    display: block;
    height: 3px;
    margin: 8px 0 8px 6px;
    width: 52px;
}

.auth-hero h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.auth-hero p {
    font-size: 0.93rem;
    margin: 0 0 12px;
    max-width: 420px;
    opacity: 0.92;
}

.auth-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.auth-tile {
    align-items: center;
    backdrop-filter: blur(3px);
    background: rgba(6, 61, 50, 0.66);
    border: 1px solid rgba(155, 236, 203, 0.34);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    font-size: 0.86rem;
    font-weight: 600;
    gap: 3px;
    justify-content: center;
    min-height: 68px;
    width: 88px;
}

.auth-tile .g-icon {
    color: var(--g-mint);
}

.auth-card {
    background: linear-gradient(160deg, #fff, #ECF8F3);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(3, 31, 26, 0.5);
    padding: 14px;
    position: relative;
    width: 100%;
}

.auth-card-head {
    align-items: center;
    display: flex;
    gap: 9px;
    padding: 2px 4px 9px;
}

.auth-card-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.auth-card-title strong {
    font-size: 1.07rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-card-title small {
    align-items: center;
    color: var(--g-muted);
    display: flex;
    font-size: 0.86rem;
    gap: 4px;
}

.auth-language {
    background: #fff;
    border: 1px solid var(--g-line);
    border-radius: 14px;
    color: var(--g-forest);
    flex: none;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 2px 10px;
    text-decoration: none;
}

.auth-language:hover {
    border-color: var(--g-deep);
}

.auth-body {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    padding: 14px 16px;
}

.auth-tabs {
    background: #EEF4F1;
    border-radius: 11px;
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    padding: 2px;
}

.auth-tabs a {
    border-radius: 9px;
    color: var(--g-muted);
    flex: 1;
    font-size: 0.93rem;
    font-weight: 600;
    padding: 6px;
    text-align: center;
    text-decoration: none;
}

.auth-tabs a.active {
    background: linear-gradient(180deg, #0B5A47, var(--g-forest));
    color: #fff;
}

.auth-heading {
    align-items: center;
    color: var(--g-ink);
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    margin: 0;
}

.auth-subtitle {
    color: var(--g-muted);
    font-size: 0.86rem;
    margin: 1px 0 8px;
    text-align: center;
}

.auth-fields {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.auth-card label {
    color: var(--g-muted);
    display: block;
    font-size: 0.79rem;
    font-weight: 600;
    margin: 5px 0 2px;
}

.auth-input {
    background: #fff;
    border: 1px solid #C6D6CF;
    border-radius: 9px;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.93rem;
    min-height: 38px;
    padding: 6px 12px;
    width: 100%;
}

[dir="rtl"] .auth-input[dir="ltr"] {
    text-align: right;
}

.auth-input:focus {
    border-color: var(--g-deep);
    outline: 2px solid rgba(0, 108, 79, 0.2);
}

.auth-error,
.auth-notice {
    border-radius: 9px;
    font-size: 0.86rem;
    margin: 6px 0;
    padding: 5px 10px;
}

.auth-error {
    background: var(--g-red-wash);
    color: var(--g-red);
}

.auth-notice {
    background: var(--g-wash);
    color: var(--g-forest);
}

.auth-submit {
    align-items: center;
    background: linear-gradient(180deg, #00875F, var(--g-forest));
    border: 0;
    border-radius: 10px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
    min-height: 42px;
    text-decoration: none;
    width: 100%;
}

.auth-submit:hover {
    background: linear-gradient(180deg, var(--g-deep), var(--g-dark));
}

[dir="rtl"] .auth-submit .g-icon {
    transform: scaleX(-1);
}

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

.keypad button {
    background: linear-gradient(180deg, #fff, #F2F7F5);
    border: 1px solid var(--g-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(6, 61, 50, 0.1);
    color: var(--g-ink);
    cursor: pointer;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    min-height: 46px;
    touch-action: manipulation;
}

.keypad button:active {
    background: var(--g-wash);
}

.keypad .key-muted {
    color: var(--g-muted);
}

.keypad .auth-submit {
    background: linear-gradient(180deg, #00875F, var(--g-forest));
    border: 0;
    color: #fff;
    font-size: 0.93rem;
    margin: 0;
    min-height: 46px;
}

.auth-note {
    align-items: center;
    color: var(--g-muted);
    display: flex;
    font-size: 0.79rem;
    gap: 4px;
    justify-content: center;
    margin: 8px 0 0;
}

.auth-foot {
    align-items: center;
    color: var(--g-muted);
    display: flex;
    font-size: 0.79rem;
    justify-content: space-between;
    padding: 8px 4px 2px;
}

.auth-foot-brand {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.auth-foot img {
    height: 18px;
    width: 18px;
}

@media (max-width: 820px) {
    .auth-page {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 12px;
    }

    .auth-hero {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding-top: 0;
        text-align: center;
    }

    .auth-logo {
        height: 64px;
    }

    .auth-rule,
    .auth-hero h2,
    .auth-hero p,
    .auth-tiles,
    .auth-photo {
        display: none;
    }

    .auth-card {
        max-width: 420px;
    }
}

@media (max-width: 640px) {
    .pos-main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    }

    .pos-bar {
        overflow-x: auto;
    }

    .pos-bar > * {
        flex: none;
    }
}

@media (max-width: 900px) {
    .g-date,
    .g-status {
        display: none;
    }
}

@media (max-width: 560px) {
    .g-person-name,
    .g-shop-text {
        display: none;
    }

    .g-canvas {
        padding: 6px;
    }
}

@media print {
    html {
        font-size: 12px;
    }

    body,
    .g-shell .mud-main-content,
    .g-canvas {
        background: #fff;
        padding: 0;
    }

    .g-topbar,
    .g-footer,
    .mud-drawer {
        display: none !important;
    }

    .g-shell .mud-main-content {
        margin: 0 !important;
    }

    .page-title,
    .page-heading,
    .g-hero {
        background: none;
        color: #000;
        padding: 0;
    }

    .g-hero::before {
        display: none;
    }

    .page-title.mud-typography,
    .page-heading .mud-typography-h4 {
        color: #000;
    }

    .g-card,
    .mud-paper-outlined {
        box-shadow: none;
    }
}