/* Upgrade-only color compatibility for the shared procurement stylesheet.
   Load after styles.css and before the upgrade/workspace stylesheets.
   Layout and business behavior remain in their existing files. */
button:focus-visible, a:focus-visible { outline: 3px solid #b58a3b; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px #9f342d14; }
.nav-label { color: #897869; }
.nav-link { color: #68584c; }
.nav-link:hover { background: #faf3e9; }
.phase-tag { color: #897869; }
.breadcrumb { color: #897869; }
.top-right { color: #77695f; }
.dot { background: #77695f; }
.btn:hover { background: #832721; }
.btn.danger { background: #fff0f3; }
.panel-head { border-bottom: 1px solid #faf3e9; }
.stat-label { color: #897869; }
.stat:first-child .stat-label, .stat:first-child small { color: #d7bfa4; }
.stat-foot { color: #897869; }
.callout { background: #f4e9dc; border: 1px solid #e7d8c7; }
.callout p { color: #77695f; }
.callout .illustration { color: #897869; }
.note strong { color: #68584c; }
th { color: #897869; background: #fffaf4; }
td { border-top: 1px solid #faf3e9; }
tr.clickable:hover { background: #fffaf4; }
.cell-sub { color: #897869; }
.badge { color: #795a25; }
.badge.void { color: #897869; }
.empty .icon { color: #b09a80; }
.empty h3 { color: #77695f; }
.search > .icon { color: #897869; }
.summarybar { background: #fffaf4; }
label.field { color: #77695f; }
input, select, textarea { border: 1px solid #e7d8c7; }
input:disabled { color: #897869; }
.supplier-choose { border: 1px solid #e7d8c7; }
.supplier-choose.placeholder { color: #897869; }
.line-number { background: #faf3e9; color: #897869; }
.ingredient-button.placeholder { color: #897869; }
.remove { color: #b09a80; }
.amount-field { background: #faf3e9; }
.price-note { border-top: 1px dashed #f4e9dc; color: #897869; }
.price-note strong { color: #68584c; }
.price-deviation.low { color: #795a25; background: #faf3e9; }
.line-remark input { border-color: #f4e9dc; }
.add-line { background: #faf3e9; border: 1px dashed #e7d8c7; }
.day-buttons button { color: #897869; }
.photo-picker { border: 1px dashed #e7d8c7; color: #77695f; background: #fffaf4; }
.purchase-footer { border: 1px solid #e7d8c7; box-shadow: 0 5px 25px #4d2d2010; }
.purchase-footer .total-label { color: #897869; }
.draft-note { color: #77695f; background: #faf3e9; }
.modal-overlay { background: #34201866; }
.close-modal { color: #897869; }
.picker-row { border-bottom: 1px solid #faf3e9; }
.picker-row:hover { background: #faf3e9; }
.picker-row .icon { color: #b09a80; }
.daily-totals { background: #faf3e9; }
.daily-supplier { border: 1px solid #e7d8c7; }
.daily-supplier small { color: #77695f; }
.discount-confirm { background: #faf3e9; }
.discount-help { color: #77695f; }
.unit-rule { color: #77695f; }
.receipt-total { border-top: 1px dashed #e7d8c7; }
.detail-meta span { color: #897869; }
.audit-dot { background: #d7bfa4; }
.audit-line pre { background: #faf3e9; }
.directory-card p { color: #897869; }
.settlement-total span { color: #d7bfa4; }
.auth-art .brand-sub { color: #b09a80; }
.auth-art p { color: #d7bfa4; }
.auth-art .art-label { color: #b09a80; }
.auth-art footer { color: #b09a80; }
.auth-foot { color: #b09a80; }
.check-label { color: #77695f; }
#toast { background: #49352cf2; }
@media (max-width: 760px) {
.bottom-nav { background: #fffaf4; }
.bottom-nav a { color: #897869; }
.order-card { border-bottom: 1px solid #f4e9dc; }
.order-card .order-meta { color: #897869; }
.order-card .order-amount { color: #49332c; }
.item-fields .line-total { background: #faf3e9; }
}

/* Semantic states remain distinguishable from the cinnabar brand. */
button:focus-visible, a:focus-visible { outline-color: #b58a3b; }
input:focus, select:focus, textarea:focus { border-color: #b76f5c; box-shadow: 0 0 0 3px #9f342d14; }
input[type="checkbox"], input[type="radio"] { accent-color: #9f342d; }
::selection { background: #f0c7b9; color: #542d26; }
.btn:hover { background: #832721; }
.btn.secondary:hover { color: #832721; background: #f2d9ce; }
.btn.danger { color: #b32640; background: #fff0f3; }
.btn.danger:hover { color: #962039; background: #fbdde5; }
.badge { color: #795a25; background: #f6eddd; }
.badge.warn { color: #855916; background: #fff1d4; }
.badge.void { color: #82766c; background: #eee9e2; }
.price-deviation.low { color: #795a25; background: #f6eddd; }
.auth-art { background: #8f2e28; color: #fff8e8; }
.auth-art .brand-sub, .auth-art p, .auth-art .art-label, .auth-art footer { color: #f0d3bd; }
.auth-art .brand-name { color: #fff8e8; }
.auth-art .line-art { border-color: #e4b96e; box-shadow: 0 0 0 55px #e4b96e26, 0 0 0 110px #e4b96e16; }
.stat:first-child .stat-label, .stat:first-child small, .settlement-total span { color: #f1d5bd; }

/* The supplied transparent restaurant artwork stays intact at every size. */
.ws-sidebar .brand.hq-brand { flex-direction: column; align-items: center; gap: 7px; padding: 0 10px 12px; flex-shrink: 0; }
.ws-sidebar .brand.hq-brand .hq-brand-logo { width: 108px; height: 108px; max-width: none; object-fit: contain; flex-shrink: 0; border-radius: 0; }
.hq-brand .hq-brand-copy { min-width: 0; text-align: center; }
.ws-sidebar .brand.hq-brand .brand-name { font-size: 17px; letter-spacing: 1px; line-height: 1.5; }
.hq-brand .brand-name.hq-brand-name-in-image { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.ws-sidebar .brand.hq-brand .brand-sub { font-size: 11px; letter-spacing: 2px; color: #8c7261; margin: 0; }
.auth-wrap .auth-art { background: #f2e9db; color: #583727; }
.auth-wrap .auth-art h1 { color: #653c2c; }
.auth-wrap .auth-art p, .auth-wrap .auth-art .art-label, .auth-wrap .auth-art footer { color: #896c57; }
.auth-wrap .auth-art .line-art { border-color: #a37244; box-shadow: 0 0 0 55px #a3724418, 0 0 0 110px #a372440d; }
.auth-wrap .brand.hq-brand { flex-direction: column; gap: 12px; align-items: center; }
.auth-wrap .auth-art .brand.hq-brand { align-self: flex-start; }
.auth-wrap .brand.hq-brand .hq-brand-logo { width: 140px; height: 140px; object-fit: contain; flex-shrink: 0; border-radius: 0; }
.auth-wrap .brand.hq-brand .brand-name { font-size: 19px; letter-spacing: 1px; color: #653c2c; }
.auth-wrap .brand.hq-brand .brand-sub { color: #896c57; letter-spacing: 3px; font-size: 11px; }
@media (max-width: 760px) {
  .ws-main .topbar .mobile-brand.hq-mobile-brand { min-width: 0; max-width: calc(100% - 54px); gap: 9px; line-height: 1.4; }
  .ws-main .topbar .mobile-brand.hq-mobile-brand img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 0; }
  .ws-main .topbar .mobile-brand.hq-mobile-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-wrap .auth-inner .brand.hq-brand { margin-bottom: 28px; }
  .auth-wrap .auth-form { min-height: calc(100dvh - 26px); padding-top: 26px; padding-bottom: 34px; }
}

/* A contained entrance for the management site; shared authentication is unchanged. */
body:has(.hq-auth) {
  background: radial-gradient(ellipse at 15% 5%, #eedbc9 0, transparent 48%),
    radial-gradient(ellipse at 90% 95%, #eadbd0 0, transparent 44%), #f6f2ed;
}
#app:has(> .hq-auth) {
  min-height: calc(100dvh - 28px);
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vh, 64px) clamp(24px, 5vw, 80px);
}
.auth-wrap.hq-auth {
  width: min(1080px, 100%);
  min-height: 600px;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1fr);
  background: #fffdf9;
  border: 1px solid #ffffffd9;
  border-radius: 26px;
  box-shadow: 0 28px 80px #542b2010, 0 4px 18px #542b2008;
  overflow: hidden;
  isolation: isolate;
  animation: hq-auth-enter .6s cubic-bezier(.2,.75,.25,1) both;
}
.auth-wrap.hq-auth .auth-art {
  display: flex;
  padding: 42px;
  gap: 36px;
  background: linear-gradient(145deg, #622d29 0%, #783830 52%, #94493c 100%);
  color: #fff5e7;
  min-width: 0;
}
.auth-wrap.hq-auth .auth-art > :not(.line-art) { position: relative; z-index: 1; }
.auth-wrap.hq-auth .auth-art .brand.hq-brand {
  align-self: flex-start;
  gap: 0;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #ffe7c74d;
  border-radius: 17px;
  background: #fff6e7;
  box-shadow: 0 8px 25px #321c2414;
}
.auth-wrap.hq-auth .auth-art .hq-brand-logo { width: 102px; height: 102px; }
.auth-wrap.hq-auth .auth-art .brand-sub { display: none; }
.auth-wrap.hq-auth .auth-art .brand-name { font-size: 13px; max-width: 160px; overflow-wrap: anywhere; }
.auth-wrap.hq-auth .auth-art .art-label {
  display: block;
  margin: 0 0 18px;
  color: #e6c3a8;
  font-size: 10px;
  letter-spacing: 2.5px;
}
.auth-wrap.hq-auth .auth-art h1 {
  font-family: inherit;
  color: #fff5e7;
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 2px;
}
.auth-wrap.hq-auth .auth-art p { margin-top: 18px; color: #efd4c1; font-size: 15px; line-height: 1.9; }
.auth-wrap.hq-auth .auth-art footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  border-top: 1px solid #e9c2a42e;
  padding-top: 24px;
  font-size: 10px;
  line-height: 1.8;
  color: #e5c3ae;
}
.auth-wrap.hq-auth .auth-art footer b { display: block; margin-bottom: 5px; color: #fff0df; font-size: 12px; font-weight: 500; }
.auth-wrap.hq-auth .auth-art .line-art {
  pointer-events: none;
  width: 420px;
  height: 420px;
  right: -220px;
  bottom: 65px;
  border: 1px solid #e4bb8770;
  border-radius: 42%;
  box-shadow: 0 0 0 42px #e4bb8712, 0 0 0 84px #e4bb870a;
  opacity: .55;
  transform: rotate(35deg);
  animation: hq-auth-light 2.8s ease-out both;
}
.auth-wrap.hq-auth .auth-form { min-height: 0; min-width: 0; padding: 48px clamp(28px, 4vw, 64px); }
.auth-wrap.hq-auth .auth-inner { width: 100%; max-width: 390px; }
.auth-wrap.hq-auth .auth-inner > .eyebrow { display: block; margin: 0 0 13px; color: #78685c; font-size: 11px; letter-spacing: 1.5px; }
.auth-wrap.hq-auth .auth-inner h2 { font-size: 28px; line-height: 1.35; font-weight: 650; letter-spacing: .5px; color: #382d28; }
.auth-wrap.hq-auth .auth-inner .subtitle { margin: 12px 0 32px; font-size: 13px; line-height: 1.8; color: #78685c; }
.auth-wrap.hq-auth .auth-inner form { gap: 21px; animation: hq-auth-enter .55s .1s cubic-bezier(.2,.75,.25,1) both; }
.auth-wrap.hq-auth .form-error:empty { display: none; }
.auth-wrap.hq-auth .form-error { line-height: 1.6; overflow-wrap: anywhere; }
.auth-wrap.hq-auth label.field { gap: 8px; color: #605148; font-size: 13px; }
.auth-wrap.hq-auth input:not([type="checkbox"]) {
  height: 50px;
  padding: 12px 15px;
  font-size: 15px;
  background: #fcfaf7;
  border: 1px solid #e6dfd6;
  border-radius: 10px;
  color: #3b302b;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth-wrap.hq-auth input::placeholder { color: #81756b; }
.auth-wrap.hq-auth input:not([type="checkbox"]):focus { border-color: #aa6255; background: #fff; box-shadow: 0 0 0 4px #9f342d0d; outline: none; }
.auth-wrap.hq-auth input:-webkit-autofill,
.auth-wrap.hq-auth input:-webkit-autofill:hover,
.auth-wrap.hq-auth input:-webkit-autofill:focus { -webkit-text-fill-color: #3b302b; -webkit-box-shadow: 0 0 0 1000px #fcfaf7 inset; caret-color: #3b302b; }
.auth-wrap.hq-auth .check-label { font-size: 12px; line-height: 1.6; }
.auth-wrap.hq-auth .auth-inner .btn.full {
  min-height: 50px;
  margin-top: 3px;
  padding: 13px 20px;
  border: 1px solid #8c3028;
  border-radius: 10px;
  background: linear-gradient(110deg, #9f342d, #873029);
  box-shadow: 0 5px 12px #8a30281c;
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-wrap.hq-auth .auth-inner .btn.full .icon { transition: transform .18s ease; }
.auth-wrap.hq-auth .auth-inner .btn.full:disabled { cursor: wait; opacity: .6; transform: none; box-shadow: none; }
.auth-wrap.hq-auth .auth-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid #eee7df; color: #78685c; font-size: 12px; line-height: 1.6; }
.auth-wrap.hq-auth.hq-auth-setup .auth-form { padding-top: 34px; padding-bottom: 34px; }
.auth-wrap.hq-auth.hq-auth-setup .auth-inner form { gap: 15px; }
.auth-wrap.hq-auth.hq-auth-setup .auth-inner .subtitle { margin-bottom: 24px; }
.auth-wrap.hq-auth.hq-auth-setup .auth-art { justify-content: flex-start; }
.auth-wrap.hq-auth.hq-auth-setup .auth-art footer { margin-top: auto; }
.ws-sidebar .ws-main-link { transition: background-color .18s ease, color .18s ease; }
.ws-sidebar .ws-main-link > .icon:last-child { transition: transform .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .auth-wrap.hq-auth .auth-inner .btn.full:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 8px 18px #8a30282b; transform: translateY(-1px); }
  .auth-wrap.hq-auth .auth-inner .btn.full:hover:not(:disabled) .icon { transform: translateX(3px); }
  .ws-sidebar .ws-main-link:hover > .icon:last-child { transform: translateX(2px); }
}
.auth-wrap.hq-auth .auth-inner .btn.full:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px #8a30281c; }
@keyframes hq-auth-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hq-auth-light { from { opacity: .15; transform: rotate(26deg) scale(.95); } to { opacity: .55; transform: rotate(35deg) scale(1); } }
@media (min-width: 761px) and (max-width: 1000px) {
  #app:has(> .hq-auth) { padding: 28px; }
  .auth-wrap.hq-auth .auth-art { padding: 30px; }
  .auth-wrap.hq-auth .auth-form { padding: 32px 28px; }
  .auth-wrap.hq-auth .auth-art footer { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .auth-wrap.hq-auth .auth-art footer span { display: flex; justify-content: space-between; gap: 6px; }
  .auth-wrap.hq-auth .auth-art footer b { margin: 0; }
}
@media (max-width: 760px) {
  #app:has(> .hq-auth) { min-height: calc(100dvh - 26px); padding: 24px 18px max(24px, env(safe-area-inset-bottom)); }
  .auth-wrap.hq-auth { display: block; width: min(440px, 100%); min-height: 0; border-radius: 20px; }
  .auth-wrap.hq-auth .auth-art { display: none; }
  .auth-wrap.hq-auth .auth-form { min-height: 0; padding: 30px 24px; }
  .auth-wrap.hq-auth .auth-inner .brand.hq-brand { display: flex; margin: 0 0 25px; gap: 5px; }
  .auth-wrap.hq-auth .auth-inner .hq-brand-logo { width: 96px; height: 96px; }
  .auth-wrap.hq-auth .auth-inner .brand-sub { display: none; }
  .auth-wrap.hq-auth .auth-inner .brand-name { font-size: 14px; overflow-wrap: anywhere; }
  .auth-wrap.hq-auth .auth-inner > .eyebrow { display: none; }
  .auth-wrap.hq-auth .auth-inner h2 { font-size: 25px; }
  .auth-wrap.hq-auth .auth-inner .subtitle { margin: 10px 0 25px; font-size: 12px; }
  .auth-wrap.hq-auth input:not([type="checkbox"]) { font-size: 16px; }
  .auth-wrap.hq-auth .auth-foot { margin-top: 23px; padding-top: 20px; font-size: 11px; }
  .auth-wrap.hq-auth.hq-auth-setup .auth-form { padding: 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-wrap.hq-auth, .auth-wrap.hq-auth *, .ws-sidebar .ws-main-link, .ws-sidebar .ws-main-link > .icon:last-child { animation: none !important; transition: none !important; }
  .auth-wrap.hq-auth .auth-inner .btn.full:hover:not(:disabled), .auth-wrap.hq-auth .auth-inner .btn.full:hover:not(:disabled) .icon, .ws-sidebar .ws-main-link:hover > .icon:last-child { transform: none; }
}