/* CRM presentation reference. Loaded only by BackOffice pages.
   Existing semantic HTML, Bootstrap drawers and jQuery workflows are retained. */
:root {
    --bo-purple: #2463c7;
    --bo-purple-dark: #194fa8;
    --bo-gold: #edf3fd;
    --bo-ink: #253247;
    --bo-muted: #617088;
    --bo-bg: #eef2f6;
    --bo-line: #dfe5ed;
    --surface-soft: #f5f7fb;
}

.backoffice-body, .bo-auth-body {
    background: #eef2f6;
    color: #253247;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
}

.bo-sidebar {
    background: #19263c;
    border-color: #19263c;
    color: #b6c2d4;
}

.bo-brand {
    background: #fff;
    border-color: #dfe5ed;
}

.bo-nav-group { border-color: #ffffff18; }
.bo-group-trigger, .bo-dashboard-link, .bo-group-links a,
.bo-group-links button {
    color: #b6c2d4 !important;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
}

.bo-group-trigger:hover, .bo-dashboard-link:hover,
.bo-group-links a:hover, .bo-group-links button:hover {
    background: #ffffff09;
    color: #fff !important;
}

.bo-group-trigger[aria-expanded="true"], .bo-group-trigger.active,
.bo-dashboard-link.active {
    background: #2463c7;
    color: #fff !important;
}

.bo-group-links a.active, .bo-group-links button.active {
    background: #ffffff10;
    color: #fff !important;
    box-shadow: inset 3px 0 #ffdf01;
}

.bo-group-links > a > i:first-child,
.bo-group-links a.active > i:first-child { color: #a7b7cd; }
.bo-maintenance { border-color: #ffffff25 !important; color: #b6c2d4 !important; }
.bo-maintenance:hover, .bo-maintenance.active {
    background: #ffffff10 !important;
    color: #fff !important;
}
.bo-maintenance-icon { background: #ffffff12; color: #a7b7cd; }
.bo-maintenance-copy strong { font-size: 13px; }

.bo-workspace, .bo-content { background: #eef2f6; }
.bo-topbar, .bo-header { background: #fff; border-color: #dfe5ed; }
.bo-page-title, .bo-topbar h1, .bo-header h1 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #253247;
}

.bo-card, .bo-panel, .bo-table-wrap, .bo-auth-card {
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 5px;
    box-shadow: 0 1px 2px #13243a03;
}
.bo-panel { padding: 20px; }
.bo-panel-header h2, .bo-panel-header h3 { font-size: 16px; font-weight: 600; }
.bo-crm-filter-bar { background: #fff; border: 1px solid #dfe5ed; border-radius: 5px; }
.bo-crm-filter-bar label { color: #617088; font-size: 13px; font-weight: 500; }

/* Shared forms, including authentication and dedicated account popups. */
.form-label, .bo-form-label { font-size: 14px; font-weight: 500; color: #253247; margin-bottom: 7px; }
.form-control, .form-select, .bo-record-drawer .form-control,
.bo-record-drawer .form-select, .bo-auth-card .form-control,
dialog .form-control, dialog .form-select {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #d3dce8;
    border-radius: 4px;
    background-color: #fff;
    color: #253247;
    font-size: 14px;
    font-weight: 400;
}
.form-control:focus, .form-select:focus {
    border-color: #83a9e4;
    box-shadow: 0 0 0 .15rem #2463c71a;
}
.form-control::placeholder { color: #738094; opacity: 1; }
.form-check-input:checked { background-color: #2463c7; border-color: #2463c7; }
.form-check-label, .invalid-feedback { font-size: 14px; }
.text-muted, .bo-drawer-form .text-muted { color: #617088 !important; font-size: 13px; }

.bo-primary-button, .bo-secondary-button, .bo-auth-card button[type="submit"] {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}
.bo-primary-button, .bo-auth-card button[type="submit"] {
    color: #fff;
    background: #2463c7;
    border-color: #2463c7;
}
.bo-primary-button:hover, .bo-primary-button:focus,
.bo-auth-card button[type="submit"]:hover {
    background: #194fa8;
    border-color: #194fa8;
    color: #fff;
}
.bo-secondary-button { color: #506077; border-color: #ced7e3; background: #fff; }
.bo-secondary-button:hover { background: #edf2f8; border-color: #bcc8d8; color: #253247; }
.bo-crm-filter-bar input, .bo-crm-filter-bar select,
.bo-crm-filter-bar button, .bo-crm-filter-bar .bo-primary-button,
.bo-crm-filter-bar .bo-secondary-button { height: 42px; min-height: 42px; }

/* CRM tables use visible vertical separators and quiet row hover feedback. */
.bo-table { font-size: 14px; color: #253247; margin: 0; }
.bo-table th {
    background: #f5f7fb;
    color: #617088;
    font-size: 13px;
    font-weight: 600;
    padding: 13px 12px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
.bo-table th, .bo-table td {
    border-right: 1px solid #dfe5ed;
    border-bottom: 1px solid #dfe5ed;
}
.bo-table th:last-child, .bo-table td:last-child { border-right: 0; }
.bo-table td { padding: 12px; line-height: 1.5; font-size: 14px; color: #253247; }
.bo-table tbody tr:last-child td { border-bottom: 0; }
.bo-table tbody tr:hover td { background: #f0f5fd; }
.bo-table td:first-child { font-weight: 500; }
.bo-row-actions .bo-table-action, .bo-table-action {
    width: 30px;
    min-width: 30px;
    flex-basis: 30px;
    height: 30px;
    min-height: 30px;
    border: 1px solid #e0e6ee;
    border-radius: 3px;
    background: #fff;
    color: #617088;
    font-size: 13px;
}
.bo-table-action:hover { background: #e9f1fd; border-color: #aac3e9; color: #2463c7; }
.bo-table-action[data-delete]:hover { color: #bd3b4a; border-color: #e6b1b7; background: #fff3f4; }
.bo-grid-status { border-radius: 3px; font-size: 12px; font-weight: 500; }
.bo-grid-status[data-status="available"], .bo-grid-status[data-status="paid"] {
    color: #237044;
    background: #edf8f0;
    border-color: #b9d9c4;
}

.bo-record-drawer { --bs-offcanvas-width: 520px; background: #fff; }
.bo-record-drawer .offcanvas-header {
    padding: 20px 24px;
    border-bottom: 1px solid #dfe5ed;
    background: #f7f9fc;
}
.bo-record-drawer .offcanvas-header small { color: #617088; font-size: 11px; letter-spacing: 1px; }
.bo-record-drawer h2 { font-size: 18px; font-weight: 600; color: #253247; }
.bo-record-drawer .offcanvas-body { padding: 24px; }
.bo-drawer-actions {
    justify-content: flex-end;
    gap: 10px;
    background: #f7f9fc;
    margin: 24px -24px -24px;
    padding: 16px 24px;
    border-top: 1px solid #dfe5ed;
}
.bo-drawer-actions button { min-height: 40px; font-size: 14px; }
.backoffice-body dialog, .bo-auth-body dialog {
    border: 1px solid #dfe5ed;
    border-radius: 6px;
    color: #253247;
    box-shadow: 0 15px 45px #101f3540;
    font-size: 14px;
}
.backoffice-body dialog h2, .bo-auth-body dialog h2 { font-size: 18px; font-weight: 600; }
.bo-footer { border-color: #dfe5ed; color: #617088; font-size: 13px; }

@media (max-width: 600px) {
    .bo-record-drawer { --bs-offcanvas-width: 100%; }
    .bo-record-drawer .offcanvas-header, .bo-record-drawer .offcanvas-body { padding: 20px; }
    .bo-drawer-actions { margin: 24px -20px -20px; padding: 16px 20px; }
    .bo-drawer-actions button { flex: 1 1 auto; }
}

/* Settings assets and simplified live Eastern clock. */
.bo-brand-asset { border: 1px solid #dfe5ed; border-radius: 5px; padding: 18px; height: 100%; }
.bo-brand-preview { display: flex; align-items: center; justify-content: center; height: 140px; margin: 12px 0 18px; background: #f5f7fb; border: 1px solid #dfe5ed; border-radius: 4px; }
.bo-brand-preview-dark { background: #19263c; }
.bo-brand-preview img { max-width: 90%; max-height: 115px; object-fit: contain; }
.bo-hours-table { width: 100%; }
.bo-hours-table .mb-3 { margin: 0 !important; }
.bo-hours-table .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bo-hours-table input[type="time"] { min-width: 130px; }
.bo-topbar .bo-time-zone { display: flex; flex-direction: column; min-width: 140px; }
.bo-clock-time { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
    .bo-topbar { flex-wrap: wrap; }
    .bo-topbar-actions { flex-wrap: wrap; gap: 12px; }
    .bo-topbar .bo-time-zone { min-width: 120px; }
}

/* Keep the live date, time and last-order countdown together on one line. */
.bo-topbar .bo-time-zone {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: #253247;
}
.bo-topbar .bo-time-zone strong { font-size: 11px; color: #237044; letter-spacing: .6px; }
.bo-topbar .bo-clock-date, .bo-topbar .bo-clock-time,
.bo-topbar .bo-order-countdown { font-size: 16px; color: #253247; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bo-topbar .bo-order-countdown { margin-left: 3px; padding-left: 12px; border-left: 1px solid #ced7e3; color: #2463c7; }
@media (max-width: 600px) {
    .bo-topbar .bo-time-zone { flex: 1 0 100%; gap: 7px; overflow-x: auto; padding-bottom: 3px; }
    .bo-topbar .bo-clock-date, .bo-topbar .bo-clock-time,
    .bo-topbar .bo-order-countdown { font-size: 14px; }
}

/* Header utility groups: one readable clock, a quiet cutoff badge and paired links. */
.bo-topbar { flex-wrap: wrap; row-gap: 16px; padding: 18px 24px; }
.bo-topbar-start { flex: 0 0 auto; }
.bo-topbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.bo-live-clock { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bo-topbar .bo-time-zone { flex: 0 0 auto; gap: 10px; overflow: visible; padding: 0; }
.bo-topbar .bo-time-zone strong { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; line-height: 1; letter-spacing: .8px; }
.bo-topbar .bo-time-zone strong::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #309763; }
.bo-topbar .bo-clock-date { color: #617088; font-size: 15px; }
.bo-topbar .bo-clock-time { font-size: 16px; font-weight: 600; color: #253247; }
.bo-topbar .bo-order-countdown { display: inline-flex; align-items: center; margin: 0; padding: 7px 10px; border: 1px solid #dce7f9; border-radius: 4px; background: #edf3fd; color: #285ca6; font-size: 13px; font-weight: 500; white-space: nowrap; }
.bo-open-links { display: flex; align-items: center; gap: 8px; }
.bo-topbar .bo-store-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 10px; margin: 0; border: 1px solid #d3dce8; border-radius: 4px; color: #506077; background: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.bo-topbar .bo-store-link:hover { background: #edf3fd; border-color: #aac3e9; color: #2463c7; }
.bo-topbar .bo-store-link i { margin: 0; font-size: 11px; }
@media (max-width: 1199px) {
    .bo-topbar-actions { justify-content: flex-start; }
    .bo-live-clock { gap: 10px; }
}
@media (max-width: 767px) {
    .bo-topbar { padding: 16px 18px; }
    .bo-topbar-actions { width: 100%; margin-left: 0; gap: 14px; }
    .bo-live-clock { flex: 1 1 100%; }
    .bo-topbar .bo-time-zone { flex: 0 0 auto; }
    .bo-open-links { flex: 1 1 auto; }
    .bo-user-menu-wrap { margin-left: auto; }
}

/* Let short navigation fit naturally; scroll only when its actual content requires it. */
.bo-sidebar { display: flex; flex-direction: column; overflow: hidden; }
.bo-sidebar .bo-brand { flex: 0 0 auto; }
.bo-sidebar .bo-navigation { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.bo-topbar .bo-clock-date, .bo-topbar .bo-clock-time {
    font-family: var(--bo-web-font);
    font-size: 16px;
    font-weight: 500;
    color: #253247;
    line-height: 1.5;
}

/* Product rows use the Bootstrap gutter once, without stacked field margins. */
.bo-drawer-form[data-editor="product"] .bo-drawer-fields > .row { --bs-gutter-y: 16px; }
.bo-drawer-form[data-editor="product"] .bo-product-field { margin-bottom: 0; }
.bo-drawer-form[data-editor="product"] [data-form-note]:empty { display: none; }
.bo-drawer-form[data-editor="product"] .row > div > p { margin-bottom: 0; }

/* Multi-item pairing checklist. */
.bo-pair-options { max-height: 360px; overflow-y: auto; border: 1px solid #dfe5ed; border-radius: 4px; padding: 16px; }
.bo-pair-options legend { float: none; width: auto; padding: 0 5px; }
.bo-pair-option { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; }

/* Product serial numbers and bulk category assignment. */
.bo-product-bulk-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; margin-bottom: 18px; background: #fff; border: 1px solid #dfe5ed; border-radius: 5px; }
.bo-product-bulk-bar > strong { align-self: center; font-size: 14px; min-width: 80px; }
.bo-product-bulk-bar .form-select { width: 210px; }
.bo-product-bulk-bar .small { flex: 1 1 250px; align-self: center; }
.bo-table .bo-selection-column, .bo-table .bo-serial-column { width: 1%; white-space: nowrap; text-align: center; }
.bo-table .bo-selection-column .form-check-input { margin: 0; }
@media (max-width: 600px) { .bo-product-bulk-bar .form-select { width: 100%; } .bo-product-bulk-bar > div { flex: 1 1 100%; } }

/* Bulk category fields are revealed only by an explicit Edit action. */
.bo-product-bulk-bar[hidden], .bo-product-bulk-editor[hidden] { display: none !important; }
.bo-product-bulk-editor { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #dfe5ed; }
@media (max-width: 600px) { .bo-product-bulk-editor > div { flex: 1 1 100%; } }

/* Unified order record layout. */
.bo-order-unified .bo-panel { margin-bottom: 0; }
.bo-order-payment { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bo-order-payment dt, .bo-order-payment dd { margin: 0; overflow-wrap: anywhere; }
.bo-order-unified #status-form { margin-top: 0 !important; border-top: 0 !important; }
.bo-order-unified #status-form > div { width: 100%; }

.bo-activity-audience { display: block; margin-bottom: 5px; color: #617088; font-size: 12px; }
#manage-order-form .form-label { font-weight: 500; }

/* Kitchen order console: overview and tabs stay in view as each pane scrolls. */
body[data-page="orders/detail"] .bo-workspace { height: 100dvh; min-height: 0; }
body[data-page="orders/detail"] .bo-topbar,
body[data-page="orders/detail"] .bo-footer { flex-shrink: 0; }
body[data-page="orders/detail"] .bo-content { flex: 1 1 auto; min-height: 0; display: flex; padding: 18px 24px; }
.bo-order-console { display: flex; flex-direction: column; width: 100%; min-height: 0; background: #fff; border: 1px solid #d8e0ea; border-radius: 8px; overflow: hidden; }
.bo-order-strip { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; padding: 20px 24px; background: #f4f7fb; border-bottom: 1px solid #d8e0ea; }
.bo-order-identity { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bo-order-identity h2 { margin: 0; font-size: 22px; font-weight: 700; }
.bo-order-identity .badge { font-size: 14px; padding: 8px 10px; }
.bo-order-label { display: block; font-size: 12px; text-transform: uppercase; font-weight: 700; color: #4e5c71; }
.bo-order-pickup [data-detail-pickup] { margin: 0; font-size: 20px; font-weight: 700; color: #16263e; }
.bo-order-pickup [data-kitchen-position] { margin: 2px 0 0; }
.bo-order-action { margin-left: auto; }
.bo-order-action .btn { min-height: 48px; font-size: 16px; font-weight: 600; }
.bo-order-action p:empty { display: none; }
.bo-order-tabs { flex-wrap: nowrap; flex-shrink: 0; padding: 0 16px; overflow-x: auto; }
.bo-order-tabs .nav-link { padding: 15px 22px; font-size: 16px; font-weight: 600; color: #43536b; border-radius: 0; white-space: nowrap; }
.bo-order-tabs .nav-link.active { color: #1559ba; border-color: transparent transparent #1559ba; border-bottom-width: 3px; }
.bo-order-panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px; }
.bo-order-panes .tab-pane { padding: 0; border: 0; box-shadow: none; }
.bo-order-panes #order-items > .row { --bs-gutter-y: 8px; margin-bottom: 16px; }
.bo-order-panes #order-items p { margin-bottom: 4px; }
.bo-order-panes #order-items [data-detail-notes] { border-left: 3px solid #e4a424; padding: 8px 12px; background: #fff7e5; color: #463414; }
.bo-order-panes .bo-table td { font-size: 16px; padding-top: 12px; padding-bottom: 12px; }
.bo-order-panes [data-field="quantity"] { font-weight: 700; font-size: 20px; }
.bo-order-panes #manage-order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; max-width: 1000px; }
.bo-order-panes #manage-order-form > div { margin: 0 !important; }
.bo-order-panes #manage-order-form > p,
.bo-order-panes #manage-order-form > .d-flex { grid-column: 1 / -1; }
.bo-order-panes .bo-order-payment { max-width: 700px; gap: 16px; font-size: 16px; }
@media (max-width: 767px) {
 body[data-page="orders/detail"] .bo-content { padding: 12px; }
 .bo-order-strip { padding: 14px; gap: 12px; }
 .bo-order-action { margin-left: 0; width: 100%; }
 .bo-order-action .btn { width: 100%; }
 .bo-order-tabs { padding: 0; }
 .bo-order-tabs .nav-link { padding: 12px 16px; }
 .bo-order-panes { padding: 16px; }
 .bo-order-panes #manage-order-form { grid-template-columns: 1fr; }
}

/* Final order card hierarchy: identity, dishes, timer, contact, actions. */
.bo-order-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.bo-order-card { display: flex; flex-direction: column; padding: 22px; background: #fff; border: 1px solid #cbd5e3; border-radius: 12px; box-shadow: 0 4px 14px #17345c09; }
.bo-order-card[hidden], [data-order-list][hidden], [data-order-cards][hidden] { display: none !important; }
.bo-order-card-top, .bo-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-order-card-top { flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid #e1e7ef; }
.bo-card-order-number { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bo-card-order-number > strong { font-size: 16px; font-weight: 700; color: #172b46; }
.bo-card-item-count { font-size: 13px; color: #34445b; font-weight: 600; padding: 4px 7px; border-radius: 5px; background: #edf1f6; white-space: nowrap; }
.bo-order-card-top .bo-grid-status { font-size: 14px; font-weight: 700; padding: 7px 10px; }
.bo-order-countdown { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.2; font-weight: 750; color: #1559ba; margin: 24px 0 10px; font-variant-numeric: tabular-nums; }
.bo-order-countdown.is-overdue { color: #ae3026; }
.bo-card-main-dish { margin: 20px 0 8px; color: #16263e; font-size: 23px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.bo-card-items { color: #34445b; line-height: 1.6; font-size: 15px; margin-bottom: 0; }
.bo-order-card .bo-order-countdown { margin: auto 0 16px; padding: 20px 0 0; }
.bo-order-card [data-countdown-value] { display: block; font-size: clamp(26px, 2.1vw, 34px); font-weight: 750; letter-spacing: -0.6px; }
.bo-order-card [data-countdown-label] { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; margin-top: 5px; color: #455873; }
.bo-card-bottom { border-top: 1px solid #dce3ed; padding-top: 16px; }
.bo-card-bottom > strong { font-size: 21px; color: #172b46; font-variant-numeric: tabular-nums; }
.bo-card-bottom .btn { padding: 9px 20px; font-weight: 600; border-radius: 6px; }
.bo-order-view { align-self: flex-end; }
.bo-order-log { border-top: 1px solid #d8e0ea; margin-top: 24px; padding-top: 22px; }
@media (max-width: 1450px) { .bo-order-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .bo-order-cards { grid-template-columns: 1fr; } }
.bo-detail-countdown { margin: 0; font-size: 24px; }

/* Keep the card's status and quick change control together. */
.bo-card-status-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bo-card-change { padding: 5px 0; font-size: 14px; font-weight: 600; }
#order-quick-change .form-label { font-weight: 600; }

/* Customer contact follows the live pickup counter. */
.bo-card-customer { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; font-size: 15px; color: #172b46; }
.bo-card-customer a { color: #1559ba; width: fit-content; }
.bo-order-card .bo-order-countdown { margin-bottom: 14px; }

/* Terminal states take priority; overdue active orders always show red. */
.bo-order-card[data-card-state="preparing"] { background: #fff3bd; border-color: #d3b64e; }
.bo-order-card[data-card-state="ready"] { background: #e4f4e6; border-color: #9bc5a1; }
.bo-order-card[data-card-state="late"] { background: #fce0df; border-color: #d69592; }
.bo-order-card[data-card-state="collected"] { background: #e8ebef; border-color: #b8c0cb; }
.bo-order-card[data-card-state="cancelled"] { background: #171b22; border-color: #171b22; color: #fff; }
.bo-order-card[data-card-state="cancelled"] .bo-card-order-number > strong,
.bo-order-card[data-card-state="cancelled"] .bo-card-main-dish,
.bo-order-card[data-card-state="cancelled"] .bo-card-items,
.bo-order-card[data-card-state="cancelled"] .bo-order-countdown,
.bo-order-card[data-card-state="cancelled"] .bo-card-customer,
.bo-order-card[data-card-state="cancelled"] .bo-card-customer a,
.bo-order-card[data-card-state="cancelled"] .bo-card-bottom > strong,
.bo-order-card[data-card-state="cancelled"] .bo-card-change { color: #fff; }
.bo-order-card[data-card-state="cancelled"] .bo-order-card-top,
.bo-order-card[data-card-state="cancelled"] .bo-card-bottom { border-color: #505866; }
.bo-order-card[data-card-state="cancelled"] .bo-grid-status,
.bo-order-card[data-card-state="cancelled"] .bo-card-item-count { background: #384150; color: #fff; }

/* White header and footer bands frame the status-colored card body. */
.bo-order-card { overflow: hidden; }
.bo-order-card .bo-order-card-top { margin: -22px -22px 0; padding: 16px 22px; background: #fff; }
.bo-order-card .bo-card-bottom { margin: 0 -22px -22px; padding: 16px 22px; background: #fff; }
.bo-order-card[data-card-state="cancelled"] .bo-card-order-number > strong,
.bo-order-card[data-card-state="cancelled"] .bo-card-bottom > strong { color: #172b46; }
.bo-order-card[data-card-state="cancelled"] .bo-card-change { color: #1559ba; }
.bo-order-card[data-card-state="cancelled"] .bo-order-card-top,
.bo-order-card[data-card-state="cancelled"] .bo-card-bottom { border-color: #dce3ed; }

/* Completed-order visibility controls wrap with the existing filters. */
.bo-order-visibility { padding-bottom: 10px; font-size: 14px; color: #25364f; }
.bo-order-visibility .form-check-label { white-space: nowrap; }

/* Group preview selector is independent of the authenticated account. */
.bo-view-as { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bo-view-as label { font-size: 13px; color: #43536b; white-space: nowrap; font-weight: 600; }
.bo-view-as .form-select { width: 132px; min-height: 38px; font-size: 14px; border-color: #bdcadd; border-radius: 6px; }
.bo-navigation [hidden], .bo-view-restricted[hidden], #bo-content[hidden] { display: none !important; }
.bo-view-restricted { margin: 28px; padding: 28px; background: #fff; border: 1px solid #ccd6e3; border-radius: 8px; }
.bo-view-restricted h2 { font-size: 22px; }
body[data-view-as="Kitchen"] [data-order-card] [data-field="total"],
body[data-view-as="Kitchen"][data-page="orders"] [data-order-list] th:nth-child(4),
body[data-view-as="Kitchen"][data-page="orders"] [data-order-list] td:nth-child(4),
body[data-view-as="Kitchen"][data-page="orders/detail"] #order-items th:nth-child(3),
body[data-view-as="Kitchen"][data-page="orders/detail"] #order-items th:nth-child(4),
body[data-view-as="Kitchen"][data-page="orders/detail"] #order-items td[data-field="price"],
body[data-view-as="Kitchen"][data-page="orders/detail"] #order-items td[data-field="amount"],
body[data-view-as="Kitchen"] #order-payment { display: none !important; }
@media (max-width: 600px) { .bo-view-as { justify-content: space-between; } .bo-view-as .form-select { width: 128px; } }

.bo-email-preview { max-width: 760px; }

/* Product grids use the available workspace with compact outer gutters. */
body[data-module="products"] .bo-content { width: 100%; max-width: none; padding: 16px 18px; }
body[data-module="products"] .bo-crm-filter-bar { padding: 12px 14px; gap: 12px; margin-bottom: 14px; }
body[data-module="products"] .bo-table th,
body[data-module="products"] .bo-table td { padding: 11px 10px; }
body[data-module="products"] .bo-grid-pagination { margin-top: 12px; }
@media (max-width: 600px) { body[data-module="products"] .bo-content { padding: 12px; } }

/* Keep module actions visible while long forms scroll independently. */
.bo-record-drawer .offcanvas-header { flex-shrink: 0; padding: 16px 20px; }
.bo-record-drawer .offcanvas-body {
    display: flex;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.bo-record-drawer .bo-drawer-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
}
.bo-drawer-fields {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.bo-record-drawer .bo-drawer-actions {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid #dfe5ed;
    background: #f7f9fc;
}

/* Use the full workspace and reduce outer gutters across all modules. */
body.backoffice-body .bo-workspace > .bo-content {
    width: 100%;
    max-width: none;
    padding: 14px 16px;
}
.bo-topbar { min-height: 72px; padding: 12px 16px; row-gap: 10px; }
.bo-welcome { margin-bottom: 12px; }
@media (max-width: 600px) {
    body.backoffice-body .bo-workspace > .bo-content { padding: 10px 12px; }
    .bo-topbar { padding: 12px; }
    .bo-drawer-fields { padding: 16px; }
    .bo-record-drawer .bo-drawer-actions { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Sorting controls retain the table heading's typography and spacing. */
.bo-column-sort { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bo-column-sort i { font-size: 11px; opacity: .55; }
th[aria-sort="ascending"] .bo-column-sort i,
th[aria-sort="descending"] .bo-column-sort i { opacity: 1; color: #2463c7; }
th[aria-sort="ascending"] .bo-column-sort i::before { content: "\f0de"; }
th[aria-sort="descending"] .bo-column-sort i::before { content: "\f0dd"; }
.bo-column-sort:focus-visible { outline: 2px solid #2463c7; outline-offset: 4px; }
.bo-bulk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 600px) { .bo-bulk-fields { grid-template-columns: 1fr; } }

/* Fulfillment badges distinguish the two preparation areas. */
.bo-fulfillment-cell { color: #175f46; font-weight: 600; white-space: nowrap; }
.bo-fulfillment-cell::before { content: "\f06d"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 7px; }
.bo-fulfillment-cell.is-sweet-shop { color: #8b3a77; }
.bo-fulfillment-cell.is-sweet-shop::before { content: "\f54e"; }

/* Chef hat marks kitchen fulfillment; the Sweet Shop keeps its store icon. */
.bo-fulfillment-cell:not(.is-sweet-shop)::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url('/assets/chef-hat.svg') center / contain no-repeat;
    mask: url('/assets/chef-hat.svg') center / contain no-repeat;
}

/* Radio tiles keep fulfillment mutually exclusive and keyboard accessible. */
.bo-fulfillment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bo-fulfillment-tile { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 12px; border: 1px solid #b9c6d7; border-radius: 6px; background: #fff; color: #43536b; font-weight: 600; cursor: pointer; }
.bo-fulfillment-tile i { font-size: 22px; }
.btn-check:checked + .bo-fulfillment-tile { border: 2px solid #2463c7; background: #edf3fd; color: #194fa8; }
.btn-check:focus-visible + .bo-fulfillment-tile { outline: 3px solid #8cb6ef; outline-offset: 2px; }

/* Numbered pagination moves through groups of ten pages. */
.bo-grid-pagination > div, .bo-page-numbers { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.bo-page-numbers .bo-pagination-button { min-width: 34px; padding: 6px 9px; }
.bo-page-numbers [aria-current="page"] { background: #2463c7; border-color: #2463c7; color: #fff; font-weight: 600; }
.bo-grid-pagination [hidden] { display: none !important; }
@media (max-width: 600px) { .bo-page-numbers { flex-basis: 100%; order: 2; } .bo-grid-pagination .bo-pagination-current { font-size: 12px; } }

/* Consistent, readable interaction states throughout BackOffice. */
.backoffice-body .btn-primary,
.bo-auth-body .btn-primary { color: #fff; background: #2463c7; border-color: #2463c7; }
.backoffice-body .btn-primary:hover,
.backoffice-body .btn-primary:focus-visible,
.bo-auth-body .btn-primary:hover { color: #fff; background: #194fa8; border-color: #194fa8; }
.backoffice-body .btn-outline-primary:hover,
.backoffice-body .btn-outline-primary:focus-visible,
.backoffice-body .btn-outline-primary.active { background: #2463c7; border-color: #2463c7; color: #fff; }
.backoffice-body .btn-outline-danger { color: #b42335; border-color: #d99ca4; background: #fff; }
.backoffice-body .btn-outline-danger:hover,
.backoffice-body .btn-outline-danger:focus-visible { background: #b42335; border-color: #b42335; color: #fff; }
.backoffice-body .btn-danger { background: #b42335; border-color: #b42335; color: #fff; }
.backoffice-body .btn-danger:hover { background: #8d1928; border-color: #8d1928; color: #fff; }
.backoffice-body .btn-outline-secondary { color: #43536b; border-color: #b9c6d7; }
.backoffice-body .btn-outline-secondary:hover { background: #e9eff7; border-color: #9daec5; color: #253247; }
.backoffice-body button:disabled { cursor: not-allowed; opacity: .55; }
.backoffice-body .btn, .bo-primary-button, .bo-secondary-button,
.bo-table-action, .bo-pagination-button { transition: background-color .15s, border-color .15s, color .15s; }
.backoffice-body button:focus-visible,
.backoffice-body a:focus-visible { outline: 3px solid #8cb6ef; outline-offset: 3px; }
.bo-group-trigger.active:hover, .bo-group-trigger[aria-expanded="true"]:hover,
.bo-dashboard-link.active:hover { background: #194fa8; color: #fff !important; }
.bo-pagination-button:hover:not(:disabled):not([aria-current="page"]) { background: #e8f0fd; border-color: #9cb9e3; color: #194fa8; }
.bo-column-sort:hover { color: #194fa8; }
.bo-topbar .bo-store-link:hover { background: #edf3fd; color: #194fa8; }
.bo-crm-filter-bar label, .bo-drawer-fields .form-label { color: #43536b; }
.bo-drawer-fields .form-control::placeholder, .bo-crm-filter-bar input::placeholder { color: #6b7789; opacity: 1; }
.bo-record-drawer .offcanvas-header h2 { margin-bottom: 0; }
.bo-record-drawer .btn-close:hover, .modal .btn-close:hover { opacity: 1; }
.backoffice-body .modal-header { padding: 16px 20px; background: #f7f9fc; border-color: #dfe5ed; }
.backoffice-body .modal-body { padding: 20px; }
.backoffice-body .modal-footer { gap: 8px; padding: 14px 20px; background: #f7f9fc; }
.backoffice-body .modal-footer .btn { min-height: 40px; }

/* Place destructive order actions after the primary Details action. */
body[data-page="orders"] .bo-card-bottom { justify-content: flex-end; flex-wrap: wrap; }
body[data-page="orders"] .bo-card-bottom > strong { margin-right: auto; }
body[data-page="orders"] .bo-card-bottom [data-delete-order] {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
}
.bo-row-actions [data-delete-order] { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
body[data-page="orders/detail"] [data-delete-order] { order: 3; align-self: flex-end; font-size: 13px; padding: 6px 10px; }
@media (prefers-reduced-motion: reduce) { .backoffice-body .btn, .bo-primary-button, .bo-secondary-button { transition: none; } }

/* Keep role-restricted controls hidden despite their component display rules. */
[data-delete-order][hidden] { display: none !important; }

body[data-page="orders/detail"] .bo-order-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body[data-page="orders/detail"] .bo-order-action [data-delete-order] { min-height: 34px; font-weight: 500; width: auto; }

/* Unified order workspace: receipt, controls and log visible together. */
.bo-unified-order { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; width: 100%; }
.bo-unified-order-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 14px 18px; margin-bottom: 14px; background: #fff; border: 1px solid #d8e0ea; border-radius: 8px; flex-shrink: 0; }
.bo-unified-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bo-unified-identity h2 { margin: 0; font-size: 19px; font-weight: 650; }
.bo-unified-pickup { display: flex; flex-direction: column; gap: 2px; }
.bo-unified-pickup > span { font-size: 12px; color: #52627a; }
.bo-unified-pickup strong { font-size: 15px; }
.bo-unified-order-header .bo-detail-countdown { margin-left: auto; font-size: 20px; font-weight: 650; color: #194fa8; }
.bo-unified-order-header [data-delete-order] { font-size: 12px; }
.bo-unified-order-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
.bo-order-receipt { min-height: 0; overflow-y: auto; padding: 24px; background: #fff; border: 1px solid #d8e0ea; border-top: 4px solid #253247; box-shadow: 0 3px 10px #25324709; }
.bo-receipt-heading { text-align: center; border-bottom: 1px dashed #b9c6d7; padding-bottom: 14px; margin-bottom: 16px; }
.bo-receipt-heading > span { color: #52627a; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.bo-receipt-heading h3 { font-size: 19px; margin: 6px 0; }
.bo-receipt-heading p { font-size: 12px; color: #52627a; margin: 0; }
.bo-receipt-customer { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.bo-receipt-customer strong { font-size: 16px; }
.bo-receipt-customer span { font-size: 13px; color: #43536b; overflow-wrap: anywhere; }
.bo-receipt-notes { border-left: 3px solid #dca534; padding: 8px 12px; background: #fff8e9; margin-bottom: 18px; }
.bo-receipt-notes > span { font-size: 11px; color: #6d562c; font-weight: 600; }
.bo-receipt-notes p { margin: 3px 0 0; font-size: 13px; }
.bo-receipt-items .bo-table { margin-bottom: 14px; }
.bo-receipt-items .bo-table th { background: #fff; padding: 10px 6px; font-size: 12px; }
.bo-receipt-items .bo-table td { padding: 10px 6px; font-size: 14px; border-left: 0; border-right: 0; }
.bo-receipt-items .bo-table th { border-left: 0; border-right: 0; }
.bo-receipt-items .bo-table td:nth-child(n+2), .bo-receipt-items .bo-table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.bo-receipt-totals, .bo-receipt-payment { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; margin: 0; }
.bo-receipt-totals { border-top: 1px dashed #aab8cb; padding-top: 14px; }
.bo-receipt-totals dt { font-weight: 500; }
.bo-receipt-totals dd, .bo-receipt-payment dd { text-align: right; margin: 0; font-variant-numeric: tabular-nums; }
.bo-receipt-totals .bo-receipt-grand-total { font-size: 20px; font-weight: 700; padding-top: 8px; margin-top: 4px; border-top: 2px solid #253247; }
.bo-receipt-payment { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #b9c6d7; font-size: 12px; color: #52627a; }
.bo-receipt-payment dd { overflow-wrap: anywhere; }
.bo-receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bo-order-operations { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 14px; }
.bo-order-status-panel { flex-shrink: 0; padding: 18px; border: 1px solid #d8e0ea; border-radius: 8px; background: #fff; }
.bo-order-status-panel h3 { font-size: 17px; margin: 0 0 14px; }
.bo-order-status-panel #manage-order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.bo-order-status-panel #manage-order-form > div { margin: 0 !important; }
.bo-order-status-panel #manage-order-form > p, .bo-order-status-panel #manage-order-form > .d-flex { grid-column: 1 / -1; }
.bo-order-status-panel #manage-order-form label { font-size: 13px; margin-bottom: 5px; }
.bo-order-status-panel #manage-order-form p.small { font-size: 11px; margin-bottom: 0; }
.bo-order-status-panel #manage-order-form #manage-order-error:empty { display: none; }
.bo-order-operations > .bo-order-log { flex: 1; min-height: 140px; overflow-y: auto; margin: 0; padding: 16px 18px; border: 1px solid #d8e0ea; border-radius: 8px; background: #fff; }
.bo-order-operations > .bo-order-log h3 { font-size: 16px; margin: 0 0 8px; }
.bo-order-operations .bo-order-log [data-update-row] { padding: 10px 0 !important; font-size: 12px; }
.bo-order-operations .bo-order-log [data-update-row] p { margin: 4px 0; }
@media (max-width: 1000px) {
 body[data-page="orders/detail"] .bo-workspace { height: auto; min-height: 100dvh; }
 .bo-unified-order-body { grid-template-columns: 1fr; }
 .bo-order-receipt, .bo-order-operations > .bo-order-log { overflow: visible; }
 .bo-order-operations > .bo-order-log { max-height: 400px; overflow-y: auto; }
 .bo-unified-order-header .bo-detail-countdown { margin-left: 0; }
}
@media (max-width: 480px) { .bo-order-receipt { padding: 18px 14px; } .bo-order-status-panel #manage-order-form { grid-template-columns: 1fr; } .bo-unified-order-header { padding: 12px; } }

.bo-unified-identity [data-detail-status] { padding: 7px 9px; font-size: 12px; border: 1px solid transparent; }
.bo-unified-identity [data-status="New"] { background: #fff !important; color: #253247 !important; border-color: #bdcadd; }
.bo-unified-identity [data-status="Preparing"] { background: #fff1ba !important; color: #685017 !important; }
.bo-unified-identity [data-status="Ready for pickup"] { background: #d6efdf !important; color: #185434 !important; }
.bo-unified-identity [data-status="Picked Up"] { background: #e3e7eb !important; color: #43536b !important; }
.bo-unified-identity [data-status="Cancelled"] { background: #202a38 !important; color: #fff !important; }
.bo-unified-order-header .bo-detail-countdown.is-overdue { color: #b42335; }

/* Compact pickup schedule and receipt identity. */
.bo-unified-order-header [data-delete-order] { margin-left: auto; }
.bo-schedule-block { flex: 1 0 100%; }
.bo-schedule-label { display: block; font-size: 16px; color: #43536b; margin-bottom: 5px; }
.bo-schedule-values { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 16px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bo-schedule-values [data-detail-pickup-time] { margin-right: 2px; }
.bo-unified-order-header .bo-schedule-values .bo-detail-countdown { margin: 0; padding-left: 14px; border-left: 1px solid #9dacc1; font: inherit; color: #253247; }
.bo-receipt-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; text-align: left; padding-bottom: 12px; margin-bottom: 12px; }
.bo-receipt-brand { display: flex; align-items: center; gap: 10px; }
.bo-receipt-brand img { width: 42px; height: 42px; object-fit: contain; }
.bo-receipt-brand strong { max-width: 150px; font-size: 14px; line-height: 1.35; }
.bo-receipt-document { margin-left: auto; text-align: right; }
.bo-receipt-document h3 { display: inline; font-size: 13px; margin: 0 8px 0 0; }
.bo-receipt-document time { font-size: 12px; color: #52627a; }
.bo-receipt-customer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.bo-receipt-customer strong { font-size: 14px; }
.bo-receipt-customer > span { display: inline-flex; align-items: center; gap: 7px; border-left: 1px solid #b9c6d7; padding-left: 12px; }
.bo-receipt-customer a { color: #43536b; text-decoration: none; font-size: 13px; }
.bo-receipt-customer a:hover { color: #194fa8; text-decoration: underline; }
.bo-receipt-customer i { font-size: 12px; color: #617088; }
.bo-receipt-items .bo-table th { background: #edf2f7; color: #43536b; }
.bo-order-receipt > .bo-receipt-notes { margin: 18px 0 0; }
.bo-order-status-panel [data-detail-save="notify"] { background: #194fa8; border-color: #194fa8; }
.bo-order-status-panel [data-detail-save="notify"]:hover { background: #123e83; }

/* Keep the operational order band on one row at desktop widths. */
.bo-unified-order-header { flex-wrap: nowrap; gap: 14px; }
.bo-unified-identity { flex-wrap: nowrap; flex-shrink: 0; }
.bo-unified-identity h2 { white-space: nowrap; }
.bo-schedule-block { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.bo-schedule-label { margin: 0; white-space: nowrap; }
.bo-schedule-values { flex-wrap: nowrap; white-space: nowrap; }
.bo-unified-order-header [data-delete-order] { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.bo-receipt-totals { border-top: 0; padding-top: 0; }
.bo-receipt-totals .bo-receipt-grand-total { border-top: 1px dashed #9dacc1; }

/* Compact receipt popup identity and aligned financial rows. */
.bo-popup-receipt-header { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 18px; align-items: start; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid #dfe5ed; }
.bo-popup-receipt-header > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bo-popup-receipt-brand img { width: 52px; height: 52px; object-fit: contain; }
.bo-popup-receipt-brand strong { font-size: 13px; }
.bo-popup-receipt-order { padding-left: 16px; border-left: 1px solid #dfe5ed; }
.bo-popup-receipt-order strong { font-size: 16px; }
.bo-popup-receipt-order time { font-size: 12px; color: #52627a; }
.bo-popup-receipt-customer { padding-left: 16px; border-left: 1px solid #dfe5ed; }
.bo-popup-receipt-customer > span { display: flex; align-items: baseline; gap: 8px; font-size: 12px; overflow-wrap: anywhere; }
.bo-popup-receipt-customer i { color: #617088; width: 14px; flex-shrink: 0; }
#order-receipt .bo-order-payment { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1.5fr); gap: 0; margin: 18px 0 0; border: 1px solid #dfe5ed; border-radius: 6px; overflow: hidden; }
#order-receipt .bo-order-payment dt, #order-receipt .bo-order-payment dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid #dfe5ed; font-size: 14px; }
#order-receipt .bo-order-payment dt { font-weight: 500; background: #f5f7fa; }
#order-receipt .bo-order-payment dd { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#order-receipt .bo-order-payment dt:nth-of-type(3), #order-receipt .bo-order-payment dd:nth-of-type(3) { background: #edf3fd; color: #194fa8; font-size: 18px; font-weight: 700; border-bottom: 2px solid #b7cbe8; }
#order-receipt .bo-order-payment dt:last-of-type, #order-receipt .bo-order-payment dd:last-of-type { border-bottom: 0; }
#order-receipt .bo-table th { background: #edf2f7; }
#order-receipt .bo-table th:nth-child(n+2), #order-receipt .bo-table td:nth-child(n+2) { text-align: right; }
@media (max-width: 1200px) { .bo-unified-order-header { overflow-x: auto; } }
@media (max-width: 640px) { .bo-popup-receipt-header { grid-template-columns: 1fr; gap: 12px; } .bo-popup-receipt-order, .bo-popup-receipt-customer { padding-left: 0; border-left: 0; } }

.bo-unified-order-header { overflow-x: auto; }

/* Print the populated receipt only, without BackOffice chrome or controls. */
@media print {
    body.bo-print-receipt { background: #fff !important; overflow: visible !important; }
    body.bo-print-receipt > :not(#order-receipt) { display: none !important; }
    body.bo-print-receipt #order-receipt { display: block !important; position: static !important; opacity: 1 !important; overflow: visible !important; height: auto !important; }
    body.bo-print-receipt #order-receipt .modal-dialog { display: block; transform: none !important; margin: 0; max-width: none; height: auto; }
    body.bo-print-receipt #order-receipt .modal-content { border: 0; box-shadow: none; height: auto; max-height: none; }
    body.bo-print-receipt #order-receipt .modal-body { overflow: visible; padding: 0; }
    body.bo-print-receipt #order-receipt .modal-header,
    body.bo-print-receipt #order-receipt .modal-footer,
    body.bo-print-receipt #order-receipt .bo-column-sort i { display: none !important; }
    body.bo-print-receipt #order-receipt .table-responsive { overflow: visible; }
    body.bo-print-receipt #order-receipt tr { break-inside: avoid; }
    body.bo-print-receipt #order-receipt { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Receipt metadata follows the contact typography in both screen and print views. */
.bo-popup-receipt-customer > strong { font-size: 16px; font-weight: 700; }
.bo-popup-receipt-order .bo-receipt-time { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #52627a; }
.bo-receipt-time > i { width: 14px; flex-shrink: 0; color: #617088; }
.bo-receipt-time time { display: block; font: inherit; }
/* Customer context sits inside the receipt column, above its first row. */
.bo-detail-customer-history { padding: 14px 12px; margin-bottom: 20px; border: 1px solid #dfe5ed; border-radius: 6px; background: #f3f6fa; }
.bo-detail-customer-history .bo-customer-history { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }
.bo-detail-customer-history .bo-customer-history > div { min-width: 0; padding-right: 12px; border-right: 1px solid #dfe5ed; }
.bo-detail-customer-history .bo-customer-history > div:last-child { border-right: 0; padding-right: 0; }
.bo-detail-customer-history .bo-customer-history span { display: block; margin-bottom: 5px; font-size: 12px; color: #52627a; }
.bo-detail-customer-history .bo-history-values { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.bo-detail-customer-history .bo-customer-history strong { font-size: 13px; }
body[data-view-as="Kitchen"] .bo-detail-customer-history { display: none; }

/* Receipt labels stay unshaded; retain the total emphasis. */
#order-receipt .bo-order-payment dt { background: transparent; }
#order-receipt .bo-order-payment dt:nth-of-type(3) { background: #edf3fd; }

/* Customer history workspace, with compact contacts and account totals. */
.bo-customer-overview { display: grid; grid-template-columns: minmax(240px, 1.3fr) minmax(300px, 1.5fr); gap: 20px; padding: 20px; margin-bottom: 16px; }
.bo-customer-back { display: inline-flex; gap: 8px; font-size: 12px; margin-bottom: 10px; }
.bo-customer-identity h2 { font-size: 22px; margin: 0 0 10px; }
.bo-customer-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bo-customer-contacts > span { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.bo-customer-contacts i { color: #617088; }
.bo-customer-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; align-self: center; }
.bo-customer-metrics > div { border-left: 1px solid #dfe5ed; padding-left: 16px; }
.bo-customer-metrics dt { font-size: 12px; color: #52627a; font-weight: 500; margin-bottom: 5px; }
.bo-customer-metrics dd { font-size: 18px; font-weight: 650; margin: 0; }
.bo-customer-transcript-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid #dfe5ed; }
.bo-customer-history-caption { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 600; margin: 16px 0 10px; }
.bo-customer-history-caption span { font-size: 12px; color: #52627a; font-weight: 400; align-self: center; }
[data-customer-link], [data-detail-customer] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[data-customer-link][aria-disabled="true"], [data-detail-customer][aria-disabled="true"] { text-decoration: none; cursor: default; }
body[data-page="customers/detail"] .bo-content { overflow-y: auto; }
@media (max-width: 800px) { .bo-customer-overview { grid-template-columns: 1fr; } .bo-customer-metrics > div:first-child { border-left: 0; padding-left: 0; } }
@media print {
    body.bo-print-customer * { visibility: hidden; }
    body.bo-print-customer, body.bo-print-customer .bo-shell, body.bo-print-customer .bo-workspace, body.bo-print-customer .bo-content { overflow: visible !important; height: auto !important; display: block !important; }
    body.bo-print-customer #customer-transcript-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
    body.bo-print-customer #customer-transcript-print, body.bo-print-customer #customer-transcript-print * { visibility: visible; }
    body.bo-print-customer #customer-transcript-print .bo-table { font-size: 10px; }
    body.bo-print-customer #customer-transcript-print tr { break-inside: avoid; }
    body.bo-print-customer #customer-transcript-print thead { display: table-header-group; }
}

/* Featured product controls and compact multi-choice label filter. */
.bo-featured-editor { display: flex; align-items: flex-end; padding-bottom: 11px; }
.bo-featured-editor .form-check { margin: 0; white-space: nowrap; font-size: 14px; }
.bo-featured-badge { display: inline-block; border-radius: 6px; padding: 4px 9px; background: #e8f4ec; color: #22663d; font-size: 12px; font-weight: 600; }
.bo-featured-badge:empty { display: none; }
.bo-label-dropdown { min-width: 230px; border: 1px solid #dce1e6; border-radius: 10px; box-shadow: 0 12px 30px #18273518; }
.bo-label-dropdown label.form-check { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 450; }
.bo-label-dropdown .form-check-input { margin-right: 8px; }
.bo-label-filter .form-select { min-width: 160px; }

/* Operational timestamps share the type treatment of the accepting-orders badge. */
.bo-topbar .bo-time-zone,
.bo-topbar .bo-clock-date,
.bo-topbar .bo-clock-time,
.bo-topbar .bo-clock-divider,
.bo-topbar [data-last-order-countdown],
.bo-unified-order-header .bo-schedule-block,
.bo-unified-order-header .bo-schedule-values,
.bo-unified-order-header .bo-schedule-label,
.bo-unified-order-header .bo-schedule-values .bo-detail-countdown {
    font-family: var(--bo-web-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.bo-topbar .bo-time-zone { display: inline-flex; flex-wrap: nowrap; gap: 7px; white-space: nowrap; }
.bo-clock-divider,.bo-pickup-divider { color: #a4adba; }
.bo-unified-order-header .bo-schedule-label { display: inline-flex; padding: 6px 9px; border: 1px solid #dce7f9; border-radius: 5px; background: #edf3fd; color: #285ca6; }
.bo-unified-order-header .bo-schedule-values { gap: 6px; }
.bo-unified-order-header .bo-schedule-values .bo-detail-countdown { border-left: 0; padding: 0; margin: 0; color: #253247; }
.bo-unified-order-header .bo-pickup-divider { margin: 0 4px; }
@media (max-width: 1000px) {
    .bo-unified-order-header { flex-wrap: wrap; }
    .bo-schedule-block { flex-wrap: wrap; }
    .bo-schedule-values { white-space: normal; flex-wrap: wrap; }
}