* {
  box-sizing: border-box;
}
body {
  font:
    16px Arial,
    sans-serif;
  background: #FFF8F2;
  color: #262626;
  margin: 0;
  padding: 24px;
}
main {
  max-width: 1050px;
  margin: auto;
}
header,
.card {
  background: white;
  border: 1px solid #E5D7CC;
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 20px;
}
h1 {
  margin: 0 0 10px;
}
h2 {
  font-size: 22px;
}
label {
  display: block;
  margin: 14px 0;
}
input,
select,
textarea,
button {
  font: inherit;
  padding: 12px;
  border: 1px solid #E5D7CC;
  border-radius: 8px;
}
input,
textarea,
select {
  width: 100%;
  margin-top: 6px;
}
button {
  background: #AD431F;
  color: white;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.menu-row input {
  width: 85px;
}
.muted {
  color: #262626;
  font-size: 14px;
  line-height: 1.5;
}
.message {
  white-space: pre-wrap;
  line-height: 1.5;
}
article {
  padding: 16px;
  margin-top: 14px;
  background: #FFF8F2;
  border-radius: 10px;
}
li {
  padding: 4px 0;
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .columns {
    grid-template-columns: 1fr;
  }
  body {
    padding: 12px;
  }
}

dialog {
  border: 1px solid #E5D7CC;
  border-radius: 14px;
  max-width: 440px;
  width: 94%;
  max-height: 90vh;
  padding: 22px;
  color: #262626;
}
dialog::backdrop {
  background: #0008;
}
.receipt-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.receipt-actions button {
  flex: 1;
}
#receiptContent {
  font: 14px Arial;
  color: #111;
}
#receiptContent h2,
#receiptContent .center {
  text-align: center;
}
#receiptContent td {
  overflow-wrap: anywhere;
}
#receiptContent table {
  width: 100%;
  border-collapse: collapse;
}
#receiptContent td,
#receiptContent th {
  padding: 8px 3px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
#receiptContent td:last-child,
#receiptContent th:last-child {
  text-align: right;
}
#receiptContent hr {
  border: 0;
  border-top: 1px dashed #777;
}
@media print {
  @page {
    margin: 10mm;
  }
  body {
    background: white;
    padding: 0;
  }
  body > main {
    display: none !important;
  }
  dialog[open] {
    display: block !important;
    position: static;
    margin: 0 auto;
    border: 0;
    padding: 0;
    width: 72mm;
    max-width: 100%;
    max-height: none;
    overflow: visible;
  }
  .receipt-actions {
    display: none !important;
  }
  dialog::backdrop {
    background: transparent;
  }
  #receiptContent {
    font-size: 12px;
  }
  #receiptContent tr {
    break-inside: avoid;
  }
}

html.receipt-route main {
  display: none !important;
}
#publicReceiptPanel {
  max-width: 440px;
  margin: 0 auto 20px;
}
.receipt-route dialog {
  position: relative;
  margin: 0 auto;
  max-height: none;
}
.receipt-qr {
  text-align: center;
  break-inside: avoid;
  margin: 20px 0;
}
.receipt-qr img {
  display: block;
  width: 180px;
  height: 180px;
  max-width: 100%;
  margin: auto;
  image-rendering: pixelated;
}
.receipt-qr p {
  margin: 5px;
}
.receipt-qr a {
  color: #262626;
  font-size: 12px;
}
.receipt-actions {
  flex-wrap: wrap;
}
.receipt-actions button {
  min-width: 100px;
}
#printReceipt {
  flex-basis: 100%;
}
@media print {
  #publicReceiptPanel {
    display: none !important;
  }
  .receipt-qr img {
    width: 38mm;
    height: 38mm;
  }
  .receipt-qr a {
    display: none;
  }
}

/* Print only the receipt, including when the host injects floating badges. */
@media print {
  body > :not(#receiptDialog) {
    display: none !important;
  }
  #receiptDialog > :not(#receiptContent) {
    display: none !important;
  }
  html.receipt-route #receiptDialog,
  #receiptDialog[open] {
    position: static !important;
    margin: 0 auto !important;
    border: 0 !important;
    box-shadow: none !important;
    background: white !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
.brand-heading {
  margin: 0 0 12px;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
}
.receipt-brand {
  break-inside: avoid;
  text-align: center;
}
.receipt-brand img {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.receipt-brand p {
  margin: 10px 0 0;
}
@media print {
  .receipt-brand img {
    width: 42mm;
  }
}
.secondary {
  background: #F7E9DD;
  color: #262626;
}
.menu-row p {
  margin: 6px 0;
  font-size: 14px;
}
.menu-row > div {
  min-width: 0;
}
.menu-row button {
  flex-shrink: 0;
}
.cart-line {
  background: #FFF8F2;
  margin: 12px 0;
  padding: 14px;
}
.cart-line p {
  overflow-wrap: anywhere;
}
.cart-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cart-controls input {
  width: 75px;
  margin: 0;
}
.cart-controls button {
  padding: 10px;
}
.choice-group {
  margin: 20px 0;
  border-top: 1px solid #E5D7CC;
  padding-top: 12px;
}
.choice-group legend {
  font-weight: bold;
  font-size: 15px;
}
.option-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #E5D7CC;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}
.option-choice:has(input:checked) {
  background: #F7E9DD;
  border-color: #262626;
}
.option-choice input {
  width: auto;
  margin: 0;
  flex: none;
  accent-color: #D65A2E;
}
.option-choice span:last-child {
  margin-left: auto;
  font-size: 12px;
  color: #262626;
  text-align: right;
}
.item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: white;
  position: sticky;
  bottom: -22px;
  padding: 12px 0;
}
.item-actions strong {
  margin-right: auto;
}
#itemError {
  color: #a52020;
}
#itemDialog {
  max-width: 540px;
  color: #262626;
}
#itemDialog h2 {
  margin-top: 0;
}
.editor-group {
  border: 1px solid #E5D7CC;
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
}
.editor-group legend {
  font-weight: bold;
}
.editor-group button {
  margin: 5px;
}
.editor-choice {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  border-bottom: 1px solid #E5D7CC;
  padding: 10px 0;
}
.editor-choice label {
  margin: 0;
}
.editor-choice button {
  grid-column: 1 / -1;
  justify-self: start;
}
summary {
  cursor: pointer;
  font-weight: bold;
}
#optionsManager {
  margin-top: 20px;
}
#optionsManager > p {
  max-width: 720px;
}

/* Product photographs and owner editor. Print rules above still show receipts only. */
:root {
  --brand-color: #AD431F;
  --page-color: #FFF8F2;
}
body {
  color: var(--brand-color);
  background: var(--page-color);
}
button {
  background: var(--brand-color);
}
.secondary {
  background: #F7E9DD;
  color: var(--brand-color);
}
.menu-photo {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #F7E9DD;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu-photo span,
.photo-preview span {
  font-size: 12px;
  padding: 8px;
  text-align: center;
  color: #262626;
}
.menu-description {
  flex: 1;
  min-width: 0;
}
.menu-description strong {
  overflow-wrap: anywhere;
}
#itemPhoto .photo-preview {
  width: 100%;
  height: 190px;
  margin-bottom: 16px;
}
.photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF8F2;
  border-radius: 10px;
  overflow: hidden;
}
.photo-preview img,
#productPreview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#productPreview {
  width: 100%;
  max-width: 340px;
  height: 220px;
  background: #FFF8F2;
  border: 1px solid #E5D7CC;
  border-radius: 10px;
  overflow: hidden;
}
#productPreview > .photo-preview {
  height: 100%;
}
.product-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.product-availability {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-availability input {
  width: auto;
  margin: 0;
}
.product-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
#productSaveStatus {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#productForm label {
  font-weight: bold;
}
#productForm label input,
#productForm label select,
#productForm label textarea {
  font-weight: normal;
}
@media (max-width: 700px) {
  .product-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .menu-photo {
    width: 66px;
    height: 66px;
  }
  .menu-row {
    flex-wrap: wrap;
  }
  .menu-row button {
    margin-left: auto;
  }
  .menu-description {
    flex-basis: 55%;
  }
}

/* Inventory balances/history wrap on narrow staff phones. */
.stock-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid #E5D7CC;
  overflow-wrap: anywhere;
}
#inventoryManager form {
  min-width: 0;
}
#inventoryManager summary {
  cursor: pointer;
  font-weight: 700;
}

.recipe-row {
  border: 1px solid #E5D7CC;
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
  min-width: 0;
}
.recipe-row select {
  width: 100%;
  min-width: 0;
}
#recipeManager summary {
  cursor: pointer;
  font-weight: 700;
}

/* Customer table link tools (owner only). */
.customer-qr {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 16px 0;
}
.table-link {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
#customerTableList a {
  display: block;
  margin: 12px 0;
}
#customerQueue li {
  overflow-wrap: anywhere;
}

/* Preserve the database's one-line-per-ingredient shortage report. */
#orderStatus,
#customerQueueMessage {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.customer-review-error {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #8b2020;
  background: #fff2f2;
  padding: 12px;
  border: 1px solid #e5b5b5;
  border-radius: 8px;
}

/* Keep control and text on the same line, without full-width checkbox styling. */
#customerHoursForm label:has(input[type="checkbox"]),
.customer-line-choice {
  display: flex;
  align-items: center;
  gap: 10px;
}
#customerHoursForm input[type="checkbox"],
.customer-line-choice input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  flex: 0 0 20px;
  order: -1;
}
#customerHoursDays fieldset {
  margin: 16px 0;
  border: 1px solid #E5D7CC;
  border-radius: 10px;
  padding: 16px;
}

.ai-photo-studio { margin-top: 24px; padding: 18px; border: 1px solid #E5D7CC; border-radius: 16px; background: #FFF8F2; }
.ai-photo-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.ai-photo-compare[hidden] { display: none; }
.ai-photo-compare figure { margin: 0; }
.ai-photo-compare img { width: 100%; aspect-ratio: 1; object-fit: contain; background: white; border-radius: 10px; }
.ai-photo-compare figcaption { font-weight: 600; margin-bottom: 8px; }

/* Owner camera and Ask Cornnect */
#productCameraDialog { width:min(92vw,600px); padding:1.2rem; border:1px solid #E5D7CC; border-radius:18px; }
#productCameraVideo { width:100%; max-height:65vh; background:#102440; border-radius:12px; }
#askCornnect { margin:24px 0; padding:24px; border:1px solid #E5D7CC; border-radius:16px; background:white; }
#askCornnect summary { font-weight:700; cursor:pointer; }
.ask-message { padding:16px; margin:12px 0; background:#FFF8F2; border-radius:12px; }
.ask-message p { white-space:pre-wrap; overflow-wrap:anywhere; }
.ask-table-scroll { max-width:100%; overflow-x:auto; }
#askReport table { width:100%; border-collapse:collapse; }
#askReport th, #askReport td { text-align:left; padding:8px; border-bottom:1px solid #E5D7CC; }
#askReport { min-width:0; }
.ask-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
#askMessages { max-height:65vh; overflow-y:auto; }

/* Request rows already have checkboxes: suppress list bullets that overlap on Safari. */
#customerQueue .customer-request-lines { list-style: none; padding: 0; margin: 16px 0; }
#customerQueue .customer-request-lines > li { list-style: none; padding: 12px 0; }
#customerQueue .customer-request-lines > li::marker { content: ""; }
.customer-accept-quantity { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0 0 30px; }
.customer-accept-quantity input { width:90px; min-height:44px; margin:0; }

/* Cornnie: persistent, owner-only assistant dock. */
#cornnieLauncher { position:fixed; right:24px; bottom:calc(22px + env(safe-area-inset-bottom,0px) + var(--cornnie-keyboard-offset,0px)); z-index:900; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border:1px solid #E5D7CC; border-radius:40px; background:#AD431F; color:white; box-shadow:0 6px 28px #102b5530; text-align:left; }
#cornnieLauncher img { border-radius:50%; object-fit:cover; border:2px solid white; }
#cornnieLauncher strong { display:block; font-size:15px; letter-spacing:.1px; }
#cornnieLauncher small { display:block; color:#FFF8F2; font-size:11px; margin-top:3px; }
.cornnie-launch-icon { font-size:24px; margin-left:7px; }
#cornnieLauncher:hover { background:#923719; }
#cornnieLauncher:focus-visible,#askCornnect button:focus-visible { outline:3px solid #D65A2E; outline-offset:3px; }
#askCornnect { position:fixed; z-index:901; right:24px; bottom:calc(100px + env(safe-area-inset-bottom,0px) + var(--cornnie-keyboard-offset,0px)); width:430px; max-width:calc(100vw - 32px); height:min(720px,calc(var(--cornnie-view-height,100dvh) - 124px)); min-height:0; margin:0; padding:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #E5D7CC; border-radius:24px; background:#fff; box-shadow:0 16px 60px #112e5a30; font-size:14px; text-align:left; }
.cornnie-header { flex:none; display:flex; align-items:center; gap:12px; background:#AD431F; color:#fff; padding:18px; }
.cornnie-header img { border-radius:50%; object-fit:cover; border:2px solid #fff; }
#cornnieTitle { margin:0; font-size:18px; line-height:1.3; }
#cornnieTitle span { display:block; font-size:12px; font-weight:400; color:#FFF8F2; margin-top:3px; }
.cornnie-header p { margin:6px 0 0; font-size:11px; color:#FFF8F2; }
#cornnieMinimise { margin-left:auto; padding:0; width:36px; height:36px; min-width:36px; font-size:26px; line-height:1; border:1px solid #ffffff40; border-radius:50%; background:transparent; color:white; }
.cornnie-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px; background:#FFF8F2; }
#askSettings { border:1px solid #E5D7CC; border-radius:12px; background:white; padding:12px; }
#askSettings summary { font-size:12px; color: #262626; }
#cornniePeriodLabel { margin-left:8px; color: #262626; }
#askCornnect label { font-size:12px; font-weight:600; margin:12px 0 0; }
#askCornnect select,#askCornnect input { min-width:0; font-size:14px; background:white; color: #262626; }
.cornnie-date-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
#askCornnect .muted { font-size:11px; }
.cornnie-welcome { text-align:center; padding:26px 0 16px; }
.cornnie-welcome img { object-fit:cover; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 18px #AD431F18; }
.cornnie-welcome .cornnie-eyebrow { margin:16px 0 8px; font-size:9px; letter-spacing:1.4px; font-weight:700; color: #262626; }
.cornnie-welcome h3 { margin:0 0 10px; font-size:26px; letter-spacing:-.6px; }
.cornnie-welcome p { color: #262626; line-height:1.6; margin:0; }
#askMessages { max-height:none; overflow:visible; }
#askMessages .ask-message { margin:14px 0; padding:14px; background:white; border:1px solid #E5D7CC; border-radius:16px 16px 16px 4px; line-height:1.65; }
#askMessages .ask-message-user { background:#F7E9DD; margin-left:24px; border:0; border-radius:16px 16px 4px 16px; }
#askMessages .ask-message strong { font-size:11px; color: #262626; }
#askMessages .ask-message p { margin:6px 0 0; }
#askCornnect .ask-suggestions { display:grid; gap:8px; margin:12px 0; }
#askCornnect .ask-suggestions button { text-align:left; border:1px solid #E5D7CC; background:white; color: #262626; padding:11px 14px; border-radius:12px; font-size:13px; }
#askCornnect .ask-suggestions button:hover { background:#F7E9DD; }
.cornnie-report-actions { display:flex; justify-content:space-between; gap:8px; }
#askReportButton,#askClear { background:transparent; border:0; color: #262626; padding:10px 0; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
#askEvidence { padding:14px 0; font-size:12px; }
#askReport { max-height:280px; overflow:auto; }
#askReport table { font-size:11px; }
.cornnie-about { margin:12px 0 4px; color: #262626; font-size:11px; line-height:1.5; }
.cornnie-about summary { font-weight:400!important; }
.cornnie-compose { flex:none; padding:12px 16px 10px; border-top:1px solid #E5D7CC; background:white; }
#askForm { display:flex; align-items:flex-end; border:1px solid #E5D7CC; border-radius:14px; padding:6px; background:#FFF8F2; gap:6px; }
#askQuestion { border:0; background:transparent; padding:8px; margin:0; resize:none; font-size:16px; line-height:1.5; min-width:0; max-height:110px; color: #262626; }
#askQuestion:focus { outline:none; }
#askForm:focus-within { outline:2px solid #D65A2E; }
#askSend { border:0; border-radius:10px; padding:10px 12px; min-height:44px; font-size:12px; white-space:nowrap; }
#askStatus { margin:7px 0 0; max-height:70px; overflow:auto; font-size:11px; line-height:1.45; color: #262626; overflow-wrap:anywhere; }
#askStatus:empty { display:none; }
.cornnie-footnote { font-size:10px; text-align:center; color: #262626; margin:8px 0 0; }
.cornnie-sr-only { position:absolute; width:1px; height:1px; padding:0!important; margin:-1px!important; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:600px){
 #cornnieLauncher { right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--cornnie-keyboard-offset,0px)); padding:6px 12px 6px 6px; gap:9px; }
 #cornnieLauncher img { width:42px; height:42px; }
 #askCornnect { right:10px; bottom:calc(80px + env(safe-area-inset-bottom,0px) + var(--cornnie-keyboard-offset,0px)); width:calc(100vw - 20px); max-width:none; height:calc(var(--cornnie-view-height,100dvh) - 96px - env(safe-area-inset-bottom,0px)); border-radius:20px; }
 .cornnie-header { padding:12px 14px; }
 .cornnie-header img { width:44px; height:44px; }
 .cornnie-body { padding:12px 16px; }
 .cornnie-welcome { padding:18px 0 10px; }
}
@media print { #cornnieLauncher,#askCornnect { display:none!important; } }

.cornnie-auto-hint { font-size:12px; line-height:1.5; color: #262626; margin:0 0 12px; }
.cornnie-export-buttons,.owner-report-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.cornnie-export-buttons button { font-size:12px; padding:10px; }
#askExportControls { border-top:1px solid #E5D7CC; margin-top:10px; padding-top:4px; }
#ownerReports > summary { font-size:inherit; font-weight:700; cursor:pointer; }
#ownerReportResults p { font-size:13px; overflow-wrap:anywhere; }
#ownerReportResults table { width:100%; border-collapse:collapse; }
#ownerReportResults th,#ownerReportResults td { text-align:left; padding:10px; border-bottom:1px solid #E5D7CC; }

/* Report tools stay above the independently scrolling conversation. */
#cornnieTools { flex:none; min-height:0; max-height:42%; overflow:auto; border-bottom:1px solid #E5D7CC; background:#fff; }
#cornnieTools > summary { padding:12px 20px; font-size:12px; color: #262626; }
.cornnie-tools-content { padding:0 20px 12px; }
#askCornnect [hidden] { display:none!important; }
.cornnie-body { scroll-behavior:auto; overflow-anchor:none; }

/* CORNNECT DINING: approved lockup and shared industry palette. */
:root { --dining-orange:#D65A2E; --dining-cream:#FFF8F2; --dining-text:#262626; }
body { background:var(--dining-cream); color:var(--dining-text); }
input,select,textarea,dialog { color:var(--dining-text); }
a { color:#923719; }
.brand-logo { width:340px; max-width:100%; height:auto; }
.customer-logo { width:290px; max-width:100%; height:auto; }
.receipt-brand img { width:230px; max-width:100%; height:auto; }
.cornnie-header,#cornnieLauncher { color:#fff; }
#cornnieTitle { color:#fff; }
#cornnieLauncher strong { color:#fff; }
@media print { body,dialog,#receiptArea { background:white!important; color:#262626!important; } .receipt-brand img { width:180px; height:auto; } }

/* MyInvois owner pilot */
#myinvoisPanel>summary {font-size:inherit;font-weight:700}
#myinvoisPanel details {margin:16px 0}
.invoice-check {display:flex;align-items:center;gap:10px;margin:16px 0}
.invoice-check input {width:20px;height:20px;flex:0 0 20px;margin:0}
.invoice-entry {border:1px solid #ddcfc3;border-radius:12px;padding:18px;margin:14px 0;overflow-wrap:anywhere}
.invoice-entry button {margin:6px 8px 6px 0}