/* ============================================================================
   ORDERLY COMPONENTS — ods-legacy.css
   ----------------------------------------------------------------------------
   Adapters that make LEGACY markup (vendor DataTables, Element Plus tables,
   Tailwind light utilities written without dark variants) render as the
   ods.css components, in light and dark, on every back-office page at once.

   Loaded straight after ods.css. Every rule here is temporary by design: when
   a screen is rebuilt on a real component (see AGENTS.md "screen patterns"),
   its markup stops matching these selectors and the adapter falls away.
   Never add a page-specific rule here - fix the component, or rebuild the page.
   ============================================================================ */

/* ── 1. DataTables: ONE card, not four nested rounded boxes ─────────────────
   orderly-ui.js restructures every DataTable into
     .dataTables_wrapper > .odt-bar + .odt-scroll > table + .odt-foot
   and each piece had picked up its own surface and radius (24px around 18px,
   three greys), which is what broke the corners. The wrapper is now the only
   surface; everything inside it is flat on it. */
html body .dataTables_wrapper {
  background: var(--o-surface) !important;
  border: 0 !important;
  border-radius: var(--o-r-lg) !important;
  box-shadow: var(--o-elev-1) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html body .dataTables_wrapper .odt-bar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 16px 18px 12px !important;
}
html body .dataTables_wrapper .odt-scroll,
html body .dataTables_wrapper table.dataTable {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body .dataTables_wrapper table.dataTable thead th {
  background: var(--o-surface-2) !important;
  color: var(--o-text-3) !important;
  border: 0 !important;
}
html body .dataTables_wrapper table.dataTable thead tr,
html body .dataTables_wrapper table.dataTable tbody tr { border-radius: 0 !important; }
html body .dataTables_wrapper table.dataTable tbody td {
  border-top: 1px solid var(--o-surface-2) !important;
  color: var(--o-text) !important;
}
html body .dataTables_wrapper table.dataTable tbody tr:hover td { background: var(--o-surface-2) !important; }
html body .dataTables_wrapper .odt-foot {
  margin: 0 !important;
  padding: 12px 18px 14px !important;
  background: transparent !important;
}

/* The empty row spans every column and reads as one centred line, instead of
   "No data available in table" squeezed into the first column. */
html body table.dataTable td.dataTables_empty {
  width: 100% !important;
  padding: 48px 20px !important;
  text-align: center !important;
  white-space: normal !important;
  color: var(--o-text-3) !important;
  font-weight: 500 !important;
}

/* Pager: one pill per button. The <li> and its <a> were both drawn as
   circles, which is the double ring around Previous / Next. */
html body .dataTables_paginate .paginate_button.page-item,
html body .dataTables_paginate li.page-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .dataTables_paginate .page-item .page-link {
  min-width: 40px; min-height: 40px;
  border: 0 !important;
  border-radius: var(--o-r-pill) !important;
  background: var(--o-surface-2) !important;
  color: var(--o-text-2) !important;
  box-shadow: none !important;
}
html body .dataTables_paginate .page-item.active .page-link {
  background: var(--o-accent-solid) !important;
  color: #fff !important; /* ui-lint: allow - text on the orange accent */
}

/* "Processing" spinner: brand colour, not Bootstrap blue. */
html body .dataTables_processing > div > div { background: var(--o-accent) !important; }

/* A list page's own card around a DataTable: a layout box only, so the table
   card is not walled twice. */
html body .card:has(> .card-body > .dataTables_wrapper),
html body .card:has(> .dataTables_wrapper) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Element Plus card (bag reports): a flat surface, no outline, in both themes */
html body .el-card { border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-1) !important; }
html body .el-card__body { color: var(--o-text); }

/* ── 2. Element Plus tables (Suggested items, a few Vue screens) ──────────
   Element Plus ships white table cells with no dark variant. */
:root[data-orderly-theme="dark"] .el-table,
:root[data-orderly-theme="dark"] .el-table tr,
:root[data-orderly-theme="dark"] .el-table th.el-table__cell,
:root[data-orderly-theme="dark"] .el-table td.el-table__cell,
:root[data-orderly-theme="dark"] .el-table__inner-wrapper,
:root[data-orderly-theme="dark"] .el-table__empty-block {
  background: var(--o-surface) !important;
  color: var(--o-text) !important;
  border-color: var(--o-surface-2) !important;
}
:root[data-orderly-theme="dark"] .el-table th.el-table__cell { background: var(--o-surface-2) !important; color: var(--o-text-3) !important; }
:root[data-orderly-theme="dark"] .el-table .cell { color: inherit !important; }
:root[data-orderly-theme="dark"] .el-table__inner-wrapper::before { background: transparent !important; }
:root[data-orderly-theme="dark"] .el-pagination button,
:root[data-orderly-theme="dark"] .el-pager li { background: var(--o-surface-2) !important; color: var(--o-text-2) !important; }

/* ── 3. Tailwind light utilities written without dark: variants ──────────
   Dashboard tiles (bg-violet-100, bg-teal-50, bg-red-50 ...) and the AI
   "Waiting on you" rows render as pastel blocks with dark text that the dark
   theme then turns white - contrast 1.0. In dark mode a light tint becomes a
   low-opacity tint of the same hue on the surface, and slate text becomes the
   theme's text colours. */
:root[data-orderly-theme="dark"] .bg-white,
:root[data-orderly-theme="dark"] .bg-slate-50, :root[data-orderly-theme="dark"] .bg-gray-50,
:root[data-orderly-theme="dark"] .bg-zinc-50, :root[data-orderly-theme="dark"] .bg-neutral-50,
:root[data-orderly-theme="dark"] .bg-stone-50,
:root[data-orderly-theme="dark"] .bg-slate-100, :root[data-orderly-theme="dark"] .bg-gray-100 {
  background-color: var(--o-surface-2) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-amber-5"], :root[data-orderly-theme="dark"] [class*="bg-amber-10"],
:root[data-orderly-theme="dark"] [class*="bg-yellow-5"], :root[data-orderly-theme="dark"] [class*="bg-yellow-10"],
:root[data-orderly-theme="dark"] [class*="bg-orange-5"], :root[data-orderly-theme="dark"] [class*="bg-orange-10"] {
  background-color: oklch(70% 0.14 70 / .14) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-violet-5"], :root[data-orderly-theme="dark"] [class*="bg-violet-10"],
:root[data-orderly-theme="dark"] [class*="bg-purple-5"], :root[data-orderly-theme="dark"] [class*="bg-purple-10"],
:root[data-orderly-theme="dark"] [class*="bg-indigo-5"], :root[data-orderly-theme="dark"] [class*="bg-indigo-10"] {
  background-color: oklch(65% 0.15 290 / .16) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-teal-5"], :root[data-orderly-theme="dark"] [class*="bg-teal-10"],
:root[data-orderly-theme="dark"] [class*="bg-green-5"], :root[data-orderly-theme="dark"] [class*="bg-green-10"],
:root[data-orderly-theme="dark"] [class*="bg-emerald-5"], :root[data-orderly-theme="dark"] [class*="bg-emerald-10"] {
  background-color: oklch(65% 0.13 160 / .16) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-red-5"], :root[data-orderly-theme="dark"] [class*="bg-red-10"],
:root[data-orderly-theme="dark"] [class*="bg-rose-5"], :root[data-orderly-theme="dark"] [class*="bg-rose-10"],
:root[data-orderly-theme="dark"] [class*="bg-pink-5"], :root[data-orderly-theme="dark"] [class*="bg-pink-10"] {
  background-color: oklch(62% 0.18 25 / .16) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-blue-5"], :root[data-orderly-theme="dark"] [class*="bg-blue-10"],
:root[data-orderly-theme="dark"] [class*="bg-sky-5"], :root[data-orderly-theme="dark"] [class*="bg-sky-10"] {
  background-color: oklch(65% 0.12 240 / .16) !important;
}
:root[data-orderly-theme="dark"] .text-slate-900, :root[data-orderly-theme="dark"] .text-gray-900,
:root[data-orderly-theme="dark"] .text-slate-800, :root[data-orderly-theme="dark"] .text-gray-800,
:root[data-orderly-theme="dark"] .text-slate-700, :root[data-orderly-theme="dark"] .text-gray-700 { color: var(--o-text) !important; }
:root[data-orderly-theme="dark"] .text-slate-600, :root[data-orderly-theme="dark"] .text-gray-600,
:root[data-orderly-theme="dark"] .text-slate-500, :root[data-orderly-theme="dark"] .text-gray-500 { color: var(--o-text-2) !important; }
:root[data-orderly-theme="dark"] .text-slate-400, :root[data-orderly-theme="dark"] .text-gray-400 { color: var(--o-text-3) !important; }

/* ── 4. Storefront legacy controls (account, store, checkout) ─────────────
   Element Plus inputs and plain round buttons, Bootstrap .btn-white /
   .bg-light, the phone field and light alerts ship white with no dark
   variant: the signup phone box was rgb(246,247,249) with white text on it
   (contrast 1.0). */
:root[data-orderly-theme="dark"] .el-input__wrapper,
:root[data-orderly-theme="dark"] .el-textarea__inner,
:root[data-orderly-theme="dark"] .el-select__wrapper {
  background-color: var(--o-surface-2) !important;
  box-shadow: 0 0 0 1px var(--o-surface-3) inset !important;
}
:root[data-orderly-theme="dark"] .el-input__inner,
:root[data-orderly-theme="dark"] .el-textarea__inner { color: var(--o-text) !important; }
:root[data-orderly-theme="dark"] .el-input__inner::placeholder { color: var(--o-text-3) !important; }
:root[data-orderly-theme="dark"] .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(.el-button--warning):not(.is-link):not(.is-text) {
  background-color: var(--o-surface-2) !important;
  border-color: var(--o-surface-3) !important;
  color: var(--o-text) !important;
}
:root[data-orderly-theme="dark"] .el-alert.is-light {
  background-color: var(--o-surface-2) !important;
}
:root[data-orderly-theme="dark"] .el-alert.is-light .el-alert__title,
:root[data-orderly-theme="dark"] .el-alert.is-light .el-alert__description { color: var(--o-text-2) !important; }
:root[data-orderly-theme="dark"] .el-alert--error.is-light .el-alert__title { color: var(--o-danger) !important; }

:root[data-orderly-theme="dark"] .btn-white,
:root[data-orderly-theme="dark"] .bg-light,
:root[data-orderly-theme="dark"] .btn-white-parent,
:root[data-orderly-theme="dark"] .btn-group-rounded,
:root[data-orderly-theme="dark"] .inputs-with-dropdown {
  background-color: var(--o-surface-2) !important;
  border-color: var(--o-surface-3) !important;
}
:root[data-orderly-theme="dark"] .inputs-with-dropdown,
:root[data-orderly-theme="dark"] .inputs-with-dropdown .dropdown-toggle,
:root[data-orderly-theme="dark"] .inputs-with-dropdown input { color: var(--o-text) !important; }
/* text links styled as white buttons ("Sign in", "Join"): just a link */
:root[data-orderly-theme="dark"] a.btn.btn-white.p-0,
:root[data-orderly-theme="dark"] a.btn.btn-link {
  background-color: transparent !important;
  color: var(--o-accent) !important;
}

/* Tailwind hover:bg-gray-50 / hover:!bg-gray-50 rows (header search, quick
   jump) flashed a white row under the pointer in dark mode. */
:root[data-orderly-theme="dark"] [class*="hover:!bg-gray-50"]:hover,
:root[data-orderly-theme="dark"] [class*="hover:bg-gray-50"]:hover,
:root[data-orderly-theme="dark"] [class*="hover:!bg-gray-100"]:hover,
:root[data-orderly-theme="dark"] [class*="hover:bg-gray-100"]:hover { background-color: var(--o-surface-2) !important; }

/* White text on orange: use the darker solid orange (4.6:1) everywhere the
   legacy theme fills with the brand orange behind white labels. */
html body .sidebar-panel .siderbar-menu ul li.active > a, html body .sidebar-panel .sidebar-menu ul li.active > a,
html body .siderbar-menu ul li.active > a, html body .sidebar-menu ul li.active > a,
html body .siderbar-menu li.active > a, html body .siderbar-menu a.active,
html body .btn-green, html body .btn-primary, html body .el-button--primary:not(.is-plain):not(.is-link):not(.is-text),
html body .q-btn.bg-primary {
  background: var(--o-accent-solid) !important;
  border-color: var(--o-accent-solid) !important;
  color: #fff !important; /* ui-lint: allow - text on the solid accent */
}
html body .btn-green:hover, html body .btn-primary:hover, html body .el-button--primary:not(.is-plain):not(.is-link):not(.is-text):hover {
  background-color: var(--o-accent-solid-hover) !important;
  border-color: var(--o-accent-solid-hover) !important;
}

/* ── 5. Footer subscribe + address search ─────────────────────────────────
   Both are Element Plus fields wrapped in older boxes, which drew a box
   inside a box inside a box. Make the outer element the one visible field. */
.esubscription { position: relative; display: flex; align-items: center; gap: 8px; }
.esubscription .field-wrap { flex: 1 1 auto; min-width: 0; background: none !important; border: 0 !important; padding: 0 !important; }
.esubscription .butoon-wrap { position: static; background: none !important; border: 0 !important; padding: 0 !important; }
.esubscription .el-input__wrapper { border-radius: 999px; padding: 2px 18px; }
.o-foot .esubscription .el-input__inner:not(#o) { border: 0 !important; min-height: 0; box-shadow: none !important; background: transparent !important; }
.esubscription .el-button { background: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; color: #fff !important; } /* ui-lint: allow — label on accent fill */

.search-geocomplete { background: var(--o-surface-2) !important; border: 1px solid var(--o-surface-3) !important; box-shadow: none !important; }
.search-geocomplete .el-autocomplete, .search-geocomplete .el-input { width: 100%; }
.search-geocomplete .el-input__wrapper:not(#o) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.search-geocomplete .el-input__inner:not(#o), .search-geocomplete .form-control:not(#o) { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0; color: var(--o-text) !important; }
.search-geocomplete:focus-within { border-color: var(--o-accent) !important; box-shadow: var(--o-ring) !important; }
.search-geocomplete .btn-link i { color: var(--o-text-3) !important; }
.search-geocomplete .btn-link:hover i { color: var(--o-accent) !important; }

/* Subscribe row + back-to-top */
.o-foot .esubscription .el-input__wrapper:not(#o) { background: var(--o-surface) !important; box-shadow: 0 0 0 1px var(--o-surface-3) inset !important; }
.o-foot .esubscription .el-button { min-height: 44px; padding: 0 22px; font: 700 15px/1 var(--o-font) !important; box-shadow: none !important; }
.o-foot .esubscription .el-button:hover { background: var(--o-accent-solid-hover) !important; }
.el-backtop { background: var(--o-surface) !important; color: var(--o-accent) !important; box-shadow: var(--o-elev-2) !important; width: 44px !important; height: 44px !important; }
.el-backtop:hover { background: var(--o-surface-2) !important; }

/* ── 6. Storefront frame, header pill, mobile search ──────────────────── */
/* The "join us" wrapper carried m-0, which pinned its capped width to the left edge. */
.container-fluid.full-width { margin-left: auto !important; margin-right: auto !important; }

/* Header "Delivery / Pickup" pill: the vendor chevron is an icon-font glyph
   positioned absolutely, which landed on top of the label. */
.widget-dropdown > button { display: inline-flex; align-items: center; gap: 8px; padding-right: 14px !important; }
.widget-dropdown > button::after { content: "" !important; position: static !important; display: block; flex: 0 0 auto; width: 16px; height: 16px; margin: 0 !important; font: inherit !important; background: currentColor; transform: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }

.o-fsearch { display: flex; gap: 8px; font-family: var(--o-font); }
.o-fsearch__field, .o-fsearch__filter { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--o-surface-3); border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-3); font: 500 16px/1 var(--o-font); cursor: pointer; transition: border-color var(--o-ease), color var(--o-ease); }
.o-fsearch__field { flex: 1 1 auto; gap: 10px; padding: 0 18px; text-align: left; }
.o-fsearch__filter { flex: 0 0 48px; justify-content: center; color: var(--o-text-2); }
.o-fsearch__field:hover, .o-fsearch__filter:hover { border-color: var(--o-accent); color: var(--o-text); }
.o-fsearch__field:focus-visible, .o-fsearch__filter:focus-visible { outline: none; box-shadow: var(--o-ring); }
.o-fsearch .o-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* ── 7. Customer account screens (legacy markup) ──────────────────────────
   Orders, bookings, payments, points, wallet, saved stores and profile still
   ship the vendor header card (clip-art icon + grey slab) and bordered cards.
   Flatten them to the account look; Addresses already uses .o-acct-* markup. */
#main-container .card { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; color: var(--o-text); }
#main-container .card > .grey-bg { background: var(--o-surface-2) !important; border-radius: var(--o-r) !important; padding: 18px 20px !important; }
#main-container .card:has(> .grey-bg) { background: transparent !important; box-shadow: none; }
#main-container .grey-bg .col-md-2:has(> .header_icon), #main-container .grey-bg .header_icon._icons { display: none !important; }
#main-container .grey-bg h5 { margin: 0 0 2px; font: 700 20px/1.25 var(--o-font); color: var(--o-text); }
#main-container .grey-bg p { color: var(--o-text-2); font: 400 14.5px/1.45 var(--o-font); }
#main-container .grey-bg .btn-green, #main-container .btn-green { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--o-r-pill); background: var(--o-accent-solid) !important; color: #fff !important; font: 600 15px/1 var(--o-font); text-decoration: none !important; } /* ui-lint: allow — label on accent fill */
#main-container .btn-green:hover { background: var(--o-accent-solid-hover) !important; }
#main-container .btn.normal { min-height: 40px; border-radius: var(--o-r-pill); background: var(--o-surface-2) !important; color: var(--o-text) !important; border: 0 !important; }
#main-container .btn.normal:hover { background: var(--o-surface-3) !important; }
#main-container .form-control, #main-container .el-input__wrapper:not(#o) { border-radius: var(--o-r-sm); }
#main-container h1, #main-container h2, #main-container h3, #main-container h4, #main-container h5, #main-container h6 { color: var(--o-text); }
#sidebar ul.siderbar-menu li a { color: var(--o-text) !important; }
#sidebar ul.siderbar-menu li.active a { color: var(--o-accent-deep) !important; background: var(--o-accent-tint); }
:root[data-orderly-theme="dark"] #sidebar ul.siderbar-menu li.active a { color: var(--o-accent) !important; }

/* ── 8. Customer menu (header dropdown + drawer) and alerts ───────────────
   Older header rules made the rows bold, bordered the panel and tinted the
   current row brown with orange text. One quiet list: regular weight,
   neutral icons, a soft highlight, a divider above Log out. */
.dropdown-menu.o-cmenu:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-3) !important; padding: 6px !important; min-width: 232px; }
ul.top-menu .o-cmenu a.o-cmenu__item:not(#o), .o-cmenu a.o-cmenu__item:not(#o) { font: 500 15px/1.2 var(--o-font) !important; color: var(--o-text) !important; min-height: 44px; border: 0 !important; background: transparent !important; }
.o-cmenu a.o-cmenu__item:not(#o):hover { background: var(--o-surface-2) !important; }
.o-cmenu a.o-cmenu__item.is-current:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text) !important; font-weight: 600 !important; }
.o-cmenu a.o-cmenu__item.is-current:not(#o) .o-cmenu__icon { color: var(--o-accent); }
.o-cmenu__icon:not(#o) { color: var(--o-text-3); }
.o-cmenu a.o-cmenu__item:hover .o-cmenu__icon { color: var(--o-text); }
.o-cmenu a.o-cmenu__item--out:not(#o) { margin-top: 6px; padding-top: 0; border-top: 1px solid var(--o-surface-3) !important; border-radius: 0 !important; }
.o-cmenu a.o-cmenu__item--out:not(#o):hover { background: var(--o-danger-tint) !important; border-radius: var(--o-r-sm) !important; }

/* The "Maina ⌄" trigger */
.userprofile > .dropdown-toggle:not(#o) { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text) !important; font: 600 14px/1 var(--o-font); }
.userprofile > .dropdown-toggle:not(#o):hover { background: var(--o-surface-3); }
.userprofile > .dropdown-toggle::after { content: ""; border: 0; margin: 0; width: 14px; height: 14px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Bootstrap alerts: the pale yellow/blue/red slabs on a dark page */
.alert:not(#o) { border: 0; border-radius: var(--o-r-sm); background: var(--o-surface-2); color: var(--o-text-2); }
.alert-warning:not(#o) { background: var(--o-warn-tint); color: var(--o-warn); }
.alert-danger:not(#o) { background: var(--o-danger-tint); color: var(--o-danger); }
.alert-success:not(#o) { background: var(--o-go-tint); color: var(--o-go-deep); }
:root[data-orderly-theme="dark"] .alert-success:not(#o) { color: var(--o-go); }

/* ── 9. Restaurant page: header, closed notice, menu | cart columns ───────
   Pieces were stacked with no rhythm: a bare centred message, a hairline
   running down the middle, a cart in a bordered box. One frame, one gap. */
.o-closed { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 0; padding: 14px 18px; border-radius: var(--o-r); background: var(--o-warn-tint); font-family: var(--o-font); }
.o-closed__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-closed__t { font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.o-closed__s { font: 400 14px/1.4 var(--o-font); color: var(--o-text-2); }

.merchant-top-header { background: var(--o-surface-2); border-bottom: 0 !important; }
.merchant-top-header .container { padding-top: 20px !important; padding-bottom: 24px !important; }
.merchant-top-header h1, .merchant-top-header h4 { margin: 2px 0 10px; font: 800 36px/1.1 var(--o-font); letter-spacing: -.02em; color: var(--o-text); }
.merchant-top-header .img-thumbnail { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; padding: 6px; box-shadow: var(--o-elev-1); }
.merchant-top-header ul { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; list-style: none; }
.merchant-top-header ul li { margin: 0 !important; font: 500 14px/1.4 var(--o-font); color: var(--o-text-2); }
.merchant-top-header .fav-wrap { position: absolute; top: 4px; right: 12px; }

.section-menu { padding-top: 28px; padding-bottom: 12px; }
.section-menu .menu-left .sticky-sidebar, .section-menu .menu-left { border-right: 0 !important; }
.section-menu .menu-left h5 { margin: 0 0 8px; font: 700 15px/1.3 var(--o-font); color: var(--o-text-2); text-transform: none; }
.menu-category { margin: 0; padding: 0; }
.o-side__label { margin: 0 0 8px; padding: 0 14px; font: 700 12px/1 var(--o-font); letter-spacing: .08em; text-transform: uppercase; color: var(--o-text-3); }
#sticky-sidebar:not(#o) { max-height: calc(100vh - var(--o-sticky-top) - 16px); overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.menu-category a.nav-link:not(#o) { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--o-r-sm); color: var(--o-text-2) !important; font: 500 15px/1.25 var(--o-font); text-decoration: none !important; transition: background var(--o-ease), color var(--o-ease); }
.menu-category a.nav-link:not(#o):hover { background: var(--o-surface-2); color: var(--o-text) !important; }
.menu-category a.nav-link.active:not(#o), .menu-category li.active > a:not(#o) { background: var(--o-surface-2); color: var(--o-text) !important; font-weight: 700; }
.menu-category a.nav-link.active:not(#o)::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--o-accent-solid); }
.section-menu .menu-center { padding-left: 28px; padding-right: 28px; }
.section-menu .menu-center h5, .section-menu .menu-center h4 { font: 700 20px/1.3 var(--o-font); color: var(--o-text); margin: 28px 0 14px; }
.section-menu .menu-center .card:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; }
.section-menu .menu-right { padding-left: 0 !important; }
.section-menu .sticky-cart { padding: 20px; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.section-menu .sticky-cart h5 { margin: 0 0 12px; font: 700 18px/1.3 var(--o-font); color: var(--o-text); }
@media (max-width: 991px) { .section-menu .menu-center { padding-left: 15px; padding-right: 15px; } .merchant-top-header h1, .merchant-top-header h4 { font-size: 28px; } }
.o-closed--ask { background: var(--o-accent-tint); }
.o-closed--bad { background: var(--o-danger-tint); }
.o-closed + .o-closed, .container + .container > .o-closed { margin-top: 10px; }
/* the service switch (Delivery / Pickup) in the restaurant header: a small pill, not a big outlined button */
.merchant-top-header .btn-group .btn:not(#o), .merchant-top-header .btn.btn-sm:not(#o) { min-height: 36px; padding: 0 16px; font: 600 14px/1 var(--o-font); border-radius: var(--o-r-pill); }

/* ── 10. Header notification bell, storefront ─────────────────────────────
   Pale-blue "active" row, orange body text and a cyan link on a dark panel. */
.o-feedhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notification-dropdown .dropdown-menu:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-3) !important; padding: 0 !important; min-width: 320px; overflow: hidden; }
.notification-dropdown .dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--o-surface-3); background: transparent; }
.notification-dropdown .dropdown-header h5 { font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.notification-dropdown .dropdown-header a { color: var(--o-accent-deep) !important; font: 600 13px/1 var(--o-font); cursor: pointer; }
:root[data-orderly-theme="dark"] .notification-dropdown .dropdown-header a { color: var(--o-accent) !important; }
.notification-dropdown ul { max-height: 340px; overflow-y: auto; }
.notification-dropdown ul li a:not(#o) { display: block; padding: 12px 16px; border: 0 !important; background: transparent !important; color: var(--o-text) !important; text-decoration: none; }
.notification-dropdown ul li { border-bottom: 1px solid var(--o-surface-3) !important; }
.notification-dropdown ul li a.active:not(#o) { background: var(--o-accent-tint) !important; }
.notification-dropdown .text-heading { color: var(--o-text) !important; font: 500 14px/1.4 var(--o-font); }
.notification-dropdown .dropdown-text-light { color: var(--o-text-3) !important; font: 400 12.5px/1.4 var(--o-font); margin-top: 2px; }
.notification-dropdown .notify-icon, .notification-dropdown .bg-soft-primary { background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; }
.notification-dropdown .footer-dropdown { padding: 10px; border-top: 1px solid var(--o-surface-3); }
.notification-dropdown .footer-dropdown a { color: var(--o-accent-deep) !important; font: 600 14px/1 var(--o-font); }
:root[data-orderly-theme="dark"] .notification-dropdown .footer-dropdown a, :root[data-orderly-theme="dark"] .notification-dropdown .notify-icon { color: var(--o-accent) !important; }

/* ── 11. Menu: grid or list, one rhythm (8px steps) ───────────────────── */
.o-menubar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.o-menubar__search { flex: 1 1 auto; min-width: 0; }
.o-viewtoggle { flex: 0 0 auto; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.o-viewtoggle button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--o-text-3); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.o-viewtoggle button svg { width: 20px; height: 20px; }
.o-viewtoggle button[aria-pressed="true"] { background: var(--o-surface); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .o-viewtoggle button[aria-pressed="true"] { color: var(--o-accent); }
.o-viewtoggle button:focus-visible { outline: none; box-shadow: var(--o-ring); }

/* search results still use the old row markup: a card each */
.section-menu .list-item-rows:not(#o) { margin: 0 0 10px !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-1); }
.section-menu .list-item-rows h6 { font: 600 16px/1.3 var(--o-font); color: var(--o-text); }
.section-menu .list-item-rows p { margin: 0; color: var(--o-text-2); font: 400 14px/1.45 var(--o-font); }
.section-menu .list-item-rows p.prices, .section-menu .list-item-rows p.bold { color: var(--o-text); font-weight: 700; font-size: 15px; }
@media (max-width: 575px) { .o-viewtoggle button { width: 36px; height: 36px; } }

/* phone: the sticky category chips under the header */
.category-carousel:not(#o) { margin: 0 !important; padding: 6px 4px !important; background: var(--o-bg) !important; border: 0 !important; border-bottom: 1px solid var(--o-surface-3) !important; flex-wrap: nowrap; }
.category-carousel .btn:not(#o) { color: var(--o-text-2) !important; }
.category-carousel .nav-link:not(#o) { min-height: 36px; padding: 0 14px !important; margin-right: 6px !important; border: 0 !important; border-radius: var(--o-r-pill); color: var(--o-text-2) !important; font: 600 14px/1 var(--o-font); white-space: nowrap; text-decoration: none !important; }
.category-carousel .nav-link.active:not(#o) { background: var(--o-accent-tint); color: var(--o-accent-deep) !important; box-shadow: none !important; }
:root[data-orderly-theme="dark"] .category-carousel .nav-link.active:not(#o) { color: var(--o-accent) !important; }
.category-carousel .nav-link.active:not(#o)::after, .category-carousel .nav-link.active:not(#o)::before { display: none !important; }

/* phone header: logo and heart on a calm band, not a yellow slab */
.top-merchant-details:not(#o) { background: var(--o-surface-2) !important; }
.mobile-merchant-details:not(#o) { height: auto; }
.mobile-merchant-details .sub:not(#o) { position: static; height: auto; }
.mobile-merchant-details .sub .container { padding: 16px !important; }
.o-mlogo { width: 72px; height: 72px; object-fit: contain; border-radius: var(--o-r); background: var(--o-surface); padding: 6px; box-shadow: var(--o-elev-1); }
/* one closed/address message is enough: the cart repeats the notice already shown above */
.section-menu .sticky-cart .alert { display: none; }
.merchant-top-header .btn-group, .merchant-top-header .btn-group label.btn:not(#o) { }

/* ── 12. Address search (home + change-address dialog) ────────────────────
   A box in a box in a box with hairlines between, and a pale grey list that
   looked like a 1990s form. One pill; one clean list. */
.home-search-wrap:not(#o) { display: block; width: min(560px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--o-surface-3); border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-1); min-height: 0; }
.home-search-wrap > .d-flex { align-items: center; gap: 6px; flex-wrap: nowrap !important; }
.home-search-wrap .search-geocomplete:not(#o) { flex: 1 1 auto; min-width: 0; width: auto !important; min-height: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.home-search-wrap .search-geocomplete.width_87 { width: auto !important; }
.search-geocomplete .el-autocomplete, .search-geocomplete .el-input, .search-geocomplete .el-input__wrapper:not(#o) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.search-geocomplete .el-input__inner:not(#o) { min-height: 48px; padding: 0 4px !important; font: 500 16px/1.2 var(--o-font); color: var(--o-text) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-indent: 0; }
.search-geocomplete .el-input__wrapper { padding: 0 6px 0 14px !important; }
.search-geocomplete .el-input__inner::placeholder { color: var(--o-text-3) !important; }
.search-geocomplete .btn-link:not(#o) { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; }
.search-geocomplete .btn-link:hover { background: var(--o-surface-2); }
.home-search-wrap:focus-within { border-color: var(--o-accent); box-shadow: var(--o-ring); }
.home-search-wrap .flex-enabled-locate .btn:not(#o), .home-search-wrap .btn-green:not(#o) { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0 !important; border-radius: 50% !important; background: var(--o-accent-solid) !important; color: #fff !important; box-shadow: none !important; display: grid; place-items: center; } /* ui-lint: allow — arrow on accent fill */

/* the suggestions list (teleported to <body> by Element Plus) */
.el-autocomplete-suggestion.el-popper:not(#o) { padding: 6px; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-3) !important; }
.el-autocomplete-suggestion .el-popper__arrow { display: none !important; }
.el-autocomplete-suggestion li:not(#o) { min-height: 44px; display: flex; align-items: center; padding: 0 14px !important; border-radius: var(--o-r-sm); color: var(--o-text) !important; font: 500 15px/1.3 var(--o-font) !important; }
.el-autocomplete-suggestion li:not(#o):hover, .el-autocomplete-suggestion li.highlighted:not(#o) { background: var(--o-surface-2) !important; }
.el-autocomplete-suggestion__list { padding: 0; }
.el-autocomplete-suggestion__wrap { max-height: 280px; }
/* the popper wrapper carries the white fill and border, not the inner list */
.el-popper.el-autocomplete__popper:not(#o) { padding: 6px; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-3) !important; --el-bg-color-overlay: var(--o-surface); }
.el-autocomplete__popper .el-popper__arrow { display: none !important; }
.el-autocomplete__popper .el-scrollbar__thumb { background: var(--o-text-3) !important; }

/* ── 13. Item popup, cart (side panel + drawer) ───────────────────────────
   The drawer body kept the vendor's white fill with light text (unreadable in
   dark), the popup was a bordered grey box with hairlines and big headings,
   and the cart was a box of boxes. One surface, one radius, 8px steps. */

/* Drawer */
.el-drawer:not(#o) { background: var(--o-surface) !important; color: var(--o-text); box-shadow: var(--o-elev-3) !important; }
.el-drawer__header:not(#o) { margin: 0; padding: 16px 20px 8px; color: var(--o-text); border: 0; }
.el-drawer__close-btn { color: var(--o-text-2); }
.el-drawer__body:not(#o) { background: transparent !important; color: var(--o-text); padding: 0 20px 20px; }
.el-drawer__body p, .el-drawer__body h5, .el-drawer__body h6, .el-drawer__body a:not(.btn) { color: inherit; }
.el-overlay:not(#o) { background-color: rgb(0 0 0 / .5); }

/* Cart lines (sidebar + drawer) */
.sticky-cart .items, .drawer-preview-cart .items, .el-drawer .section-cart .items { margin: 0 0 8px; }
.sticky-cart .line-items, .el-drawer .line-items { margin: 0 !important; padding: 12px; border: 0 !important; border-radius: var(--o-r); background: var(--o-surface-2); align-items: flex-start; }
.sticky-cart .line-items p, .el-drawer .line-items p { color: var(--o-text); font: 500 14px/1.35 var(--o-font); margin: 0 0 2px; }
.sticky-cart .line-items .font11, .el-drawer .line-items .font11 { color: var(--o-text-3); font-size: 13px; }
.sticky-cart .quantity:not(.col-3), .el-drawer .quantity:not(.col-3) { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 8px; padding: 2px; border: 0 !important; border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-1); width: auto; }
.sticky-cart .qty-btn, .el-drawer .qty-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--o-accent-deep) !important; }
:root[data-orderly-theme="dark"] .sticky-cart .qty-btn, :root[data-orderly-theme="dark"] .el-drawer .qty-btn { color: var(--o-accent) !important; }
.sticky-cart .qty-btn:hover, .el-drawer .qty-btn:hover { background: var(--o-accent-tint) !important; }
.sticky-cart .qty, .el-drawer .qty { min-width: 24px; text-align: center; font: 600 15px/1 var(--o-font); color: var(--o-text); }
.sticky-cart .line-items a.rounded-pill.ml-auto, .el-drawer .line-items a.rounded-pill.ml-auto { width: 28px; height: 28px; display: grid; place-items: center; background: var(--o-surface) !important; color: var(--o-text-3) !important; border: 0 !important; }
.sticky-cart .line-items a.rounded-pill.ml-auto:hover, .el-drawer .line-items a.rounded-pill.ml-auto:hover { color: var(--o-danger) !important; background: var(--o-danger-tint) !important; }
.sticky-cart .divider, .el-drawer .divider { height: 0; margin: 12px 0; border: 0; border-top: 1px solid var(--o-surface-3); background: none; }
.sticky-cart .btn-green:not(#o), .el-drawer .btn-green:not(#o) { display: flex; align-items: center; min-height: 52px; padding: 0 18px; border: 0 !important; border-radius: var(--o-r-pill) !important; background: var(--o-accent-solid) !important; color: #fff !important; font: 700 16px/1 var(--o-font); box-shadow: none !important; text-decoration: none !important; } /* ui-lint: allow — label on accent fill */
.sticky-cart .btn-green > .d-flex, .el-drawer .btn-green > .d-flex { width: 100%; }
.sticky-cart .btn-green:hover, .el-drawer .btn-green:hover { background: var(--o-accent-solid-hover) !important; }
.sticky-cart .co-points-badge { display: inline-flex; margin: 8px 0 0; padding: 4px 10px; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 12.5px/1.2 var(--o-font); }
.sticky-cart .cart-empty .no-results, .el-drawer .cart-empty .no-results { opacity: .55; }
.sticky-cart .cart-empty h6, .el-drawer .cart-empty h6 { color: var(--o-text); font: 600 15px/1.3 var(--o-font); }
.sticky-cart .cart-empty p, .el-drawer .cart-empty p { color: var(--o-text-3); font: 400 14px/1.4 var(--o-font); }

/* Item popup */
#itemModal .modal-content:not(#o) { border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; color: var(--o-text); box-shadow: var(--o-elev-3) !important; overflow: hidden; }
#itemModal .modal-header:not(#o) { border: 0 !important; padding: 12px 12px 0; justify-content: flex-end; background: transparent !important; }
#itemModal .close:not(#o) { width: 36px; height: 36px; display: grid; place-items: center; margin: 0; padding: 0; border-radius: 50%; background: var(--o-surface-2); color: var(--o-text-2); opacity: 1; text-shadow: none; font-size: 22px; line-height: 1; }
#itemModal .close:hover { background: var(--o-surface-3); color: var(--o-text); }
#itemModal .modal-body:not(#o) { padding: 4px 20px 16px; }
#itemModal .modal-body .item_s .el-image { border-radius: var(--o-r); overflow: hidden; }
#itemModal h4 { font: 700 22px/1.25 var(--o-font); color: var(--o-text); }
#itemModal h5 { font: 700 16px/1.3 var(--o-font); color: var(--o-text); margin: 0; }
#itemModal h6 { font: 500 15px/1.3 var(--o-font); color: var(--o-text); }
#itemModal .text-muted, #itemModal .text-grey { color: var(--o-text-3) !important; }
#itemModal .addon-rows { margin: 20px 0 0; padding: 0; border: 0; }
#itemModal .addon-rows .heads { padding: 0 0 8px; margin: 0; border: 0; }
#itemModal .addon-required { padding: 3px 10px; border-radius: var(--o-r-pill); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 12px/1.2 var(--o-font); }
#itemModal .list-selection { list-style: none; border-radius: var(--o-r); background: var(--o-surface-2); overflow: hidden; }
#itemModal .list-selection li { min-height: 48px; padding: 0 14px; border: 0 !important; border-bottom: 1px solid var(--o-surface-3) !important; }
#itemModal .list-selection li:last-child { border-bottom: 0 !important; }
#itemModal textarea:not(#o), #itemModal .form-control:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; padding: 12px 14px; }
#itemModal textarea:focus, #itemModal .form-control:focus { box-shadow: var(--o-ring) !important; }
.item-modal-footer:not(#o) { padding: 12px 20px 16px; border: 0 !important; background: var(--o-surface) !important; box-shadow: 0 -1px 0 var(--o-surface-3); }
.item-modal-footer .quantity { border: 0 !important; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.item-modal-footer .btn-green:not(#o), .item-modal-footer .btn:not(#o) { min-height: 52px; border: 0 !important; border-radius: var(--o-r-pill) !important; background: var(--o-accent-solid) !important; color: #fff !important; font: 700 16px/1 var(--o-font); box-shadow: none !important; } /* ui-lint: allow — label on accent fill */

/* Choices in the popup and checkout: the same round / square marks as the filters */
.custom-control-label:not(#o) { font: 500 15px/1.3 var(--o-font); color: var(--o-text); cursor: pointer; }
.custom-control-input:not(#o) ~ .custom-control-label::before { border: 2px solid var(--o-text-3) !important; background: transparent !important; box-shadow: none !important; }
.custom-control-input:checked:not(#o) ~ .custom-control-label::before { background-color: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; }
.custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: var(--o-ring) !important; }

/* Size pills (choose a size) */
#itemModal .btn-group-toggle.input-group-small .btn:not(#o) { min-height: 40px; padding: 0 16px; margin: 0 8px 8px 0; border: 0 !important; border-radius: var(--o-r-pill) !important; background: var(--o-surface-2) !important; color: var(--o-text-2) !important; font: 600 14px/1 var(--o-font); box-shadow: none !important; }
#itemModal .btn-group-toggle.input-group-small .btn.active:not(#o) { background: var(--o-accent-tint) !important; color: var(--o-text) !important; box-shadow: inset 0 0 0 2px var(--o-accent) !important; }

/* Prices on menu cards are drawn as size "buttons"; here they are just prices. */
.list-item-rows .btn-group-toggle .btn:not(#o) { min-height: 0; margin: 0 12px 0 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--o-text) !important; font: 700 15px/1.3 var(--o-font); cursor: default; }
.list-item-rows .btn-group-toggle input { position: absolute; opacity: 0; pointer-events: none; }

/* Cart line: photo | name, price, quantity | remove + total, on one grid */
.sticky-cart .line-items.row, .el-drawer .line-items.row { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; margin-left: 0; margin-right: 0; }
.sticky-cart .line-items > [class*="col-"], .el-drawer .line-items > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0 !important; }
.sticky-cart .line-items .el-image, .el-drawer .line-items .el-image { width: 48px !important; height: 48px !important; border-radius: 10px; overflow: hidden; background: var(--o-surface); }
.sticky-cart .line-items > .text-right, .el-drawer .line-items > .text-right { align-items: flex-end; gap: 6px; }
.sticky-cart .line-items > .text-right p, .el-drawer .line-items > .text-right p { white-space: nowrap; font-weight: 700; }
.sticky-cart .addon-items.row, .el-drawer .addon-items.row { margin: 0 0 4px; padding: 0 12px; }
.sticky-cart .addon-items p, .el-drawer .addon-items p { color: var(--o-text-2); font: 400 13px/1.4 var(--o-font); }
.sticky-cart .items:not(#o), .el-drawer .items:not(#o) { border: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }

/* ── 14. One orange, one typeface ─────────────────────────────────────────
   Two oranges were in use: the design system's button orange (--o-accent-solid)
   and a lighter salmon that older rules painted behind white text (Add to cart,
   quantity buttons, count bubbles, green "success" buttons turned orange).
   Every orange FILL is now --o-accent-solid with white text; orange TEXT and
   icons stay --o-accent (dark) / --o-accent-deep (light). */
.btn-green:not(#o), .btn-primary:not(#o), .el-button--success:not(#o), .el-button--primary:not(.is-link):not(.is-text):not(.is-plain):not(#o),
.section-menu .list-item-rows a.btn.quantity-add-cart:not(#o), .section-menu .list-item-rows .el-button:not(.is-circle):not(.is-link):not(.is-text):not(#o),
.quantity-add-cart:not(#o), .butoon-wrap .el-button:not(#o) {
  background: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; color: #fff !important; /* ui-lint: allow — label on accent fill */
}
.btn-green:not(#o):hover, .btn-primary:not(#o):hover, .el-button--success:not(#o):hover, .el-button--primary:not(.is-link):not(.is-text):not(#o):hover,
.section-menu .list-item-rows a.btn.quantity-add-cart:not(#o):hover { background: var(--o-accent-solid-hover) !important; border-color: var(--o-accent-solid-hover) !important; }
.el-button--success:not(#o) span, .btn-green:not(#o) *, .section-menu .list-item-rows .el-button:not(#o) span { color: #fff !important; } /* ui-lint: allow — label on accent fill */
.section-menu .list-item-rows .quantity-parent .qty-btn:not(#o) { background: var(--o-accent-solid) !important; color: #fff !important; border: 0 !important; } /* ui-lint: allow — icon on accent fill */
.badge.count:not(#o), .badge-danger:not(#o), .count:not(#o).badge { background: var(--o-accent-solid) !important; color: #fff !important; } /* ui-lint: allow — number on accent fill */
.el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner { background-color: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; }
.el-switch.is-checked .el-switch__core { background-color: var(--o-accent-solid) !important; border-color: var(--o-accent-solid) !important; }
.el-slider__bar, .el-progress-bar__inner { background-color: var(--o-accent-solid) !important; }
.el-loading-spinner .path { stroke: var(--o-accent-solid) !important; }
:root { --el-color-primary: var(--o-accent-solid); --el-color-success: var(--o-accent-solid); --el-font-family: var(--o-font); }

/* DM Sans in every control, including Element Plus and the ones the browser styles itself */
button, input, select, textarea, optgroup, .el-button, .el-input__inner, .el-select__wrapper, .el-dialog, .el-drawer, .el-popper, .el-autocomplete-suggestion, .el-message, .el-notification, .modal-content, .dropdown-menu, .swal2-popup { font-family: var(--o-font); }
.badge-dark:not(#o), .cart-handle .badge:not(#o), .cart-handle count:not(#o), count:not(#o) { background: var(--o-accent-solid) !important; color: #fff !important; } /* ui-lint: allow — number on accent fill */

/* Account menu: the current page is a soft tint with readable text, never orange text on an orange fill */
#sidebar ul.siderbar-menu li.active a:not(#o), #sidebar ul.siderbar-menu li a.active:not(#o) { background: var(--o-accent-tint) !important; color: var(--o-text) !important; font-weight: 600; }
#sidebar ul.siderbar-menu li.active a:not(#o) * { color: inherit !important; }
#sidebar ul.siderbar-menu li.active a svg { color: var(--o-accent) !important; }
.acct-user img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--o-accent-tint); }

/* ── 15. Header cart count: a small dot on the bag's shoulder, never over the bag ── */
.orderly-customer-actions a.cart-handle .badge:not(#o), a.cart-handle .badge:not(#o) { top: -2px !important; right: -2px !important; min-width: 17px; height: 17px; padding: 0 4px !important; font-size: 10.5px; line-height: 17px; box-shadow: 0 0 0 2px var(--o-bg); }
a.cart-handle:not(#o) { overflow: visible; }

/* ── 16. Chats: a Telegram-like conversation ─────────────────────────────
   Quasar draws the page white with blue and grey boxes. Same chat, our look:
   one calm wallpaper, orange bubbles on the right, soft grey on the left,
   the time inside the bubble, a round composer. */
#app-chat, #app-chat .q-layout, #app-chat .q-page, #app-chat .q-page-container, #app-chat .q-drawer, #app-chat .q-drawer__content { background: transparent !important; color: var(--o-text); font-family: var(--o-font); }
#app-chat .q-drawer { border: 0 !important; }
#app-chat .q-drawer__content { background: var(--o-surface) !important; border-radius: var(--o-r-lg); margin: 16px 0 16px 16px; box-shadow: var(--o-elev-1); }
#app-chat .q-scrollarea__content { border: 0 !important; }
#app-chat .q-scroll-area, #app-chat .q-scrollarea { border: 0 !important; }
#app-chat .q-header:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; border-radius: var(--o-r-lg); box-shadow: var(--o-elev-1); margin: 16px !important; }
#app-chat .q-toolbar { border: 0 !important; min-height: 64px; }
#app-chat .q-toolbar__title { font: 700 18px/1.2 var(--o-font); }
#app-chat .q-toolbar h6 { font: 700 16px/1.2 var(--o-font); margin: 0; color: var(--o-text); }
#app-chat .q-toolbar .text-grey, #app-chat .text-grey { color: var(--o-text-3) !important; }
/* the list of conversations */
#app-chat .list-custom .q-item { min-height: 68px; padding: 10px 12px; border-radius: var(--o-r); color: var(--o-text); }
#app-chat .list-custom .q-item:hover { background: var(--o-surface-2); }
#app-chat .list-custom .q-item--active, #app-chat .q-item.q-router-link--active { background: var(--o-accent-tint) !important; color: var(--o-text) !important; }
#app-chat .q-item__label { color: var(--o-text); font-family: var(--o-font); }
#app-chat .q-item__label--caption { color: var(--o-text-3) !important; }
#app-chat .q-avatar { border-radius: 50%; overflow: hidden; }
#app-chat .q-badge { background: var(--o-accent-solid) !important; color: #fff !important; font-weight: 700; } /* ui-lint: allow — count on accent fill */
/* search */
#app-chat .q-field--outlined .q-field__control { border-radius: var(--o-r-pill); background: var(--o-surface-2); }
#app-chat .q-field--outlined .q-field__control:before { border: 0 !important; }
#app-chat .q-field--outlined .q-field__control:after { display: none; }
#app-chat .q-field__native, #app-chat .q-field__label { font-family: var(--o-font); color: var(--o-text); }
#app-chat .q-field__native::placeholder { color: var(--o-text-3); }
/* the conversation */
#app-chat .chat-wrapper { max-width: 760px; padding: 4px 8px 12px; }
#app-chat .q-message { margin: 3px 0; }
#app-chat .q-message-avatar, #app-chat .q-message-name { display: none !important; }
#app-chat .q-message-container { max-width: 78%; }
#app-chat .q-message-sent .q-message-container { margin-left: auto; }
#app-chat .q-message-text { min-height: 0; padding: 8px 12px 6px; border-radius: 18px !important; box-shadow: none; font: 400 15px/1.4 var(--o-font); }
#app-chat .q-message-text:before, #app-chat .q-message-text:last-child:before { display: none !important; }
#app-chat .q-message-text--sent { background: var(--o-accent-solid) !important; color: #fff !important; border-bottom-right-radius: 6px !important; } /* ui-lint: allow — message on accent fill */
#app-chat .q-message-text--received { background: var(--o-surface) !important; color: var(--o-text) !important; border-bottom-left-radius: 6px !important; box-shadow: var(--o-elev-1); }
#app-chat .q-message-text-content { color: inherit !important; }
#app-chat .q-message-stamp { margin-top: 2px; font: 400 11px/1.2 var(--o-font); opacity: .65; text-align: right; color: inherit !important; }
#app-chat .q-message-text--sent .q-message-stamp { color: rgb(255 255 255 / .85) !important; } /* ui-lint: allow — time on accent fill */
#app-chat .q-message-text--received .q-message-stamp { color: var(--o-text-3) !important; }
/* nothing chosen yet */
#app-chat .chat-wrapper .q-img { display: none !important; }
#app-chat .chat-wrapper h6 { display: grid; justify-items: center; gap: 12px; margin: 72px 0 0 !important; font: 600 16px/1.3 var(--o-font); color: var(--o-text-3); }
#app-chat .chat-wrapper h6::before { content: ""; width: 56px; height: 56px; border-radius: 50%; background: var(--o-accent-tint) center / 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4510a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.6-.8L3 21l1.9-5.4A8.4 8.4 0 1 1 21 11.5Z'/%3E%3C/svg%3E"); }
/* composer */
#app-chat .border-grey { border: 0 !important; background: var(--o-surface) !important; border-radius: 28px !important; box-shadow: var(--o-elev-1); padding: 6px 8px !important; }
#app-chat .border-grey .q-field--outlined .q-field__control { background: transparent; }
#app-chat .q-btn { font-family: var(--o-font); }
#app-chat .q-btn.bg-primary, #app-chat .q-btn--round.bg-primary { background: var(--o-accent-solid) !important; color: #fff !important; } /* ui-lint: allow — icon on accent fill */
#app-chat .q-uploader { background: transparent !important; box-shadow: none !important; }
@media (max-width: 599px) { #app-chat .q-message-container { max-width: 88%; } #app-chat .q-drawer__content { margin: 0; border-radius: 0; } #app-chat .q-header:not(#o) { margin: 8px !important; } }
a.cart-handle .badge.rounded-pill:not(#o), a.cart-handle span.badge:not(#o) { width: auto !important; min-width: 17px !important; height: 17px !important; line-height: 17px !important; padding: 0 4px !important; top: 2px !important; right: 0 !important; bottom: auto !important; left: auto !important; transform: none !important; }
a.cart-handle .badge:not(#o) { display: inline-grid !important; place-items: center; white-space: nowrap; min-height: 0 !important; max-height: 17px !important; height: 17px !important; overflow: hidden; }

/* ── 17. Item popup: sizes as chips (the radio hides, the chip shows the choice) ─────────────────── */
.choose-sizex:not(#o) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px !important; }
.choose-sizex input[type="radio"]:not(#o) { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
.choose-sizex label.btn:not(#o) { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 !important; padding: 0 18px !important; border: 1.5px solid var(--o-surface-3) !important; border-radius: var(--o-r-pill) !important; background: var(--o-surface) !important; color: var(--o-text) !important; font: 600 15px/1 var(--o-font) !important; cursor: pointer; box-shadow: none !important; transition: border-color var(--o-ease), background var(--o-ease); }
.choose-sizex label.btn:not(#o):hover { border-color: var(--o-text-3) !important; }
.choose-sizex label.btn.active:not(#o) { border-color: var(--o-accent-solid) !important; background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; }
:root[data-orderly-theme="dark"] .choose-sizex label.btn.active:not(#o) { color: var(--o-accent) !important; }
.choose-sizex label.btn del { font-weight: 400; color: var(--o-text-3); }

/* ── Sidebar: a section's expand arrow is drawn absolutely at the right of its
   link, so a long label ("Kitchen Operations") ran under it. Reserve the
   arrow's width and centre it on the row. */
html body .siderbar-menu li > a:not(:only-child) { padding-right: 26px !important; }
html body .siderbar-menu li > a:not(:only-child)::after { top: 50%; right: 6px !important; transform: translateY(-50%); font-size: 16px !important; line-height: 1; }

/* ── 18. Settings frame (views/tpl/submenu_tpl.php) ───────────────────────
   Breadcrumb + action, then the section menu beside the page. Desktop: a
   pill rail; phones: one scrolling row of pills above the page. */
.o-shell { font-family: var(--o-font); color: var(--o-text); }
.o-shell__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.o-shell__top .breadcrumbs, .o-shell__top .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; font: 600 14px/1.3 var(--o-font); color: var(--o-text-3); }
.o-shell__top .breadcrumbs a { color: var(--o-text-3) !important; text-decoration: none !important; }
.o-shell__top .breadcrumbs a:hover { color: var(--o-text) !important; }
.o-shell__top .breadcrumbs > span:last-child { font: 600 13px/1.3 var(--o-font); color: var(--o-text-3); }
.o-shell__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-shell__trail .breadcrumbs { font-size: 13px !important; }
/* inside the frame, design-system cards are sections, not boxes in a box */
html body .o-shell__main .o-card:not(.o-card--flat):not(.o-stat) { background: transparent; padding: 0 0 24px; border-radius: 0; }
html body .o-shell__main .o-card:not(.o-card--flat):not(.o-stat) + .o-card:not(.o-card--flat) { padding-top: 16px; }
html body .o-shell__main .o-savebar { margin: 16px 0 0; padding-left: 0; padding-right: 0; }
.o-shell__sep { color: var(--o-text-3); opacity: .6; }
.o-shell__body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .o-shell__body { grid-template-columns: 230px minmax(0, 1fr); } }
.o-shell__main { min-width: 0; background: var(--o-surface); border-radius: var(--o-r); padding: 20px; }
@media (max-width: 575.98px) { .o-shell__main { padding: 16px 14px; } }
.o-shell__who { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 6px; }
.o-shell__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.o-shell__title { font: 700 15px/1.3 var(--o-font); color: var(--o-text); }
html body .o-shell__nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
html body .o-shell__nav ul li { margin: 0; border: 0 !important; }
html body .o-shell__nav ul li a { display: flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px !important; border-radius: var(--o-r-pill) !important; background: transparent !important; color: var(--o-text-2) !important; font: 600 14px/1.25 var(--o-font) !important; text-decoration: none !important; white-space: nowrap; }
html body .o-shell__nav ul li a:hover { background: var(--o-surface-2) !important; color: var(--o-text) !important; }
html body .o-shell__nav ul li.active a, html body .o-shell__nav ul li a.active { background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-1) !important; }
html body .o-shell__nav ul li a i, html body .o-shell__nav ul li a svg { margin: 0 !important; font-size: 16px; width: 16px; height: 16px; color: var(--o-text-3); }
@media (max-width: 991.98px) {
  html body .o-shell__nav ul { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); -webkit-overflow-scrolling: touch; }
  html body .o-shell__nav ul::-webkit-scrollbar { display: none; }
  html body .o-shell__nav ul li { flex: 0 0 auto; }
  .o-shell__who { display: none; }
}

/* ── 19. Legacy Bootstrap switches and selects (117 back-office views) ──────
   A switch is a setting: on is GREEN (go), like .o-switch - not orange, which
   the choice marks above use. One switch per row, never two side by side.
   Selects match the text fields beside them in dark mode (they were darker). */
html body .custom-switch .custom-control-input:checked:not(#o) ~ .custom-control-label::before { background-color: var(--o-go) !important; border-color: var(--o-go) !important; }
html body .custom-switch .custom-control-input:not(:checked):not(#o) ~ .custom-control-label::before { border-color: var(--o-text-3) !important; }
html.ods-office .custom-control.custom-switch { display: block !important; margin-bottom: 14px; }
html.ods-office .custom-control.custom-switch .custom-control-label { min-height: 28px; display: inline-flex; align-items: center; }
:root[data-orderly-theme="dark"] .ods-office .custom-select:not(#o), :root[data-orderly-theme="dark"] .custom-select:not(#o) { background-color: rgb(38 38 38) !important; border-color: rgb(255 255 255 / .14) !important; color: var(--o-text) !important; }

/* ── 20. List pages (tpl/search-form, tpl/lazy_list): head, one search pill,
   empty state. admin.js shows/hides the clear button and the empty block. */
.o-listhead { margin-bottom: 14px; }
.o-listsearch { display: flex; align-items: center; gap: 4px; max-width: 520px; min-height: 48px; margin: 0 0 14px; padding: 0 6px 0 4px; border-radius: var(--o-r-pill); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.o-listsearch:focus-within { box-shadow: var(--o-ring), var(--o-elev-1); }
html body .o-listsearch .o-listsearch__go:not(#o), html body .o-listsearch .o-listsearch__x:not(#o) { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--o-text-3); cursor: pointer; }
html body .o-listsearch .o-listsearch__go:not(#o):hover, html body .o-listsearch .o-listsearch__x:not(#o):hover { background: var(--o-surface-2); color: var(--o-text); }
.o-listsearch__go svg, .o-listsearch__x svg { width: 18px; height: 18px; }
html body .o-listsearch .o-listsearch__x:not(#o) { display: none; }
html body .o-listsearch__input:not(#o) { flex: 1 1 auto; min-width: 0; height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--o-text) !important; font: 400 15px/1 var(--o-font); outline: none; padding: 0 4px; }
.o-listsearch__input::-webkit-search-cancel-button { display: none; }
.o-listempty { display: none; margin: 8px 0; }
.o-listempty[style*="block"] { display: flex !important; }

/* ── 21. Tailwind leftovers on the big Vue screens (dashboards, merchants,
   orders, customers, POS lists): hairlines, hover flashes, glows and indigo.
   Dark: light borders become a faint line, light hovers become the raised
   step, blurred shadows become the flat elevation, indigo becomes Orderly
   orange. Light: glows and indigo only. */
:root[data-orderly-theme="dark"] [class*="border-slate-1"], :root[data-orderly-theme="dark"] [class*="border-slate-2"], :root[data-orderly-theme="dark"] [class*="border-slate-3"],
:root[data-orderly-theme="dark"] [class*="border-gray-1"], :root[data-orderly-theme="dark"] [class*="border-gray-2"], :root[data-orderly-theme="dark"] [class*="border-gray-3"],
:root[data-orderly-theme="dark"] .border-border, :root[data-orderly-theme="dark"] [class*="divide-slate-"] > * + *, :root[data-orderly-theme="dark"] [class*="divide-gray-"] > * + * {
  border-color: rgb(255 255 255 / .07) !important;
}
:root[data-orderly-theme="dark"] [class*="hover:bg-gray-"]:hover, :root[data-orderly-theme="dark"] [class*="hover:!bg-gray-"]:hover,
:root[data-orderly-theme="dark"] [class*="hover:bg-slate-"]:hover, :root[data-orderly-theme="dark"] [class*="hover:!bg-slate-"]:hover,
:root[data-orderly-theme="dark"] [class*="hover:bg-white"]:hover {
  background-color: var(--o-surface-3) !important;
}
:root[data-orderly-theme="dark"] [class*="bg-white/"] { background-color: color-mix(in oklab, var(--o-bg) 60%, transparent) !important; }
:root[data-orderly-theme="dark"] .text-indigo-900, :root[data-orderly-theme="dark"] .text-slate-950, :root[data-orderly-theme="dark"] .text-black { color: var(--o-text) !important; }
.ods-office [class*="shadow-2xl"], .ods-office [class*="shadow-xl"], .ods-office [class*="shadow-lg"] { box-shadow: var(--o-elev-2) !important; }
.ods-office [class*="backdrop-blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ods-office [class*="focus:ring-indigo"]:focus, .ods-office [class*="focus:border-indigo"]:focus { border-color: var(--o-accent) !important; box-shadow: var(--o-ring) !important; outline: none !important; }
.ods-office .border-indigo-500, .ods-office [class*="border-t-twprimary"] { border-color: var(--o-surface-3) !important; border-top-color: var(--o-accent) !important; }
.ods-office .text-indigo-500, .ods-office .text-indigo-600 { color: var(--o-accent-deep) !important; }
.ods-office .bg-indigo-500, .ods-office .bg-indigo-600 { background-color: var(--o-accent-solid) !important; }

/* ── 22. Legacy status badges in DataTables (`badge post <status>` printed by
   ApibackendController for cuisines, items, bookings ...): the shared status
   chip, same colours as .o-chip[data-status]. The old rule read colour
   variables that do not exist in dark mode, so the word was near-black. */
html body .badge.post:not(#o), html body .badge.publish:not(#o), html body .badge.badge-publish:not(#o) {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 0 !important; border-radius: var(--o-r-pill);
  background: var(--o-surface-2) !important; color: var(--o-text-2) !important; font: 600 12px/1 var(--o-font); letter-spacing: 0; text-transform: none;
}
html body .badge.post.publish:not(#o), html body .badge.publish:not(#o), html body .badge.badge-publish:not(#o), html body .badge.post.active:not(#o), html body .badge.post.confirmed:not(#o), html body .badge.post.approved:not(#o) { background: var(--o-go-tint) !important; color: var(--o-go-deep) !important; }
html body .badge.post.pending:not(#o), html body .badge.post.draft:not(#o), html body .badge.post.waiting:not(#o) { background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; }
html body .badge.post.inactive:not(#o), html body .badge.post.unpublish:not(#o), html body .badge.post.hidden:not(#o) { background: var(--o-surface-3) !important; color: var(--o-text-2) !important; }
html body .badge.post.cancelled:not(#o), html body .badge.post.declined:not(#o), html body .badge.post.blocked:not(#o), html body .badge.post.suspended:not(#o), html body .badge.post.expired:not(#o), html body .badge.post.denied:not(#o) { background: var(--o-danger-tint) !important; color: var(--o-danger) !important; }
/* custom.css forces every plain .badge to near-black text (!important); in dark
   mode that is black on black. Plain badges read the theme's text colour. */
:root[data-orderly-theme="dark"] .badge:not([class*="badge-"]):not([class*="bg-"]):not(.text-white):not(.btn-green):not(.post):not(.publish) { color: var(--o-text) !important; }

/* ── 23. Inside the settings frame: no card in a card; uploads; delete is red.
   Pages rendered into .o-shell__main often wrap themselves in a Bootstrap
   .card, which made a second box inside the frame's card. The upload preview
   (file_added_container, ~40 forms) put its remove button in a fixed column,
   so on a phone it drifted away from the picture. The shared delete
   confirmation (item_delete) was a green "go" button. */
html body .o-shell__main .card:not(#o) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .o-shell__main .card:not(#o) > .card-body { padding: 0 !important; }
html body .file_added_container .row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
html body .file_added_container .row > [class*="col-"] { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; position: relative; }
html body .file_added_container img { display: block; width: 120px !important; height: 120px !important; object-fit: contain; border-radius: var(--o-r-sm); background: var(--o-surface-2); }
html body .file_added_container .btn-remove:not(#o) { position: absolute !important; top: 6px; right: 6px; left: auto !important; display: grid; place-items: center; width: 32px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; background: var(--o-surface) !important; color: var(--o-text-2) !important; box-shadow: none !important; }
html body .file_added_container .btn-remove:not(#o):hover { color: var(--o-danger) !important; }
html body .modal .item_delete:not(#o), html body .modal .btn-green.item_delete:not(#o) { background: var(--o-danger-solid) !important; color: #fff !important; } /* ui-lint: allow — label on the danger fill */

/* ── 24. Legacy dialogs look like the shared confirm/sheet until each screen
   moves to ODS.confirm / .o-sheet: Bootstrap .modal, bootbox, Element Plus
   el-dialog and el-message-box. Radius, no border, DM Sans, design-system
   surfaces, one bar of buttons. */
html body .modal-content:not(#o) { border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-3) !important; font-family: var(--o-font); }
html body .modal-header:not(#o), html body .modal-footer:not(#o) { border: 0 !important; background: transparent !important; }
html body .modal-header:not(#o) { padding: 18px 22px 6px !important; }
html body .modal-header .modal-title:not(#o), html body .modal-header h5:not(#o) { font: 700 18px/1.3 var(--o-font) !important; color: var(--o-text) !important; }
html body .modal-body:not(#o) { padding: 8px 22px 12px !important; color: var(--o-text-2); }
html body .modal-footer:not(#o) { gap: 8px; padding: 12px 22px 20px !important; }
html body .modal-footer .btn:not(#o) { min-height: 44px; padding: 0 18px; border-radius: var(--o-r-pill) !important; font: 600 15px/1 var(--o-font); }
html body .modal-footer .btn-secondary:not(#o), html body .modal-footer .btn-default:not(#o), html body .modal-footer .btn-light:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text) !important; border: 0 !important; }
html body .modal-header .close:not(#o) { color: var(--o-text-2) !important; opacity: 1; text-shadow: none; }
html body .modal-backdrop.show:not(#o) { opacity: .45; }
html body .el-dialog:not(#o), html body .el-message-box:not(#o) { border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-3) !important; font-family: var(--o-font); }
html body .el-dialog__title:not(#o), html body .el-message-box__title:not(#o) { font: 700 18px/1.3 var(--o-font) !important; color: var(--o-text) !important; }
html body .el-dialog__body:not(#o), html body .el-message-box__message:not(#o) { color: var(--o-text-2) !important; }
html body .el-dialog__footer .el-button:not(#o), html body .el-message-box__btns .el-button:not(#o) { min-height: 40px; border-radius: var(--o-r-pill) !important; font-weight: 600; }

/* §25 Order detail (orders/order-details.php, merchant + admin twin). Presentation only:
   the template, its refs, Bootstrap modals and merchant.js/admin.js are untouched.
   One surface per block (no card in a card, no rules), status as an ODS chip,
   server action buttons: btn-green / btn-yellow = go, btn-black (reject, failed) = quiet danger. */
html body .orderly-ov.card:not(#o) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .orderly-ov > .card-body:not(#o) { padding: 0 !important; }
html body .orderly-ov .oov-head:not(#o) { padding: 18px 20px !important; border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; box-shadow: none !important; }
html body .orderly-ov .oov-title h4:not(#o) { font: 700 22px/1.2 var(--o-font) !important; color: var(--o-text) !important; }
html body .orderly-ov .oov-status:not(#o) { font: 600 13px/1 var(--o-font) !important; padding: 6px 12px !important; }
html body .orderly-ov .oov-date:not(#o) { color: var(--o-text-2) !important; }
html body .orderly-ov .oov-actions-tools:not(#o) { border: 0 !important; }
html body .orderly-ov .oov-actions .btn:not(#o) { display: inline-flex !important; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px !important; margin: 0 !important; border: 0 !important; border-radius: var(--o-r-pill) !important; font: 600 14px/1 var(--o-font) !important; box-shadow: none !important; }
html body .orderly-ov .oov-actions-primary:not(#o) { display: flex !important; flex-wrap: wrap; gap: 8px; }
html body .orderly-ov .oov-actions .btn.btn-green:not(#o), html body .orderly-ov .oov-actions .btn.btn-yellow:not(#o) { background: var(--o-go) !important; color: #fff !important; } /* ui-lint: allow - white on go, as .o-btn--go */
html body .orderly-ov .oov-actions .btn.btn-black:not(#o) { background: var(--o-danger-tint) !important; color: var(--o-danger) !important; }
html body .orderly-ov .oov-actions-tools .btn.btn-black:not(#o), html body .orderly-ov .oov-actions-tools .btn.btn-warning:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text) !important; }
html body .orderly-ov .oov-actions-tools .rounded-button-icon:not(#o) { display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0 !important; border-radius: 50% !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; cursor: pointer; }
html body .orderly-ov .oov-actions-tools .rounded-button-icon svg:not(#o) { width: 20px; height: 20px; }
html body .orderly-ov .row:not(#o) > .oov-side .d-flex.mt-3 { padding: 16px; margin-top: 12px !important; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; }
html body .orderly-ov .oov-side h5:not(#o) { font: 600 12.5px/1.3 var(--o-font) !important; letter-spacing: .02em; text-transform: none !important; color: var(--o-text-3) !important; margin-bottom: 4px !important; }
html body .orderly-ov .oov-side p:not(#o) { color: var(--o-text) !important; }
html body .orderly-ov .oov-side .o-ico:not(#o) { width: 20px; height: 20px; color: var(--o-text-3); }
html body .orderly-ov .oov-summary.card:not(#o) { border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; box-shadow: none !important; }
html body .orderly-ov .oov-summary .card:not(#o), html body .orderly-ov .oov-summary .border:not(#o) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .orderly-ov .oov-summary .text-right:not(#o), html body .orderly-ov .oov-summary .col-3:not(#o) { white-space: nowrap; font-variant-numeric: tabular-nums; }
html body .orderly-ov .oov-summary hr:not(#o), html body .orderly-ov .oov-meta hr:not(#o) { display: none !important; }
html body .orderly-ov .oov-summary h5:not(#o) { font: 700 17px/1.3 var(--o-font) !important; color: var(--o-text) !important; }
html body .orderly-ov .oov-summary .btn-green:not(#o) { display: inline-flex !important; align-items: center; gap: 6px; border: 0 !important; border-radius: var(--o-r-pill) !important; background: var(--o-go-tint) !important; color: var(--o-go-deep) !important; font-weight: 600 !important; }
html body .orderly-ov .oov-meta:not(#o) { margin-top: 16px; padding: 18px 20px !important; border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface) !important; box-shadow: none !important; }
html body .orderly-ov .oov-meta-item:not(#o) { border: 0 !important; }
html body .orderly-ov .oov-meta-item dt:not(#o) { color: var(--o-text-3) !important; font-weight: 500 !important; }
html body .orderly-ov .oov-meta-item dd:not(#o) { color: var(--o-text) !important; }
html body .orderly-ov .oov-sec-title:not(#o) { font: 700 15px/1.3 var(--o-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--o-text) !important; }
html body .orderly-ov .o-chip.services:not(#o) { background: var(--o-surface-2); color: var(--o-text); }
html body .orderly-ov .oov-table table:not(#o), html body .orderly-ov .oov-table td:not(#o), html body .orderly-ov .oov-table th:not(#o) { border: 0 !important; }
html body .orderly-ov .oov-table th:not(#o) { color: var(--o-text-3) !important; background: var(--o-surface-2) !important; }
html body .orderly-ov .o-ico--sm:not(#o) { width: 14px; height: 14px; }
html body .orderly-ov .badge[class*="badge-"]:not(#o) { border-radius: var(--o-r-pill) !important; }
html body #vue-order-view:not(#o) { background: transparent !important; }

/* §26 Wave 3 base: every legacy (CActiveForm / Bootstrap) form inside the settings frame
   reads as ODS without touching its markup: filled inputs with no outline, the focus ring,
   16px text (no iOS zoom), and the form's Save as the one primary pill. Names, ids and
   actions are untouched, so every form posts exactly as before. */
html body .o-shell__main .form-control:not(#o), html body .o-shell__main .custom-select:not(#o), html body .o-shell__main textarea.form-control:not(#o) {
  min-height: 50px; padding: 0 16px !important; border: 0 !important; border-radius: var(--o-r-sm) !important;
  background-color: var(--o-surface-2) !important; color: var(--o-text) !important; font: 400 16px/1.3 var(--o-font) !important;
  box-shadow: none !important; outline: none !important;
}
html body .o-shell__main textarea.form-control:not(#o) { min-height: 104px; padding: 12px 16px !important; }
html body .o-shell__main .form-control:not(#o):focus, html body .o-shell__main .custom-select:not(#o):focus { background-color: var(--o-surface) !important; box-shadow: var(--o-ring) !important; }
html body .o-shell__main .form-control:not(#o)::placeholder { color: var(--o-text-3); opacity: 1; }
html body .o-shell__main .form-control:not(#o):disabled, html body .o-shell__main .form-control[readonly]:not(#o) { opacity: .6; }
html body .o-shell__main label:not(.custom-control-label):not(.o-switch):not(.o-label):not(#o), html body .o-shell__main .form-label-group > label:not(.o-label):not(#o) { color: var(--o-text-2); font: 600 13.5px/1.3 var(--o-font); }
html body .o-shell__main .text-muted:not(#o), html body .o-shell__main small.form-text:not(#o), html body .o-shell__main .form-label-group + p:not(#o) { color: var(--o-text-3) !important; }
html body .o-shell__main input.btn-green:not(#o), html body .o-shell__main button.btn-green:not(#o), html body .o-shell__main .btn.btn-green.btn-full:not(#o) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px !important; border: 0 !important;
  border-radius: var(--o-r-pill) !important; background: var(--o-accent-solid) !important; color: #fff !important; /* ui-lint: allow - white on solid accent, as .o-btn--primary */
  font: 600 15px/1 var(--o-font) !important; box-shadow: none !important;
}
html body .o-shell__main .btn.btn-green.btn-full:not(#o) { width: auto !important; min-width: 180px; }
html body .o-shell__main .alert:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; }
html body .o-shell__main .alert-success:not(#o) { background: var(--o-go-tint) !important; color: var(--o-go-deep) !important; }
html body .o-shell__main .alert-danger:not(#o), html body .o-shell__main .alert-warning:not(#o) { background: var(--o-danger-tint) !important; color: var(--o-danger) !important; }
html body .o-shell__main hr:not(#o) { border: 0 !important; height: 0; margin: 20px 0; }
html body .o-shell__main .card:not(#o) { overflow: visible !important; background: transparent !important; }
html body .o-shell__main .card-body:not(#o) { background: transparent !important; border-radius: 0 !important; }
html body .o-shell__main select.form-control:not(#o):not(#p), html body .o-shell__main select.custom-select:not(#o):not(#p) {
  background-color: var(--o-surface-2) !important; padding-right: 44px !important; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 16px !important;
}
/* the same flat input everywhere in the office, sizes left to each screen (filters stay compact) */
html body .main-container .form-control:not(#o):not(.search-geocomplete .form-control):not(.o-shell__main .form-control) { border: 0 !important; border-radius: var(--o-r-sm) !important; background-color: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .main-container .form-control:not(#o):not(.search-geocomplete .form-control):focus { box-shadow: var(--o-ring) !important; }
html body .bootstrap-select > select.selectpicker:not(#o) { left: 0 !important; right: auto !important; max-width: 100% !important; } /* the plugin parks its hidden select half off-screen: page scrolled sideways */

/* §27 Wave 3 sweep fixes, found by the live crawl (light boxes in dark mode and the like). */
html body .main-container .btn.btn-light:not(#o), html body .main-container .btn.btn-white:not(#o) { border: 0 !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .main-container .btn.btn-light:not(#o):hover, html body .main-container .btn.btn-white:not(#o):hover { background: var(--o-surface-3) !important; }
html body .cover-loader:not(#o) { background: color-mix(in oklab, var(--o-bg) 72%, transparent) !important; }
/* off-canvas filter drawers (sidebarjs) and white card headers */
html body [sidebarjs-container]:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; }
html body [sidebarjs-container] .card:not(#o), html body .main-container .card-header.bg-white:not(#o), html body [sidebarjs-container] .card-header:not(#o) { background: var(--o-surface) !important; border: 0 !important; color: var(--o-text) !important; }
html body [sidebarjs-container] .close:not(#o) { color: var(--o-text-2) !important; opacity: 1; text-shadow: none; }
/* bootstrap-select's button reads as a filled select */
html body .main-container .bootstrap-select > .dropdown-toggle:not(#o), html body .main-container .btn.dropdown-toggle.selectpicker:not(#o) { min-height: 42px; border: 0 !important; border-radius: var(--o-r-sm) !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; outline: none !important; }
html body .bootstrap-select .dropdown-menu:not(#o) { border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; box-shadow: var(--o-elev-3) !important; }
html body .bootstrap-select .dropdown-menu .dropdown-item:not(#o) { color: var(--o-text) !important; }
html body .bootstrap-select .dropdown-menu .dropdown-item.active:not(#o), html body .bootstrap-select .dropdown-menu .dropdown-item:active:not(#o) { background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; }
/* customer / merchant status badges (badge customer <status>) use the same colours as status chips */
html body .badge.customer:not(#o) { border: 0 !important; border-radius: var(--o-r-pill) !important; padding: 4px 10px; font: 600 12px/1.2 var(--o-font); text-transform: capitalize; background: var(--o-surface-3) !important; color: var(--o-text-2) !important; }
html body .badge.customer.active:not(#o), html body .badge.customer.approved:not(#o) { background: var(--o-go-tint) !important; color: var(--o-go-deep) !important; }
html body .badge.customer.pending:not(#o) { background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; }
html body .badge.customer.blocked:not(#o), html body .badge.customer.suspended:not(#o), html body .badge.customer.deleted:not(#o), html body .badge.customer.expired:not(#o) { background: var(--o-danger-tint) !important; color: var(--o-danger) !important; }
/* btn-black was the old theme's dark button: Clear filters, Cancel, Close in dialogs and filter drawers. A quiet ghost button,
   lower in specificity than the order-detail rule (§25), where it means a quiet Reject. The round "Add new" has its own rule. */
html body .main-container .btn-black:not(.btn-circle):not(#o), html body [sidebarjs-container] .btn-black:not(.btn-circle):not(#o), html body .modal .btn-black:not(.btn-circle):not(#o) { border: 0 !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .main-container .btn-black:not(.btn-circle):not(#o):hover, html body [sidebarjs-container] .btn-black:not(.btn-circle):not(#o):hover, html body .modal .btn-black:not(.btn-circle):not(#o):hover { background: var(--o-surface-3) !important; }
/* Quasar pieces embedded in a few office pages (driver map view) */
html body .main-container .q-drawer:not(#o), html body .main-container .q-drawer__content:not(#o), html body .main-container .q-tab-panels:not(#o), html body .main-container .q-tab-panel:not(#o), html body .main-container .q-card:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; }
html body .has-search .form-control-feedback:not(#o) { display: inline-flex; align-items: center; justify-content: center; color: var(--o-text-3); } html body .has-search .form-control-feedback svg:not(#o) { width: 16px; height: 16px; }
/* driver map / list toggle (#app-task, q-btn bg-dark = picked, outline text-dark = not): the segmented look, no black fill, no outline */
html body .q-btn-group .q-btn.bg-dark:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .q-btn-group .q-btn.text-dark:not(#o) { color: var(--o-text-2) !important; }
html body .q-btn-group .q-btn--outline.text-dark:not(#o)::before { border: 0 !important; }
html body .q-btn-group:not(#o) { box-shadow: none !important; border-radius: var(--o-r-pill) !important; overflow: hidden; }
/* sticky save bars on long forms (role editor, SEO, access settings) */
html body .main-container .float-button:not(#o) { background: var(--o-surface) !important; border: 0 !important; box-shadow: 0 -1px 0 var(--o-surface-2) !important; }
/* Quasar tables (driver orders) and Element Plus description lists (packaging & bags) */
html body .main-container .q-table__container:not(#o), html body .main-container .q-table__container .q-table:not(#o), html body .main-container .q-table__top:not(#o), html body .main-container .q-table__bottom:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .main-container .q-table th:not(#o), html body .main-container .q-table td:not(#o) { border-color: transparent !important; color: var(--o-text) !important; }
html body .main-container .q-table thead th:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text-3) !important; }
html body .main-container .el-descriptions__body:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; }
html body .main-container .el-descriptions__cell:not(#o) { border-color: var(--o-surface-2) !important; background: transparent !important; color: var(--o-text) !important; }
html body .main-container .el-descriptions__label.is-bordered-label:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text-2) !important; }
/* Quasar pages without .main-container (driver map view, driver orders) */
html body .q-drawer:not(#o), html body .q-drawer__content:not(#o), html body .q-tab-panels:not(#o), html body .q-tab-panel:not(#o), html body .q-table__container:not(#o), html body .q-table__container .q-table:not(#o) { background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: none !important; }
html body .q-table thead th:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text-3) !important; }
html body .q-table th:not(#o), html body .q-table td:not(#o) { border-color: transparent !important; }
/* ------------------------------------------------------------ choice field ----
   EVERY Select2 picker (categories, tags, days, zones, add-ons; single, multi,
   ajax), merchant and admin, skinned once here as an ODS field (owner,
   2026-10-23: "that input type is horrid ... it appears in very many pages").
   A tinted well like .o-input with a chevron; picked values as neutral chips
   with their remove button at the end; a plain inline search (custom.css's
   dark textarea rule used to draw it as an empty capsule); a menu like
   .o-search's panel: neutral highlight, a check on what is picked (tap it
   again to take it off; merchant.js / admin.js no longer hide picked ones). */
html body .select2-container:not(#o) { width: 100% !important; max-width: 100%; font-family: var(--o-font); }
html body .select2-container .select2-selection--multiple:not(#o), html body .select2-container .select2-selection--single:not(#o) { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 50px; height: auto; padding: 8px 42px 8px 8px !important; border: 0 !important; border-radius: var(--o-r-sm) !important; background: var(--o-surface-2) !important; background-image: none !important; box-shadow: none !important; outline: none; cursor: pointer; transition: background var(--o-ease), box-shadow var(--o-ease); }
html body .select2-container .select2-selection--multiple:not(#o)::after, html body .select2-container .select2-selection--single:not(#o)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--o-text-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; pointer-events: none; transition: transform var(--o-ease); }
html body .select2-container--open .select2-selection:not(#o)::after { transform: rotate(180deg); }
html body .select2-container--focus .select2-selection:not(#o), html body .select2-container--open .select2-selection:not(#o) { background: var(--o-surface) !important; box-shadow: var(--o-ring), var(--o-elev-1) !important; }
html body .select2-container .select2-selection__arrow:not(#o) { display: none !important; }
html body .select2-container .select2-selection--multiple .select2-selection__rendered:not(#o) { display: contents !important; }
html body .select2-container .select2-selection--single .select2-selection__rendered:not(#o) { flex: 1 1 auto; min-width: 0; padding: 0 6px !important; color: var(--o-text) !important; font: 400 15px/34px var(--o-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .select2-container .select2-selection__placeholder:not(#o) { color: var(--o-text-3) !important; }
html body .select2-container .select2-selection__choice:not(#o) { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 2px; max-width: 100%; height: 34px; margin: 0 !important; padding: 0 4px 0 12px !important; border: 0 !important; border-radius: var(--o-r-pill) !important; background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-1); font: 600 14px/1 var(--o-font); }
html body .select2-container .select2-selection__choice__display:not(#o) { padding: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .select2-container .select2-selection__choice__remove:not(#o), html body .select2-container .select2-selection__clear:not(#o) { position: static !important; display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--o-text-3) !important; font: 500 18px/1 var(--o-font) !important; cursor: pointer; }
html body .select2-container .select2-selection__choice__remove:not(#o):hover, html body .select2-container .select2-selection__choice__remove:not(#o):focus-visible { background: var(--o-surface-2) !important; color: var(--o-text) !important; outline: none; }
html body .select2-container .select2-selection__choice__remove span:not(#o) { margin: 0 !important; }
html body .select2-container .select2-search--inline:not(#o) { display: flex; flex: 1 1 7em; min-width: 7em; }
html body .select2-container .select2-search--inline .select2-search__field:not(#o) { width: 100% !important; height: 34px !important; min-height: 0 !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--o-text) !important; font: 400 15px/34px var(--o-font) !important; resize: none; overflow: hidden; outline: none; }
html body .select2-container .select2-search--inline .select2-search__field:not(#o)::placeholder { color: var(--o-text-3); opacity: 1; }
html body .select2-dropdown:not(#o) { margin-top: 6px; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-3) !important; overflow: hidden; }
html body .select2-dropdown--above:not(#o) { margin-top: 0; margin-bottom: 6px; }
html body .select2-search--dropdown:not(#o) { padding: 8px 8px 2px !important; }
html body .select2-search--dropdown .select2-search__field:not(#o) { height: 44px !important; padding: 0 12px !important; border: 0 !important; border-radius: var(--o-r-sm) !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; font: 400 15px/44px var(--o-font) !important; outline: none; box-shadow: none !important; }
html body .select2-search--dropdown .select2-search__field:not(#o):focus { box-shadow: var(--o-ring) !important; }
html body .select2-results__options:not(#o) { max-height: 320px !important; padding: 6px !important; }
html body .select2-results__option:not(#o) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px !important; border-radius: var(--o-r-sm); background: transparent !important; color: var(--o-text) !important; font: 500 15px/1.3 var(--o-font); }
html body .select2-results__option--highlighted:not(#o), html body .select2-results__option--highlighted[aria-selected]:not(#o) { background: var(--o-surface-2) !important; color: var(--o-text) !important; }
html body .select2-results__option--selected:not(#o), html body .select2-results__option[aria-selected="true"]:not(#o) { color: var(--o-accent-deep) !important; font-weight: 600; }
html body .select2-results__option--selected:not(#o)::after, html body .select2-results__option[aria-selected="true"]:not(#o)::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: var(--o-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }
html body .select2-results__message:not(#o), html body .select2-results__option--disabled:not(#o) { color: var(--o-text-3) !important; font-weight: 400; }
html body .select2-results__group:not(#o) { padding: 10px 12px 4px !important; color: var(--o-text-3); font: 700 12px/1.2 var(--o-font); letter-spacing: .02em; text-transform: uppercase; }
/* phones: report range chips wrap; a DataTable wider than the screen scrolls inside its own box, never the page */
html body .orep-ranges:not(#o), html body .orep-custom:not(#o) { flex-wrap: wrap !important; max-width: 100%; }
@media (max-width: 767.98px) { html body .main-container .dataTables_wrapper:not(#o) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
html body .orcp-table-card:not(#o) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) { html body .main-container table.table:not(.dataTable):not(#o) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
/* kitchen display (orderly-kds) on a phone: the three columns become a sideways board, each column most of the screen */
@media (max-width: 767.98px) {
  html body .orderly-kds main:not(#o) { padding: 12px !important; min-width: 0; }
  html body .orderly-kds .grid.grid-cols-3:not(#o) { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  html body .orderly-kds .grid.grid-cols-3 > *:not(#o) { flex: 0 0 86%; scroll-snap-align: start; }
  html body .orderly-kds .premium-card .flex.items-center.justify-between:not(#o) { flex-wrap: wrap; gap: 8px; }
}
html body .o-shell__body > *:not(#o), html body .o-shell__main:not(#o) { min-width: 0; } /* a wide table scrolls inside .o-table instead of widening the frame */
/* Wave 4: Lucide svgs replaced the old icon font in legacy markup. .o-ico is 20px; these are the other sizes the old font-size rules used. */
html body svg.o-ico.o-ico--md:not(#o) { width: 18px; height: 18px; }
html body svg.o-ico.o-ico--lg:not(#o) { width: 24px; height: 24px; }
html body svg.o-ico.o-ico--xl:not(#o) { width: 32px; height: 32px; }
html body nav.navbar.navbar-light .separator svg:not(#o) { width: 14px; height: 14px; color: var(--o-text-3); }
html body svg.o-ico:not(#o) { max-width: none; flex: 0 0 auto; } /* the theme's svg { max-width: 100% } collapses an icon inside a narrow button to 0 */
html body .rounded-button-icon svg.o-ico:not(#o), html body .qty-btn svg.o-ico:not(#o) { vertical-align: middle; }
html body .btn.dropdown-togglex:not(#o) { color: var(--o-text-2); } /* the bare three-dot trigger kept Bootstrap's near-black text in dark mode */
html body .notify-icon svg.o-ico:not(#o) { width: 18px; height: 18px; vertical-align: middle; }
/* §28 POS terminal (/pos/create, /adminpos/create: adminpos/create-order.php and its sheets).
   Orderly asks, the cashier answers: "Who's it for?", "Which table?", "How many people?", "When is it for?".
   Surfaces and spacing, no lines; orange marks what is picked, green is the one way forward, red is only for removing
   and voiding. Tokens only. Every hook is an opos-* class, so the prebuilt Tailwind file never decides what applies. */
:root { --opos-on-solid: var(--o-surface); }
:root[data-orderly-theme="dark"] { --opos-on-solid: var(--o-text); } /* text on the solid orange: white by day, near-white by night */
.opos-app { font-family: var(--o-font); }
.opos-app :not(input).uppercase:not(#o) { text-transform: none !important; letter-spacing: normal !important; } /* sentence case everywhere in the till */
.opos-viewtabs { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; margin-bottom: 16px; padding: 3px; border-radius: var(--o-r); background: var(--o-surface-2); }
/* the order panel */
.opos-cart:not(#o) { border: 0 !important; border-radius: var(--o-r-lg) !important; background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-1); }
.opos-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 4px; }
.opos-cart__title { margin: 0; font: 700 17px/1.25 var(--o-font); color: var(--o-text); }
.opos-cart__setup { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 12px; }
.opos-seg.o-seg { display: flex; width: 100%; }
.opos-seg .o-seg__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; }
.opos-seg .o-seg__btn.is-on, .opos-when .o-seg__btn.is-on { color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-seg .o-seg__btn.is-on, :root[data-orderly-theme="dark"] .opos-when .o-seg__btn.is-on { color: var(--o-accent); }
.opos-seg .o-seg__btn svg, .opos-when .o-seg__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.opos-asks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.opos-contents { display: contents; }
.opos-ask { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; transition: background var(--o-ease); }
.opos-ask:hover { background: var(--o-surface-3); }
.opos-ask:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-ask:disabled { opacity: .5; cursor: not-allowed; }
.opos-ask > svg, .opos-ask > i { width: 18px; height: 18px; flex: 0 0 auto; color: var(--o-text-3); }
.opos-ask__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.opos-ask__q { font: 500 12.5px/1.2 var(--o-font); color: var(--o-text-2); }
.opos-ask__a { font: 600 14px/1.25 var(--o-font); color: var(--o-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.opos-when { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.opos-when__q { font: 500 13px/1.3 var(--o-font); color: var(--o-text-2); }
.opos-when .o-seg__btn { min-height: 40px; padding: 0 14px; }
.opos-when .o-seg { padding: 2px; }
/* order lines */
.opos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 160px; padding: 24px 0; text-align: center; color: var(--o-text-3); font: 400 14px/1.4 var(--o-font); }
.opos-empty svg { width: 28px; height: 28px; margin-bottom: 4px; color: var(--o-text-3); }
.opos-empty b { font-weight: 600; color: var(--o-text-2); }
.opos-lines { padding: 0 16px; }
.opos-line { padding: 10px 0; }
.opos-line + .opos-line { margin-top: 2px; }
.opos-line__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.opos-line__name { margin: 0; font: 600 14px/1.3 var(--o-font); color: var(--o-text); min-width: 0; word-break: break-word; }
.opos-line__total { flex: 0 0 auto; font: 600 14px/1.3 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.opos-line__meta { margin: 2px 0 0; font: 400 12.5px/1.35 var(--o-font); color: var(--o-text-3); }
.opos-line__ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.opos-line__addons { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-left: 10px; }
.opos-line__addon { display: flex; justify-content: space-between; gap: 10px; font: 400 12.5px/1.35 var(--o-font); color: var(--o-text-2); }
.opos-line__note { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font: italic 400 12.5px/1.35 var(--o-font); color: var(--o-text-3); }
.opos-line__note svg { width: 13px; height: 13px; margin-top: 2px; flex: 0 0 auto; }
.opos-qty.o-qty { margin-top: 0; padding: 2px; }
.opos-qty .o-qty__btn { width: 40px; height: 40px; }
.opos-qty .o-qty__btn svg { width: 16px; height: 16px; }
.opos-qty .o-qty__n { min-width: 28px; font-size: 15px; }
.opos-del { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-danger); cursor: pointer; transition: background var(--o-ease); }
.opos-del:hover { background: var(--o-danger-tint); }
.opos-del:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-del svg { width: 17px; height: 17px; }
.opos-del--sm { width: 32px; height: 32px; }
.opos-del--sm svg { width: 15px; height: 15px; }
/* totals, adjustments, actions */
.opos-sum { padding: 10px 16px 6px; background: var(--o-surface); }
.opos-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; font: 400 13.5px/1.35 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.opos-sum__row > div { display: flex; align-items: center; gap: 2px; min-width: 0; }
.opos-sum__row.is-total { margin-top: 6px; font: 700 17px/1.3 var(--o-font); color: var(--o-text); }
.opos-adj { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 12px 0; padding: 2px 4px 2px 14px; border-radius: var(--o-r); background: var(--o-surface-2); }
.opos-adj__lbl { font: 500 13px/1.3 var(--o-font); color: var(--o-text-2); }
.opos-adj__btns { display: flex; gap: 2px; }
.opos-adj__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.opos-adj__btn:hover { background: var(--o-surface-3); color: var(--o-text); }
.opos-adj__btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-adj__btn:disabled { opacity: .5; cursor: not-allowed; }
.opos-adj__btn svg { width: 18px; height: 18px; }
.opos-adj__btn[aria-label]::after { content: attr(aria-label); position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; padding: 6px 10px; border-radius: var(--o-r-pill); background: var(--o-text); color: var(--o-bg); font: 600 12px/1 var(--o-font); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--o-ease), transform var(--o-ease); }
.opos-adj__btn[aria-label]:hover::after, .opos-adj__btn[aria-label]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.opos-acts { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 6px; background: var(--o-surface); }
.opos-acts .o-btn { min-height: 48px; }
.opos-acts__charge.o-btn { width: 100%; font-size: 16px; font-variant-numeric: tabular-nums; }
.opos-acts__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.opos-acts__row .o-btn { min-width: 0; padding: 0 10px; gap: 6px; font-size: 14px; line-height: 1.15; white-space: normal; text-align: center; }
.opos-acts__row .o-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.opos-acts__reset { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--o-r-pill); background: none; color: var(--o-text-2); font: 600 14px/1 var(--o-font); cursor: pointer; }
.opos-acts__reset:hover { color: var(--o-text); text-decoration: underline; text-underline-offset: 3px; }
.opos-acts__reset:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-acts__reset:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }
.opos-acts__reset svg { width: 15px; height: 15px; }
/* the sheets (item, table picker, customer): a centred card, a bottom sheet on phones */
.opos-dlg { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; } /* pair with .o-scrim for the dim */
.opos-dlg__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: hidden; border-radius: var(--o-r-lg); background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-3); font-family: var(--o-font); animation: o-sheet-up 200ms cubic-bezier(.16, 1, .3, 1); }
.opos-dlg__panel--wide { max-width: 640px; }
@media (max-width: 599.98px) {
  .opos-dlg { align-items: flex-end; padding: 0; }
  .opos-dlg__panel { max-width: none; max-height: 92vh; border-radius: var(--o-r-lg) var(--o-r-lg) 0 0; }
}
@media (prefers-reduced-motion: reduce) { .opos-dlg__panel { animation: none; } }
.opos-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 8px 20px; }
.opos-dlg__title { margin: 0; font: 700 19px/1.25 var(--o-font); color: var(--o-text); }
.opos-dlg__sub { margin: 4px 0 0; font: 400 13.5px/1.4 var(--o-font); color: var(--o-text-2); }
.opos-dlg__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 18px; -webkit-overflow-scrolling: touch; }
.opos-dlg__body > * { flex-shrink: 0; } /* a clamped description must not shrink to nothing */
.opos-dlg__foot { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--o-surface); }
.opos-dlg__btns { display: flex; gap: 8px; }
.opos-dlg__bar { display: flex; align-items: center; gap: 8px; padding: 4px 20px 8px; }
.opos-dlg__bar .o-btn { flex: 0 0 auto; }
.opos-dlg__btns .o-btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 8px 14px; line-height: 1.2; white-space: normal; text-align: center; }
.opos-x.o-icon-btn { flex: 0 0 auto; width: 44px; height: 44px; background: transparent; }
.opos-x.o-icon-btn:hover { background: var(--o-surface-2); }
.opos-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.opos-h__t { margin: 0; font: 600 15px/1.3 var(--o-font); color: var(--o-text); }
.opos-h__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.opos-h .o-chip { min-height: 0; padding: 4px 10px; font-size: 12px; }
/* item sheet */
.opos-item__head { display: flex; align-items: center; gap: 14px; padding: 16px 12px 8px 16px; }
.opos-item__img { flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden; border-radius: var(--o-r); background: var(--o-surface-2); }
.opos-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opos-item__meta { flex: 1 1 auto; min-width: 0; }
.opos-item__title { margin: 0; font: 700 19px/1.25 var(--o-font); color: var(--o-text); word-break: break-word; }
.opos-item__price { margin-top: 4px; font: 600 16px/1.3 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.opos-item__rate { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 500 12.5px/1.3 var(--o-font); color: var(--o-text-3); }
.opos-item__rate svg { width: 13px; height: 13px; }
.opos-item__desc { margin: 0; font: 400 14px/1.5 var(--o-font); color: var(--o-text-2); }
.opos-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opos-opts--list { grid-template-columns: 1fr; }
.opos-opts--wrap { display: flex; flex-wrap: wrap; }
@media (max-width: 420px) { .opos-opts { grid-template-columns: 1fr; } }
.opos-opt { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); cursor: pointer; user-select: none; transition: background var(--o-ease); }
.opos-opt:hover { background: var(--o-surface-3); }
.opos-opt.is-on { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.opos-opt.is-off { opacity: .5; cursor: not-allowed; pointer-events: none; }
.opos-opt__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.opos-opt__lbl { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 14px/1.3 var(--o-font); }
.opos-opt__price { flex: 0 0 auto; font: 500 13px/1.3 var(--o-font); color: var(--o-text-3); font-variant-numeric: tabular-nums; }
.opos-opt.is-on .opos-opt__price { color: inherit; }
.opos-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--o-surface); color: var(--o-surface); box-shadow: inset 0 0 0 2px var(--o-surface-3); }
.opos-mark--box { border-radius: 6px; }
.opos-opt.is-on .opos-mark, .opos-mark.is-on { background: var(--o-accent-solid); box-shadow: none; color: var(--opos-on-solid); }
.opos-mark__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.opos-mark svg { width: 12px; height: 12px; }
.opos-opt .o-qty { margin-top: 0; flex: 0 0 auto; }
.opos-opt .o-qty__btn { width: 36px; height: 36px; }
.opos-opt .o-qty__btn svg { width: 15px; height: 15px; }
.opos-add1 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--o-surface); color: var(--o-accent-deep); cursor: pointer; }
:root[data-orderly-theme="dark"] .opos-add1 { color: var(--o-accent); }
.opos-add1:disabled { opacity: .5; cursor: not-allowed; }
.opos-add1 svg { width: 16px; height: 16px; }
.opos-item__note.o-textarea:not(#o) { min-height: 76px !important; }
.opos-item__buy { display: flex; align-items: center; gap: 10px; }
.opos-item__buy .o-qty { margin-top: 0; flex: 0 0 auto; padding: 2px; }
.opos-item__buy .o-qty__btn { width: 44px; height: 44px; }
.opos-item__buy .o-qty__n { min-width: 30px; font-size: 16px; }
.opos-item__add.o-btn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opos-item__add .opos-item__amt { font-weight: 600; }
.o-btn .o-spin { width: 16px; height: 16px; border-color: color-mix(in oklab, currentColor 35%, transparent); border-top-color: currentColor; }
/* table picker: the Tables floor (adminpos/tables-list.php) in small - a sunken floor, tiles filled by status */
.opos-tblf { display: flex; flex-direction: column; gap: 8px; }
.opos-tblf .o-seg { max-width: 100%; }
.opos-floor { padding: 14px; border-radius: var(--o-r-lg); background: var(--o-surface-2); }
.opos-tbls { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
@media (max-width: 420px) { .opos-tbls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opos-tbl { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 96px; padding: 12px 8px; border: 0; border-radius: var(--o-r); background: var(--o-surface); color: var(--o-text); text-align: center; cursor: pointer; transition: background var(--o-ease), transform var(--o-ease); }
.opos-tbl:active { transform: scale(.98); }
.opos-tbl:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-tbl__name { max-width: 100%; font: 800 17px/1.15 var(--o-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opos-tbl__meta { max-width: 100%; font: 500 12px/1.3 var(--o-font); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opos-tbl__st { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--o-r-pill); background: color-mix(in oklab, currentColor 12%, transparent); font: 700 11.5px/1.2 var(--o-font); }
.opos-tbl--occupied { background: var(--o-accent-tint); color: var(--o-accent-deep); cursor: not-allowed; }
.opos-tbl--reserved { background: var(--o-text); color: var(--o-bg); } /* ink, the inverse of the page, as the Tables floor */
.opos-tbl--cleaning { background: var(--o-warn-tint); color: var(--o-warn); cursor: not-allowed; }
.opos-tbl--unavailable { background: var(--o-surface-3); color: var(--o-text-3); cursor: not-allowed; }
.opos-tbl.is-picked { background: var(--o-accent-solid); color: var(--opos-on-solid); }
.opos-tbl__check { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--o-surface); color: var(--o-accent-deep); }
.opos-tbl__check svg { width: 13px; height: 13px; }
.opos-wait { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30vh; font: 500 14px/1 var(--o-font); color: var(--o-text-2); }
.opos-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; grid-column: 1 / -1; min-height: 160px; font: 500 14px/1.4 var(--o-font); color: var(--o-text-3); }
.opos-none svg { width: 28px; height: 28px; }
.opos-people { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.opos-people__q { margin: 0; font: 700 16px/1.3 var(--o-font); color: var(--o-text); }
.opos-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--o-r-pill); background: var(--o-surface-2); }
.opos-step__btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--o-surface); color: var(--o-text); cursor: pointer; transition: background var(--o-ease); }
.opos-step__btn:hover { background: var(--o-surface-3); }
.opos-step__btn:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-step__btn:disabled { opacity: .4; cursor: not-allowed; }
.opos-step__btn svg { width: 22px; height: 22px; }
.opos-step__val:not(#o) { width: auto; min-width: 104px; height: 52px; margin: 0; padding: 0 8px !important; border: 0 !important; border-radius: var(--o-r-pill); background: transparent !important; color: var(--o-text) !important; font: 700 20px/1 var(--o-font) !important; text-align: center; text-align-last: center; box-shadow: none !important; appearance: none; -webkit-appearance: none; cursor: pointer; }
.opos-step__val:not(#o):focus { outline: none; box-shadow: var(--o-ring) !important; }
.opos-picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 4px 4px 14px; border-radius: var(--o-r); background: var(--o-accent-tint); color: var(--o-accent-deep); font: 600 14px/1.3 var(--o-font); }
.opos-picked__clear { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--o-r-pill); background: none; color: inherit; font: 600 13.5px/1 var(--o-font); cursor: pointer; }
.opos-picked__clear:hover { background: var(--o-surface); }
.opos-picked__clear svg { width: 14px; height: 14px; }
/* customer picker */
.opos-search { position: relative; flex: 1 1 auto; min-width: 0; }
.opos-search__ico { position: absolute; left: 14px; top: 50%; z-index: 1; display: inline-flex; transform: translateY(-50%); color: var(--o-text-3); pointer-events: none; }
.opos-search__ico svg { width: 17px; height: 17px; }
.opos-search .o-input:not(#o) { padding-left: 40px !important; padding-right: 44px !important; }
.opos-search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--o-text-3); cursor: pointer; }
.opos-search__clear svg { width: 18px; height: 18px; }
.opos-req { color: var(--o-text-3); }
.opos-dlg__body > .o-field { margin: 0; }
.opos-dlg__body--list { gap: 2px; min-height: 40vh; padding-top: 4px; }
.opos-who { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--o-r); cursor: pointer; transition: background var(--o-ease); }
.opos-who:hover { background: var(--o-surface-2); }
.opos-who.is-on { background: var(--o-accent-tint); }
.opos-who__av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--o-surface-2); color: var(--o-text-2); font: 700 13px/1 var(--o-font); }
.opos-who.is-on .opos-who__av { background: var(--o-accent-solid); color: var(--opos-on-solid); }
.opos-who__name { margin: 0; font: 600 14.5px/1.3 var(--o-font); color: var(--o-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opos-who__ph { margin: 0; font: 400 13px/1.3 var(--o-font); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opos-who__check { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--o-accent-solid); color: var(--opos-on-solid); }
.opos-who__check svg { width: 14px; height: 14px; }
/* schedule sheet: "When is it for?" */
.opos-days { display: flex; flex-wrap: nowrap; gap: 8px; min-width: max-content; }
.opos-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; min-height: 72px; padding: 8px 4px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); cursor: pointer; transition: background var(--o-ease); }
.opos-day:hover { background: var(--o-surface-3); }
.opos-day.is-today { color: var(--o-accent-deep); }
.opos-day.is-on { background: var(--o-accent-solid); color: var(--opos-on-solid); }
.opos-day__wd { font: 600 12px/1.2 var(--o-font); opacity: .8; }
.opos-day__n { font: 800 18px/1.1 var(--o-font); }
.opos-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.opos-time.opos-opt { align-items: center; font: 600 14px/1.2 var(--o-font); }
/* small question labels inside the money sheets (payment, void, adjustments, schedule): sentence case, quiet */
.opos-q:not(#o) { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--o-font) !important; color: var(--o-text) !important; text-transform: none !important; letter-spacing: normal !important; }
/* the menu side (2026-10-17): the shared search bar, section chips and dish tiles. Depth from the surface and a soft
   shadow, never a border; the picked section is the orange tint, as everything picked in the till. */
.opos-search.o-search { margin: 0; }
.opos-cats { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.opos-cats::-webkit-scrollbar { display: none; }
.opos-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text-2); font: 600 14px/1 var(--o-font); white-space: nowrap; cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.opos-cat:hover { background: var(--o-surface-3); color: var(--o-text); }
.opos-cat:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-cat.is-on, .opos-cat.is-on:hover { background: var(--o-accent-tint); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-cat.is-on { color: var(--o-accent); }
.opos-viewseg.o-seg { padding: 2px; }
.opos-viewseg .o-seg__btn { min-width: 40px; min-height: 40px; padding: 0 10px; }
.opos-viewseg .o-seg__btn.is-on { color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-viewseg .o-seg__btn.is-on { color: var(--o-accent); }
.opos-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; padding: 2px; }
@media (max-width: 480px) { .opos-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.opos-dish { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: var(--o-r-lg); background: var(--o-surface); color: var(--o-text); box-shadow: var(--o-elev-1); text-align: left; overflow: hidden; cursor: pointer; transition: box-shadow var(--o-ease), transform var(--o-ease); }
.opos-dish:hover { box-shadow: var(--o-elev-2); }
.opos-dish:active { transform: scale(.98); }
.opos-dish:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-dish__img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--o-surface-2); }
.opos-dish__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.opos-dish__none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--o-text-3); }
.opos-dish__none svg { width: 28px; height: 28px; opacity: .45; }
.opos-dish__txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.opos-dish__name:not(#o) { margin: 0; font: 600 14px/1.3 var(--o-font); color: var(--o-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.opos-dish__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.opos-dish__price:not(#o) { margin: 0; font: 600 13.5px/1.2 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.opos-dish__opt:not(#o) { margin: 0; font: 500 12px/1.2 var(--o-font); color: var(--o-text-3); }
@media (prefers-reduced-motion: reduce) { .opos-dish, .opos-cat { transition: none; } .opos-dish:active { transform: none; } }
.opos-viewtabs.o-seg { display: inline-flex; width: auto; border-radius: var(--o-r-pill); }
.opos-viewtabs .o-seg__btn { min-height: 40px; padding: 0 18px; }
.opos-viewtabs .o-seg__btn.is-on { color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-viewtabs .o-seg__btn.is-on { color: var(--o-accent); }
/* the payment sheet (2026-10-19): bill and method on the left, quick amounts and keypad on the right; one column on
   a phone. Surfaces, no lines; the picked method is the orange tint, Pay is green, change is green, short is warn. */
.opos-pay.opos-dlg__panel { max-width: 760px; }
.opos-pay__body { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 8px; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .opos-pay__body { grid-template-columns: 1fr; } }
.opos-pay__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.opos-pay__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--o-r); background: var(--o-surface-2); }
.opos-pay__total span { font: 500 14px/1.2 var(--o-font); color: var(--o-text-2); }
.opos-pay__total b { font: 800 30px/1.1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.opos-pay__skel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opos-pay__skel span { height: 64px; border-radius: var(--o-r); background: var(--o-surface-2); animation: opos-pulse 1s ease-in-out infinite alternate; }
@keyframes opos-pulse { from { opacity: .55; } to { opacity: 1; } }
.opos-pay__methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opos-pm { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 68px; padding: 10px 8px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text-2); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.opos-pm:hover { background: var(--o-surface-3); color: var(--o-text); }
.opos-pm:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-pm.is-on, .opos-pm.is-on:hover { background: var(--o-accent-tint); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-pm.is-on { color: var(--o-accent); }
.opos-pm svg { width: 20px; height: 20px; flex: 0 0 auto; }
.opos-pm__name { max-width: 100%; font: 600 13.5px/1.2 var(--o-font); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opos-pm__note { font: 500 11px/1.2 var(--o-font); color: var(--o-text-3); }
.opos-pay__online { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--o-r); background: var(--o-surface-2); }
.opos-pay__online .opos-q { margin: 0; }
.opos-pay__row { display: flex; gap: 8px; }
.opos-pay__row .o-btn { flex: 0 0 auto; min-height: 48px; }
.opos-pay__phone.o-fld { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border-radius: var(--o-r); background: var(--o-surface); font: 600 16px/1 var(--o-font); }
.opos-pay__wait, .opos-pay__hint { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 13px/1.4 var(--o-font); color: var(--o-text-2); }
.opos-pay__wait .o-spin { width: 14px; height: 14px; }
.opos-pay__err { margin: 0; font: 500 13px/1.4 var(--o-font); color: var(--o-danger); }
.opos-pay__ok { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--o-font); color: var(--o-go-deep); }
.opos-pay__amount { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.opos-pay__amount > span { font: 500 13px/1.2 var(--o-font); color: var(--o-text-2); }
.opos-pay__amount input:not(#o) { width: 100%; height: 64px; margin: 0; padding: 0 16px !important; border: 0 !important; border-radius: var(--o-r) !important; background: var(--o-surface-2) !important; color: var(--o-text) !important; font: 800 32px/1 var(--o-font) !important; font-variant-numeric: tabular-nums; outline: none; box-shadow: none !important; }
.opos-pay__amount input:not(#o):focus { background: var(--o-surface) !important; box-shadow: var(--o-ring), var(--o-elev-1) !important; }
.opos-pay__result { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 4px 0; font: 600 15px/1.2 var(--o-font); color: var(--o-text-2); }
.opos-pay__result b { font: 800 22px/1.1 var(--o-font); color: var(--o-text); font-variant-numeric: tabular-nums; }
.opos-pay__result.is-change span, .opos-pay__result.is-change b { color: var(--o-go-deep); }
.opos-pay__result.is-short span, .opos-pay__result.is-short b { color: var(--o-warn); }
:root[data-orderly-theme="dark"] .opos-pay__result.is-change span, :root[data-orderly-theme="dark"] .opos-pay__result.is-change b { color: var(--o-go); }
.opos-pay__pad { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.opos-pay__quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.opos-pay__quick::-webkit-scrollbar { display: none; }
.opos-qa { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--o-r-pill); background: var(--o-surface-2); color: var(--o-text); font: 700 14px/1 var(--o-font); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.opos-qa:hover { background: var(--o-surface-3); }
.opos-qa:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-qa.is-on, .opos-qa.is-on:hover { background: var(--o-accent-tint); color: var(--o-accent-deep); }
:root[data-orderly-theme="dark"] .opos-qa.is-on { color: var(--o-accent); }
.opos-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opos-key { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); font: 700 20px/1 var(--o-font); font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 90ms ease, transform 90ms ease; }
.opos-key:hover { background: var(--o-surface-3); }
.opos-key:active { transform: scale(.96); background: var(--o-surface-3); }
.opos-key:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-key--back { color: var(--o-text-2); }
.opos-key--back svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .opos-keys { display: none; } .opos-pay__body { gap: 14px; } .opos-pm { min-height: 60px; } .opos-pay__total b { font-size: 26px; } } /* a phone types on its own number pad (inputmode) */
.opos-pay__cancel.o-btn { flex: 0 0 auto; min-width: 104px; }
.opos-pay__go.o-btn { flex: 1 1 auto; font-size: 16px; font-variant-numeric: tabular-nums; }
/* paid */
.opos-paid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px calc(24px + env(safe-area-inset-bottom)); text-align: center; animation: o-sheet-up 180ms cubic-bezier(.16, 1, .3, 1); }
.opos-paid__tick { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--o-go-tint); color: var(--o-go-deep); }
.opos-paid__tick svg { width: 30px; height: 30px; stroke-width: 2.6; }
.opos-paid__title { margin: 0; font: 800 26px/1.15 var(--o-font); color: var(--o-text); }
.opos-paid__sub { margin: 0; font: 500 15px/1.35 var(--o-font); color: var(--o-text-2); font-variant-numeric: tabular-nums; }
.opos-paid__change { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px 0 4px; padding: 14px 28px; border-radius: var(--o-r-lg); background: var(--o-go-tint); color: var(--o-go-deep); }
.opos-paid__change span { font: 600 14px/1.2 var(--o-font); }
.opos-paid__change b { font: 800 34px/1.1 var(--o-font); font-variant-numeric: tabular-nums; }
:root[data-orderly-theme="dark"] .opos-paid__change, :root[data-orderly-theme="dark"] .opos-paid__tick { color: var(--o-go); }
.opos-paid__btns { display: flex; gap: 8px; width: 100%; max-width: 380px; margin-top: 14px; }
.opos-paid__btns .o-btn { flex: 1 1 0; min-height: 52px; }
@media (prefers-reduced-motion: reduce) { .opos-pay__skel span, .opos-paid { animation: none; } .opos-key { transition: none; } }
.opos-pay__split { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: -6px; padding: 0 10px; border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-text-2); font: 600 13.5px/1 var(--o-font); cursor: pointer; transition: background var(--o-ease), color var(--o-ease); }
.opos-pay__split:hover { background: var(--o-surface-2); color: var(--o-text); }
.opos-pay__split:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-pay__result svg { color: var(--o-go-deep); }
/* In the kitchen (2026-10-19): open orders from the Kitchen app above the menu. A child can read it: green ready,
   orange cooking, grey waiting; the dot carries the colour, the words say it too. */
.opos-kitchen { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.opos-kitchen__head { display: flex; align-items: center; gap: 8px; padding: 0 4px; color: var(--o-text-2); }
.opos-kitchen__title { flex: 0 0 auto; font: 700 14px/1.2 var(--o-font); color: var(--o-text); white-space: nowrap; }
.opos-kitchen__sum { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.2 var(--o-font); color: var(--o-text-2); }
.opos-kitchen__head > svg { flex: 0 0 auto; }
.opos-kitchen__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.opos-kitchen__list::-webkit-scrollbar { display: none; }
.opos-kt { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 12px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); text-align: left; cursor: pointer; transition: background var(--o-ease); }
.opos-kt:hover { background: var(--o-surface-3); }
.opos-kt:focus-visible { outline: none; box-shadow: var(--o-ring); }
.opos-kt:disabled { cursor: default; }
.opos-kt__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--o-text-3); }
.opos-kt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opos-kt__txt b { font: 700 14px/1.2 var(--o-font); white-space: nowrap; }
.opos-kt__txt small { font: 500 12.5px/1.2 var(--o-font); color: var(--o-text-2); white-space: nowrap; }
.opos-kt.is-cooking { background: var(--o-accent-tint); }
.opos-kt.is-cooking .opos-kt__dot { background: var(--o-accent); animation: opos-cook 1.4s ease-in-out infinite; }
.opos-kt.is-cooking small { color: var(--o-accent-deep); }
.opos-kt.is-ready { background: var(--o-go-tint); }
.opos-kt.is-ready .opos-kt__dot { background: var(--o-go); }
.opos-kt.is-ready small { color: var(--o-go-deep); font-weight: 700; }
:root[data-orderly-theme="dark"] .opos-kt.is-cooking small { color: var(--o-accent); }
@keyframes opos-cook { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .opos-kt.is-cooking .opos-kt__dot { animation: none; } }
/* AI POS pane: the till's surface, no lines; the input is a quiet field with the focus ring, suggestions in its placeholder */
.opos-aipane { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--o-r-lg); background: var(--o-surface); box-shadow: var(--o-elev-1); }
.opos-aipane .oai-form { border-top: 0; background: var(--o-surface); padding: 10px 12px 12px; }
.opos-aipane .oai-input:not(#o) { min-height: 48px; padding: 13px 14px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text); font: 400 15px/1.4 var(--o-font); box-shadow: none; transition: background var(--o-ease), box-shadow var(--o-ease); }
.opos-aipane .oai-input:not(#o):focus { background: var(--o-surface); box-shadow: var(--o-ring), var(--o-elev-1); }
.opos-aipane .oai-input::placeholder { color: var(--o-text-3); }
.opos-aipane .oai-send { width: 48px; height: 48px; flex: 0 0 auto; }
.opos-aipane .oai-log { flex: 1 1 auto; background: var(--o-surface); }
/* §29 One corner scale (2026-10-19, owner: "rounding border radius issues across the app"). The prebuilt Tailwind file
   and the old theme brought eight sizes (4 to 30 px); the back office now uses the ODS three: --o-r-sm 10 (small parts),
   --o-r 14 (controls, tiles, cards), --o-r-lg 18 (panels, sheets, dialogs), plus round. custom.css / style.css were
   moved onto the tokens; this maps the Tailwind classes the views use. rounded (4px) and rounded-full are left alone. */
.rounded-md:not(#o), .\!rounded-md:not(#o), .rounded-lg:not(#o), .\!rounded-lg:not(#o) { border-radius: var(--o-r-sm) !important; }
.rounded-xl:not(#o), .\!rounded-xl:not(#o) { border-radius: var(--o-r) !important; }
.rounded-2xl:not(#o), .\!rounded-2xl:not(#o), .rounded-3xl:not(#o), .\!rounded-3xl:not(#o) { border-radius: var(--o-r-lg) !important; }
.rounded-t-2xl:not(#o), .rounded-t-3xl:not(#o) { border-top-left-radius: var(--o-r-lg) !important; border-top-right-radius: var(--o-r-lg) !important; }
.rounded-t-xl:not(#o) { border-top-left-radius: var(--o-r) !important; border-top-right-radius: var(--o-r) !important; }
/* Bootstrap and Quasar pieces the views still carry */
.card:not(#o), .modal-content:not(#o), .q-card:not(#o), .q-dialog__inner > div:not(#o) { border-radius: var(--o-r-lg); }
.dropdown-menu:not(#o), .q-menu:not(#o) { border-radius: var(--o-r); }
.form-control:not(#o), .custom-select:not(#o), .q-field--outlined .q-field__control:not(#o) { border-radius: var(--o-r-sm); }
.rounded-t-lg:not(#o) { border-top-left-radius: var(--o-r-sm) !important; border-top-right-radius: var(--o-r-sm) !important; }
.rounded-b-xl:not(#o) { border-bottom-left-radius: var(--o-r) !important; border-bottom-right-radius: var(--o-r) !important; }
/* Element Plus pieces on the same scale: tags and buttons round like o-chip / o-btn, fields small, popovers medium */
html body .el-tag:not(#o) { border-radius: var(--o-r-pill); }
html body .el-button:not(#o):not(.is-circle):not(.el-button--text) { border-radius: var(--o-r-pill); }
#main-container .el-select__wrapper:not(#o), #main-container .el-textarea__inner:not(#o), #main-container .el-date-editor.el-input__wrapper:not(#o) { border-radius: var(--o-r-sm); }
html body .el-popover.el-popper:not(#o), html body .el-select-dropdown:not(#o), html body .el-dropdown-menu:not(#o), html body .el-picker-panel:not(#o) { border-radius: var(--o-r); }
/* §30 Numbers in DM Sans (2026-10-19, owner: "fix the dashboard font"). Tailwind's font-mono put money and counts in a
   typewriter face; Orderly is DM Sans everywhere. Tabular figures keep columns lined up. Real code (kbd, code, pre)
   stays monospaced. */
.font-mono:not(kbd):not(code):not(pre):not(#o) { font-family: var(--o-font, "DM Sans", system-ui, sans-serif) !important; font-variant-numeric: tabular-nums; }
/* §31 One accent (2026-10-19, owner: "check the other back office pages for the same issues"). Violet, purple, indigo
   and fuchsia were decoration (icon tiles, tip chips, info boxes, placeholder tints), never a status: statuses use
   o-dot-* and blue stays the agreed "new" colour. Every such class the views and scripts use, on the Orderly tint and
   orange; light borders go (no lines). .o-keep-hues opts out where hues are data (the admin channel legend). */
:root:root [class~="bg-fuchsia-100"]:not(.o-keep-hues *),
:root:root [class~="bg-fuchsia-50"]:not(.o-keep-hues *),
:root:root [class~="bg-indigo-100"]:not(.o-keep-hues *),
:root:root [class~="bg-indigo-50"]:not(.o-keep-hues *),
:root:root [class~="bg-purple-100"]:not(.o-keep-hues *),
:root:root [class~="bg-purple-50"]:not(.o-keep-hues *),
:root:root [class~="bg-violet-100"]:not(.o-keep-hues *),
:root:root [class~="bg-violet-200"]:not(.o-keep-hues *),
:root:root [class~="bg-violet-50"]:not(.o-keep-hues *),
:root:root [class~="hover:bg-violet-50"]:hover:not(.o-keep-hues *) { background-color: var(--o-accent-tint) !important; }
:root:root [class~="bg-fuchsia-500"]:not(.o-keep-hues *),
:root:root [class~="bg-indigo-500"]:not(.o-keep-hues *),
:root:root [class~="bg-indigo-600"]:not(.o-keep-hues *),
:root:root [class~="bg-purple-500"]:not(.o-keep-hues *),
:root:root [class~="bg-violet-500"]:not(.o-keep-hues *),
:root:root [class~="bg-violet-600"]:not(.o-keep-hues *),
:root:root [class~="hover:bg-indigo-500"]:hover:not(.o-keep-hues *),
:root:root [class~="hover:bg-violet-700"]:hover:not(.o-keep-hues *) { background-color: var(--o-accent) !important; --tw-gradient-from: var(--o-accent); --tw-gradient-to: var(--o-accent); }
:root:root [class~="hover:text-violet-700"]:hover:not(.o-keep-hues *),
:root:root [class~="text-indigo-600"]:not(.o-keep-hues *),
:root:root [class~="text-indigo-900"]:not(.o-keep-hues *),
:root:root [class~="text-purple-600"]:not(.o-keep-hues *),
:root:root [class~="text-violet-400"]:not(.o-keep-hues *),
:root:root [class~="text-violet-500"]:not(.o-keep-hues *),
:root:root [class~="text-violet-600"]:not(.o-keep-hues *),
:root:root [class~="text-violet-700"]:not(.o-keep-hues *),
:root:root [class~="text-violet-800"]:not(.o-keep-hues *),
:root:root [class~="text-violet-900"]:not(.o-keep-hues *) { color: var(--o-accent-deep) !important; }
:root:root [class~="border-indigo-100"]:not(.o-keep-hues *),
:root:root [class~="border-violet-200"]:not(.o-keep-hues *) { border-color: transparent !important; }
:root:root [class~="border-indigo-500"]:not(.o-keep-hues *),
:root:root [class~="border-violet-400"]:not(.o-keep-hues *),
:root:root [class~="focus:border-violet-400"]:focus:not(.o-keep-hues *),
:root:root [class~="hover:border-violet-400"]:hover:not(.o-keep-hues *) { border-color: var(--o-accent) !important; }
:root:root [class~="focus:ring-indigo-500"]:focus:not(.o-keep-hues *),
:root:root [class~="focus:ring-violet-100"]:focus:not(.o-keep-hues *) { --tw-ring-color: var(--o-accent) !important; }
:root[data-orderly-theme="dark"] [class~="hover:text-violet-700"]:hover:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-indigo-600"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-indigo-900"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-purple-600"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-400"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-500"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-600"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-700"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-800"]:not(.o-keep-hues *),
:root[data-orderly-theme="dark"] [class~="text-violet-900"]:not(.o-keep-hues *) { color: var(--o-accent) !important; }
/* Order page details (2026-10-19, owner's screenshot): quiet labels without colons, a summary whose total is the
   biggest line, a calm note instead of an alert box, payment history headers in sentence case. */
html body .orderly-ov .oov-side h5:not(#o) { font: 600 13px/1.3 var(--o-font) !important; letter-spacing: 0 !important; color: var(--o-text-2) !important; margin-bottom: 4px !important; }
html body .orderly-ov .oov-line:not(#o) { align-items: flex-start; margin-bottom: 14px; }
html body .orderly-ov .oov-line__name:not(#o) { font: 600 15px/1.35 var(--o-font) !important; color: var(--o-text) !important; margin: 0 0 2px !important; }
html body .orderly-ov .oov-line__cat:not(#o) { font: 400 13px/1.3 var(--o-font) !important; font-style: normal !important; color: var(--o-text-3) !important; margin: 0 0 2px !important; }
html body .orderly-ov .oov-line__unit:not(#o) { font: 500 13px/1.3 var(--o-font) !important; color: var(--o-text-2) !important; font-variant-numeric: tabular-nums; }
html body .orderly-ov .oov-line .text-right:not(#o) { font: 600 15px/1.35 var(--o-font) !important; color: var(--o-text) !important; }
html body .orderly-ov .oov-line img.img-40:not(#o) { width: 48px; height: 48px; object-fit: cover; border-radius: var(--o-r-sm) !important; background: var(--o-surface-2); }
html body .orderly-ov .oov-sum:not(#o) { font: 400 14px/1.4 var(--o-font) !important; color: var(--o-text-2) !important; font-variant-numeric: tabular-nums; margin-bottom: 6px !important; }
html body .orderly-ov .oov-sum > div:last-child:not(#o) { color: var(--o-text) !important; }
html body .orderly-ov .oov-sum.is-total:not(#o) { margin-top: 10px; }
html body .orderly-ov .oov-sum.is-total h6:not(#o) { font: 800 20px/1.25 var(--o-font) !important; color: var(--o-text) !important; letter-spacing: -0.01em; }
html body .orderly-ov .oov-note:not(#o) { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: var(--o-r); background: var(--o-surface-2); color: var(--o-text-2); font: 500 14px/1.4 var(--o-font); }
html body .orderly-ov .oov-note .o-ico:not(#o) { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 !important; color: var(--o-text-3); }
html body .orderly-ov .oov-table th:not(#o) { text-transform: none !important; letter-spacing: 0 !important; font: 600 13px/1.3 var(--o-font) !important; }
html body .orderly-ov .oov-side .d-flex.mt-3 > div:not(#o), html body .orderly-ov .oov-side .d-flex.mt-3 p:not(#o) { font: 400 14px/1.5 var(--o-font); }
html body .orderly-ov .oov-side .d-flex.mt-3 b:not(#o) { font-weight: 600; }
/* Order details: each fact is a label over its value, so long values never squeeze into a column */
html body .orderly-ov .oov-meta-grid:not(#o) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 4px 24px !important; }
html body .orderly-ov .oov-meta-item:not(#o) { grid-template-columns: 1fr !important; gap: 4px !important; padding: 10px 0 !important; border: 0 !important; }
html body .orderly-ov .oov-meta-item dt:not(#o) { font: 500 13px/1.3 var(--o-font) !important; }
html body .orderly-ov .oov-meta-item dd:not(#o) { font: 600 15px/1.35 var(--o-font) !important; }
html body .orderly-ov .oov-meta + .oov-sec-title:not(#o), html body .orderly-ov h6.oov-sec-title.font13:not(#o) { margin-top: 24px !important; }
html body .orderly-ov .oov-meta-item dd p:not(#o) { font: inherit !important; color: inherit !important; }
.text-violet:not(.o-keep-hues *):not(#o) { color: var(--o-accent-deep) !important; }
:root[data-orderly-theme="dark"] .text-violet:not(.o-keep-hues *):not(#o) { color: var(--o-accent) !important; }
/* code samples: Bootstrap's pink is a fourth accent; ODS ink on the soft surface */
#main-container code:not(#o), .main-container code:not(#o) { color: var(--o-text-2); background: var(--o-surface-2); padding: 1px 6px; border-radius: 6px; }
/* Element square avatars and pagination on the corner scale */
html body .el-avatar--square:not(#o) { border-radius: var(--o-r-sm); }
html body .el-pager li:not(#o), html body .el-pagination button:not(#o) { border-radius: var(--o-r-pill); }
/* Status icon tiles, on the o-chip[data-status] palette (ods.css): new = Orderly tint, preparing / on the way = yellow,
   ready = green, completed = neutral, cancelled = red. A child reads the colour; the word says it too. */
.o-stat-ic { flex: 0 0 auto; }
.o-stat-ic--new { background: var(--o-accent-tint); color: var(--o-accent-deep); }
.o-stat-ic--busy { background: var(--o-warn-tint); color: var(--o-warn); }
.o-stat-ic--go { background: var(--o-go-tint); color: var(--o-go-deep); }
.o-stat-ic--done { background: var(--o-surface-2); color: var(--o-text-2); }
.o-stat-ic--stop { background: var(--o-danger-tint); color: var(--o-danger); }
:root[data-orderly-theme="dark"] .o-stat-ic--new { color: var(--o-accent); }
:root[data-orderly-theme="dark"] .o-stat-ic--go { color: var(--o-go); }