/*
    KwikEat portal: the look of KwikEat Desktop (Theme/KwikEatTheme.cs) on top of the DevExpress Fluent theme.
    Layout is done with DxGridLayout / DxStackLayout; this file only holds colours, the header, cards and icons.
*/

:root {
    --ke-red: #D42814;
    --ke-red-dark: #B3210F;
    --ke-red-darker: #931B0C;
    --ke-red-light: #FBE2DE;
    --ke-yellow: #FFC107;
    --ke-yellow-logo: #FCCD2A;
    --ke-green: #1E8C3A;
    --ke-green-dark: #06300B;
    --ke-green-pressed: #19772F;
    --ke-secondary: #DBEDDF;
    --ke-secondary-hover: #C4E1CC;
    --ke-blue: #1E85BE;
    --ke-amber: #8A6100;
    --ke-surface: #FFFFFF;
    --ke-background: #FBF7F1;
    --ke-text: #2B2523;
    --ke-text-muted: #6E6461;
    --ke-border: #E8DFD4;
    --ke-font: "Segoe UI", "Segoe UI Variable", system-ui, sans-serif;
    --ke-header-height: 52px;
}

/* ---- the base (instead of Bootstrap's reboot) ---- */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 8px 0;
    font-weight: 600;
    line-height: 1.25;
}

p {
    margin: 0 0 12px 0;
}

/* the title gets the focus after navigating (FocusOnNavigate), for screen readers; no outline around it */
h1:focus {
    outline: none;
}

a {
    color: var(--ke-green);
}

img, svg {
    vertical-align: middle;
}

code {
    font-size: 13px;
}

[hidden] {
    display: none !important;
}

/* the bar Blazor shows when the connection breaks or something went wrong */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 5000;
    padding: 10px 20px;
    background: var(--ke-yellow);
    color: var(--ke-text);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px;
}

.blazor-error-boundary {
    background: var(--ke-red);
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.validation-message {
    color: var(--ke-red);
    font-size: 13px;
}

html, body {
    margin: 0;
    background: var(--ke-background);
    color: var(--ke-text);
    font-family: var(--ke-font);
}

/* ---- buttons: green primary, light green secondary (ButtonStyle.cs) ---- */

.dxbl-btn.dxbl-btn-primary {
    --dxbl-btn-bg: var(--ke-green);
    --dxbl-btn-border-color: var(--ke-green);
    --dxbl-btn-hover-bg: var(--ke-green-pressed);
    --dxbl-btn-hover-border-color: var(--ke-green-pressed);
    --dxbl-btn-active-bg: var(--ke-green-dark);
    --dxbl-btn-active-border-color: var(--ke-green-dark);
    --dxbl-btn-color: #fff;
    font-weight: 600;
}

.dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--ke-secondary);
    --dxbl-btn-border-color: var(--ke-secondary);
    --dxbl-btn-hover-bg: var(--ke-secondary-hover);
    --dxbl-btn-hover-border-color: var(--ke-secondary-hover);
    --dxbl-btn-active-bg: var(--ke-secondary-hover);
    --dxbl-btn-active-border-color: var(--ke-secondary-hover);
    --dxbl-btn-color: var(--ke-green-dark);
    font-weight: 600;
}

/* ---- icons: the desktop's DevExpress SVGs, in the colour of the text ---- */

.ke-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--ke-icon) center / contain no-repeat;
    mask: var(--ke-icon) center / contain no-repeat;
    vertical-align: middle;
    flex: none;
}

.ke-icon-orders { --ke-icon: url(../images/icons/bo_order.svg); }
.ke-icon-pickup { --ke-icon: url(../images/icons/walking.svg); }
.ke-icon-delivery { --ke-icon: url(../images/icons/shopping_delivery.svg); }
.ke-icon-menu { --ke-icon: url(../images/icons/bo_product_group.svg); }
.ke-icon-customers { --ke-icon: url(../images/icons/customers.svg); }
.ke-icon-reports { --ke-icon: url(../images/icons/business_report.svg); }
.ke-icon-cash { --ke-icon: url(../images/icons/business_cash.svg); }
.ke-icon-settings { --ke-icon: url(../images/icons/actions_settings.svg); }
.ke-icon-print { --ke-icon: url(../images/icons/actions_print.svg); }
.ke-icon-check { --ke-icon: url(../images/icons/actions_check.svg); }
.ke-icon-add { --ke-icon: url(../images/icons/actions_add.svg); }
.ke-icon-edit { --ke-icon: url(../images/icons/actions_edit.svg); }
.ke-icon-delete { --ke-icon: url(../images/icons/actions_trash.svg); }
.ke-icon-cancel { --ke-icon: url(../images/icons/actions_deletecircled.svg); }
.ke-icon-save { --ke-icon: url(../images/icons/save.svg); }
.ke-icon-key { --ke-icon: url(../images/icons/security_key.svg); }
.ke-icon-lock { --ke-icon: url(../images/icons/security_lock.svg); }
.ke-icon-unlock { --ke-icon: url(../images/icons/security_unlock.svg); }
.ke-icon-previous { --ke-icon: url(../images/icons/actions_arrow4left.svg); }
.ke-icon-next { --ke-icon: url(../images/icons/actions_arrow4right.svg); }
.ke-icon-search { --ke-icon: url(../images/icons/actions_zoom.svg); }
.ke-icon-info { --ke-icon: url(../images/icons/actions_info.svg); }
.ke-icon-refresh { --ke-icon: url(../images/icons/actions_refresh.svg); }
.ke-icon-up { --ke-icon: url(../images/icons/moveup.svg); }
.ke-icon-down { --ke-icon: url(../images/icons/movedown.svg); }
.ke-icon-copy { --ke-icon: url(../images/icons/copy.svg); }

/* ---- the shell: red header with the logo, the modules and the clock (MainForm) ---- */

.ke-shell {
    min-height: 100vh;
    background: var(--ke-background);
}

.ke-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ke-red);
    color: #fff;
    height: var(--ke-header-height);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.ke-logo {
    display: block;
    height: 27px;
    padding: 0 20px 0 16px;
}

/* the module buttons: red, the current one yellow */
.dxbl-btn.ke-nav {
    --dxbl-btn-bg: var(--ke-red);
    --dxbl-btn-border-color: var(--ke-red);
    --dxbl-btn-hover-bg: var(--ke-red-dark);
    --dxbl-btn-hover-border-color: var(--ke-red-dark);
    --dxbl-btn-active-bg: var(--ke-red-darker);
    --dxbl-btn-active-border-color: var(--ke-red-darker);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-color: #fff;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dxbl-btn.ke-nav.ke-nav-current {
    --dxbl-btn-bg: var(--ke-yellow);
    --dxbl-btn-border-color: var(--ke-yellow);
    --dxbl-btn-hover-bg: var(--ke-yellow-logo);
    --dxbl-btn-hover-border-color: var(--ke-yellow-logo);
    --dxbl-btn-active-bg: var(--ke-yellow-logo);
    --dxbl-btn-color: var(--ke-text);
    --dxbl-btn-hover-color: var(--ke-text);
}

.ke-nav-separator {
    width: 1px;
    height: 22px;
    margin: 0 10px;
    background: #E87A6B;
}

.ke-clock {
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.ke-user, .ke-user a, .ke-user button {
    color: #fff;
    font-size: 13px;
}

/* ---- the page: title row with its actions, then cards ---- */

.ke-page {
    padding: 14px 20px 20px 20px;
}

.ke-page-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.ke-page-subtitle {
    color: var(--ke-text-muted);
    font-size: 14px;
}

/* a white card with a title and a muted description (FormCard) */
.ke-card {
    background: var(--ke-surface);
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    padding: 14px 20px;
}

.ke-card-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.ke-card-description {
    color: var(--ke-text-muted);
    font-size: 13px;
    margin-top: 2px;
}

.ke-card-body {
    margin-top: 12px;
}

.ke-muted {
    color: var(--ke-text-muted);
}

.ke-error {
    color: var(--ke-red);
}

/* ---- layout helpers for DxStackLayout items: their content in a row, centred ---- */

.ke-header-stack {
    height: var(--ke-header-height);
}

.ke-header-item, .ke-title-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ke-header-item {
    height: var(--ke-header-height);
}

.ke-header-nav {
    overflow: hidden;
}

.ke-user {
    gap: 10px;
    padding-right: 16px;
}

.ke-user form {
    margin: 0;
    min-height: 0;
    display: flex;
    align-items: center;
}

/* the language flags: the current one on white, as on the desktop's buttons */
.dxbl-btn.ke-flag {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--ke-red-dark);
    --dxbl-btn-hover-border-color: var(--ke-red-dark);
    padding: 4px 6px;
}

.dxbl-btn.ke-flag.ke-flag-current {
    --dxbl-btn-bg: #fff;
    --dxbl-btn-border-color: #fff;
    --dxbl-btn-hover-bg: #fff;
}

/* flag-icons sizes its flags by the font size, which a DxButton's icon doesn't get */
.ke-flag .fi {
    width: 22px;
    height: 16px;
    line-height: 16px;
    background-size: cover;
}

/* ---- account pages (log in, register, manage): one card in the middle ---- */

.ke-account {
    margin-top: 32px;
}

.ke-account form {
    min-height: 0;
}

.dxbl-btn.ke-wide {
    width: 100%;
}

.ke-account-links {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--ke-border);
    display: grid;
    gap: 4px;
    font-size: 13px;
}

.ke-account a, .ke-page a {
    color: var(--ke-green);
}

/* ---- the order board (OrderBoardView, OrderCardTemplate on the desktop) ---- */

.ke-board-column {
    background: #F4EEE6;
    border-radius: 10px;
    padding: 10px;
    min-height: 240px;
}

.ke-board-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    margin: 0 2px 10px 2px;
}

.ke-board-count {
    background: var(--ke-surface);
    color: var(--ke-text-muted);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
}

.ke-board-empty {
    color: var(--ke-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

.ke-fill {
    flex-grow: 1;
}

/* the card: its colour is a border around the white (or tinted) body */
.ke-order {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ke-surface);
    border: 1px solid var(--ke-border);
    border-radius: 10px;
    padding: 8px 12px 10px 12px;
    cursor: pointer;
}

.ke-order:hover, .ke-order:focus-visible {
    border-color: var(--ke-text-muted);
    outline: none;
}

.ke-order-warning {
    background: #FFF6D9;
    border: 2px solid var(--ke-yellow);
    padding: 7px 11px 9px 11px;
}

.ke-order-alert {
    background: #FDE7E4;
    border: 2px solid var(--ke-red);
    padding: 7px 11px 9px 11px;
}

.ke-order-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ke-order-foot {
    margin-top: 6px;
    flex-wrap: wrap;
    row-gap: 6px;
}

.ke-order-foot .ke-advance-wrap {
    margin-left: auto;
}

.ke-order-no, .ke-order-time {
    font-size: 18px;
    font-weight: 700;
}

.ke-order-name {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

.ke-order-sub, .ke-order-meta {
    font-size: 13px;
    color: var(--ke-text-muted);
}

.ke-order-due {
    font-size: 13px;
    font-weight: 700;
}

.ke-order-due-ontime { color: var(--ke-text-muted); }
.ke-order-due-warning { color: var(--ke-amber); }
.ke-order-due-alert { color: var(--ke-red); }

.ke-order-note {
    font-size: 12px;
    font-style: italic;
    color: var(--ke-text-muted);
}

.ke-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9px;
    white-space: nowrap;
}

.ke-badge-pickup { background: var(--ke-blue); color: #fff; }
.ke-badge-delivery { background: var(--ke-green); color: #fff; }
.ke-badge-source { background: #F4EEE6; color: var(--ke-text-muted); }
.ke-badge-paid { background: #E3F4E6; color: var(--ke-green); }
.ke-badge-unpaid { background: #FFF0C2; color: var(--ke-amber); border: 1px solid #E0A800; }
.ke-badge-info { background: #E2F0F8; color: var(--ke-blue); }

/* the next step: the desktop's yellow button */
.dxbl-btn.ke-advance {
    --dxbl-btn-bg: var(--ke-yellow);
    --dxbl-btn-border-color: var(--ke-yellow);
    --dxbl-btn-hover-bg: var(--ke-yellow-logo);
    --dxbl-btn-hover-border-color: var(--ke-yellow-logo);
    --dxbl-btn-active-bg: #E0A800;
    --dxbl-btn-color: var(--ke-text);
    --dxbl-btn-hover-color: var(--ke-text);
    font-weight: 700;
}

/* ---- an opened order ---- */

.ke-popup-no {
    font-size: 22px;
    font-weight: 700;
}

.ke-popup-customer {
    font-size: 17px;
    font-weight: 700;
    margin-top: 6px;
}

.ke-lines {
    display: grid;
    gap: 6px;
}

.ke-line {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 8px;
    align-items: start;
    background: #F4EEE6;
    border-radius: 8px;
    padding: 6px 10px;
}

.ke-line-qty, .ke-line-name {
    font-weight: 700;
}

.ke-totals {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.ke-total {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    font-size: 16px;
}

.ke-order-popup .dxbl-modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* the page's actions keep their size; the title gives way */
.ke-title-item > * {
    flex-shrink: 0;
}

.ke-title-item .dxbl-checkbox, .ke-order-meta, .ke-board-caption {
    white-space: nowrap;
}

.ke-w-140 { width: 140px; }
.ke-w-230 { width: 230px; }
.ke-w-200 { width: 200px; }

/* the page's actions take the room the title leaves, on the right, and go to a second line only when they must */
.ke-title-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    gap: 6px;
    min-width: 0;
}

/* narrow columns (five, with the done ones): the time goes under the number rather than out of the card */
.ke-order-row {
    flex-wrap: wrap;
    row-gap: 4px;
}

.ke-order-time {
    margin-left: auto;
}

/* ---- the menu (MenuView on the desktop): groups | products and preview | options and choices ---- */

.ke-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ke-pane-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-pane-subtitle {
    font-size: 15px;
    font-weight: 600;
    margin: 10px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ke-save-status {
    color: var(--ke-text-muted);
    font-size: 13px;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ke-save-status.ke-error {
    color: var(--ke-red);
}

/* the grids as on the desktop: white rows, cream every other row, the focused row light red */
.ke-menu-grid {
    background: var(--ke-surface);
    border-radius: 8px;
}

.ke-menu-grid .dxbl-grid-table > tbody > tr:nth-child(even) > td {
    background-color: var(--ke-background);
}

.ke-menu-grid .dxbl-grid-focused-row > td,
.ke-menu-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row:nth-child(even) > td {
    background-color: var(--ke-red-light);
    color: var(--ke-text);
}

.ke-grid-empty {
    color: var(--ke-text-muted);
    text-align: center;
    padding: 18px 12px;
}

/* whole group | this product: the current one red */
.ke-scope .dxbl-btn {
    --dxbl-btn-bg: var(--ke-surface);
    --dxbl-btn-border-color: var(--ke-border);
    --dxbl-btn-color: var(--ke-text);
    font-weight: 600;
}

.ke-scope .dxbl-btn.ke-scope-current {
    --dxbl-btn-bg: var(--ke-red);
    --dxbl-btn-border-color: var(--ke-red);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-bg: var(--ke-red-dark);
    --dxbl-btn-hover-color: #fff;
}

.ke-scope-hint {
    font-size: 13px;
}

.ke-menu-web, .ke-menu-preview {
    margin-top: 8px;
}

.ke-preview-name {
    font-size: 18px;
    font-weight: 700;
}

.ke-preview-price {
    color: var(--ke-red);
    font-size: 16px;
    font-weight: 700;
    margin-right: 8px;
}

.ke-preview-option {
    margin-top: 12px;
}

.ke-preview-option .ke-muted {
    margin-left: 6px;
    font-size: 13px;
}

.ke-preview-choice {
    display: flex;
    gap: 8px;
    padding-left: 14px;
}

.ke-preview-extra { color: var(--ke-red); }
.ke-preview-less { color: var(--ke-green); }

/* ---- settings: five tabs of cards, as on the desktop ---- */

.ke-tabs .dxbl-tabs-tablist {
    margin-bottom: 16px;
}

.ke-tabs .dxbl-tabs-item {
    font-weight: 600;
}

.ke-errors {
    background: var(--ke-red-light);
    color: var(--ke-red-darker);
    border-radius: 8px;
    padding: 10px 14px 10px 32px;
    margin: 0 0 14px 0;
}

.ke-hint {
    font-size: 12px;
    margin-top: 4px;
}

.ke-link {
    color: var(--ke-green);
}

.ke-pairing {
    background: #E3F4E6;
    border-radius: 8px;
    padding: 12px 14px;
}

.ke-pairing-code {
    font-family: Consolas, monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin: 6px 0;
}

/* cells are edited with a tap */
.ke-menu-grid .dxbl-grid-table > tbody > tr > td {
    cursor: pointer;
}

/* the shop's Print Connectors, one row each */
.ke-connectors {
    display: grid;
    gap: 8px;
}

.ke-connector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ke-background);
    border-radius: 8px;
    padding: 8px 12px;
}

/* ---- reports (the desktop's Reports, F7) ---- */

.ke-report-bar {
    margin-bottom: 12px;
}

.ke-report-headline {
    margin-bottom: 14px;
}

.ke-report-takings {
    font-size: 18px;
    font-weight: 700;
}

.ke-report-note {
    color: var(--ke-amber);
    font-size: 13px;
}

.ke-report-unpaid {
    color: var(--ke-amber);
    font-weight: 600;
}

/* the axis labels are drawn below the chart's own box: room for them before the grid */
.ke-report-chart {
    height: 260px;
    padding: 0;
    margin-bottom: 36px;
}

.ke-chart-tip {
    padding: 6px 10px;
}

.ke-printout .dxbl-modal-body {
    padding: 0;
}

.ke-printout-viewer {
    width: 100%;
    height: 100%;
}

/* ---- a new order, or one that is changed (as F2 / F3 on the desktop) ---- */
.ke-entry-hint {
    font-size: 13px;
}

.ke-entry-groups {
    display: grid;
    gap: 6px;
}

.ke-entry-groups .dxbl-btn {
    --dxbl-btn-bg: var(--ke-surface);
    --dxbl-btn-border-color: var(--ke-border);
    --dxbl-btn-color: var(--ke-text);
    justify-content: flex-start;
    font-weight: 600;
    min-height: 40px;
}

.ke-entry-groups .dxbl-btn.ke-entry-group-current {
    --dxbl-btn-bg: var(--ke-red);
    --dxbl-btn-border-color: var(--ke-red);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-bg: var(--ke-red-dark);
    --dxbl-btn-hover-color: #fff;
}

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

.ke-entry-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
    padding: 10px 12px;
    background: var(--ke-surface);
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    color: var(--ke-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ke-entry-tile:hover {
    border-color: var(--ke-red);
    background: var(--ke-red-light);
}

.ke-entry-tile:focus-visible {
    outline: 2px solid var(--ke-red);
    outline-offset: 2px;
}

.ke-entry-tile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.ke-entry-code {
    color: var(--ke-red);
    font-weight: 700;
    font-size: 16px;
}

.ke-entry-group, .ke-entry-options {
    color: var(--ke-text-muted);
}

.ke-entry-name {
    flex: 1;
    font-weight: 600;
    line-height: 1.25;
}

.ke-entry-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}

.ke-entry-tables .dxbl-btn {
    min-height: 48px;
    font-weight: 600;
}

.ke-entry-tables .dxbl-btn.ke-scope-current {
    --dxbl-btn-bg: var(--ke-red);
    --dxbl-btn-border-color: var(--ke-red);
    --dxbl-btn-color: #fff;
}

.ke-entry-line-total {
    font-size: 17px;
    font-weight: 700;
}

/* the options popup */
.ke-entry-options-form {
    display: grid;
    gap: 14px;
}

.ke-entry-options-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ke-entry-qty {
    width: 90px;
    flex: none;
}

.ke-entry-options-row label {
    white-space: nowrap;
}

.ke-entry-option {
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    padding: 8px 12px 12px;
    margin: 0;
}

.ke-entry-option legend {
    padding: 0 4px;
    font-size: 14px;
}

.ke-entry-option-missing {
    border-color: var(--ke-red);
}

.ke-entry-option-values {
    flex-wrap: wrap;
}

.ke-entry-option-values .dxbl-btn, .ke-ticket-line-buttons .dxbl-btn {
    --dxbl-btn-bg: var(--ke-surface);
    --dxbl-btn-border-color: var(--ke-border);
    --dxbl-btn-color: var(--ke-text);
    font-weight: 600;
}

.ke-entry-option-values .dxbl-btn.ke-scope-current {
    --dxbl-btn-bg: var(--ke-red);
    --dxbl-btn-border-color: var(--ke-red);
    --dxbl-btn-color: #fff;
    --dxbl-btn-hover-bg: var(--ke-red-dark);
    --dxbl-btn-hover-color: #fff;
}

/* the customer popup */
.ke-entry-customer {
    display: grid;
    gap: 12px;
}

.ke-entry-popup-buttons {
    margin-top: 8px;
}

/* the ticket */
.ke-ticket {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
    min-height: 0;
}

.ke-ticket-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ke-ticket-rows {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 8px 10px;
}

.ke-ticket-caption {
    align-self: start;
    padding-top: 7px;
    color: var(--ke-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.ke-ticket-who {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ke-ticket .ke-scope {
    flex-wrap: wrap;
    gap: 4px;
}

.ke-ready-time {
    width: 96px;
}

.ke-ready-time.ke-scope-current {
    --dxbl-text-edit-border-color: var(--ke-red);
    border-color: var(--ke-red);
}

.ke-ticket-lines {
    flex: 1 1 0;
    min-height: 120px;
    position: relative;
}

.ke-ticket-lines > .ke-ticket-list {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 6px;
}

/* the lines aren't chosen: no selection or hover colour */
.ke-ticket-lines .dxbl-list-box-item {
    padding: 0 10px;
    cursor: default;
}

.ke-ticket-lines .dxbl-list-box-item:hover,
.ke-ticket-lines .dxbl-list-box-item.dxbl-active {
    background: none;
}

.ke-ticket-nolines {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 12px;
    color: var(--ke-text-muted);
    border: 1px dashed var(--ke-border);
    border-radius: 6px;
}

.ke-ticket-line {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ke-border);
}

.ke-ticket-line:last-child {
    border-bottom: none;
}

.ke-line-qty, .ke-line-name {
    font-weight: 600;
}

.ke-line-price {
    font-weight: 600;
    text-align: right;
}

.ke-ticket-line .ke-muted {
    font-size: 13px;
}

.ke-ticket-line-buttons {
    grid-column: 2 / 4;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.ke-ticket-line-buttons .dxbl-btn {
    min-width: 32px;
}

.ke-ticket-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ke-ticket-total strong {
    font-size: 22px;
}

.ke-ticket-paid {
    justify-self: start;
}

.ke-ticket-actions {
    display: grid;
    gap: 8px;
}

.dxbl-btn.ke-ticket-place {
    min-height: 44px;
    font-size: 16px;
}

/* a page that fills the window under the header (FillHeight): its parts scroll themselves */
.ke-shell-fill {
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ke-shell-fill .ke-page {
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
}

.ke-page-fill {
    height: 100%;
}

.ke-page-fill > .dxbl-gridlayout-root > div,
.ke-entry > .dxbl-gridlayout-root > div {
    min-height: 0;
}

.ke-entry {
    height: 100%;
}

.ke-entry-groups {
    max-height: 100%;
    overflow-y: auto;
    align-content: start;
}

.ke-entry-products {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ke-entry-products .ke-entry-tiles {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding: 2px 4px 2px 2px;
}

/* ---- the account pages (Identity), in the card in the middle ---- */

.ke-centered {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.ke-message {
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 14px 0;
}

.ke-message-success { background: #E3F4E6; color: var(--ke-green-dark); }
.ke-message-warning { background: #FFF3CD; color: var(--ke-amber); }
.ke-message-danger { background: var(--ke-red-light); color: var(--ke-red-darker); }

.ke-message p:last-child {
    margin-bottom: 0;
}

.ke-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: var(--ke-text-muted);
    font-size: 12px;
}

.ke-or::before, .ke-or::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--ke-border);
}

.ke-account-manage {
    display: grid;
    /* one column that fits the card: the tabs scroll instead of widening it */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.ke-account-tabs {
    margin: 4px 0 8px 0;
}

.ke-account-section {
    margin-top: 8px;
}

.ke-account-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.ke-account-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ke-account-buttons form {
    display: contents;
}

.ke-account-buttons .dxbl-btn.ke-wide {
    width: auto;
    flex: 1 1 0;
}

.ke-account {
    min-width: 0;
}

.ke-account-steps {
    padding-left: 20px;
    margin: 0;
    display: grid;
    gap: 8px;
}

.ke-recovery-codes {
    margin: 10px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.ke-recovery-code {
    font-size: 15px;
}

.ke-code-input input {
    font-size: 20px;
    letter-spacing: 2px;
}

.current-logins, .external-logins {
    display: grid;
    gap: 8px;
}

.current-logins-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* the customer search of KwikEat.Controls (shared with the public site), without Bootstrap's helpers */
.ke-entry-customer .d-flex {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- People (settings): who works for the shop, one row each ---- */
.ke-crew {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ke-crew-row {
    display: grid;
    /* the same columns on every row, so the roles and buttons line up */
    grid-template-columns: minmax(0, 1fr) 160px 330px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ke-border);
}

.ke-crew-owner {
    grid-template-columns: minmax(0, 1fr);
}

.ke-crew-add {
    border-bottom: none;
    padding-top: 12px;
}

.ke-crew-who {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ke-crew-who .ke-badge {
    margin-right: 6px;
}

.ke-crew-disabled .ke-crew-who strong {
    color: var(--ke-text-muted);
    text-decoration: line-through;
}

.ke-crew-actions {
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .ke-crew-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .ke-crew-actions {
        justify-content: flex-start;
    }
}

/* ---- Deliveries: the courier's list, made for a phone ---- */
.ke-deliveries {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.ke-deliveries-title {
    font-size: 16px;
    margin: 8px 0 0;
}

.ke-deliveries-empty {
    padding: 24px;
    text-align: center;
    color: var(--ke-text-muted);
}

.ke-delivery {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}

.ke-delivery-address {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.ke-delivery-address a,
.ke-delivery-phone {
    color: var(--ke-green);
    font-weight: 600;
    white-space: nowrap;
}

.dxbl-btn.ke-delivery-next {
    min-width: 140px;
    height: 44px;
    font-size: 16px;
}

/* the restaurant to collect a delivery from */
.ke-delivery-shop {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ke-border);
    font-size: 13px;
}

/* ---- End of day ---- */
.ke-days {
    display: flex;
    flex-direction: column;
}

.ke-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 8px;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--ke-border);
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.ke-day:hover {
    background: #F4EEE6;
}

.ke-day-current {
    background: var(--ke-secondary);
}

.ke-day-date {
    font-weight: 600;
}

.ke-day-takings {
    text-align: right;
}

.ke-day-state {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--ke-text-muted);
}

.ke-day-open {
    color: var(--ke-amber);
    font-weight: 600;
}

.ke-day-closed {
    color: var(--ke-green);
}

.ke-cash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 10px 12px;
    align-items: center;
    margin-bottom: 12px;
}

.ke-cash-amount {
    text-align: right;
}

.ke-cash-short {
    color: var(--ke-red);
}

.ke-cash-over {
    color: var(--ke-amber);
}

.ke-cash-even {
    color: var(--ke-green);
}

.ke-cash-close {
    margin-top: 12px;
}

.ke-open-orders {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.ke-open-order {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--ke-border);
    color: inherit;
    text-decoration: none;
}

.ke-open-order:hover {
    background: #F4EEE6;
}

@media (max-width: 1100px) {
    .ke-endofday {
        display: flex !important;
        flex-direction: column;
    }
}

/* ---- Customers ---- */
.ke-w-320 {
    width: 320px;
}

.ke-customer-form {
    padding-top: 14px;
}

.ke-customer-buttons {
    margin-top: 16px;
}

.ke-customer-empty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px;
    text-align: center;
}

@media (max-width: 1100px) {
    .ke-customers {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
    }
}

/* ---- Order actions: cancelling, and the difference after a paid order changed ---- */
.ke-cancel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.ke-ticket-difference {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0 8px;
}

/* what a Print Connector prints */
.ke-connector-role {
    width: 150px;
}

/* the board's orders couldn't be read */
.ke-board-error {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}