/* Staff palette. The existing Forgastro-style layout and ordering flow are unchanged. */
body.staff,
body.staff.pos-view,
body.staff.dashboard-view {
  --dark: #18212b;
  --accent: #087f68;
  --gold: #e6bc61;
  --line: #b5bfcb;
  --muted: #475769;
  --red: #a32c3c;
  --pos-navy: #18212b;
  --pos-blue: #087f68;
  --pos-cyan: #c3ced9;
  --pos-bg: #dce2e8;
  --pos-line: #a7b2bf;
  --pos-orange: #087f68;
  --dashboard-navy: #18212b;
  --dashboard-blue: #087f68;
  --dashboard-line: #a7b2bf;
  color: #17212b;
  background: #dce2e8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.staff h1,
body.staff h2,
body.staff h3 { color: #17212b; }
body.staff button { color: #25313f; background: #fff; border-color: #a7b2bf; border-radius: 7px; }
body.staff button:where(:hover:not(:disabled):not(.fg-category):not(.fg-primary):not(.primary)) { color: #17212b; background: #eaf0f5; border-color: #62778d; }
body.staff button:disabled { opacity: .6; }
body.staff input,
body.staff select,
body.staff textarea { color: #17212b; background: #fff; border-color: #a7b2bf; border-radius: 7px; }
body.staff input::placeholder,
body.staff textarea::placeholder { color: #526174; opacity: 1; }
body.staff input:disabled,
body.staff select:disabled,
body.staff textarea:disabled { color: #667485; background: #e8edf1; }
body.staff input[type="radio"],
body.staff input[type="checkbox"] { accent-color: #087f68; }
body.staff label { color: #35465a; font-weight: 600; }
body.staff .primary,
body.staff .fg-primary,
body.staff .fg-pos .fg-primary { color: #fff; background: #087f68; border-color: #056b58; border-radius: 7px; box-shadow: 0 2px 4px #132b251f, inset 0 1px 0 #ffffff1f; font-weight: 700; }
body.staff .primary:hover:not(:disabled),
body.staff .fg-primary:hover:not(:disabled),
body.staff .fg-pos .fg-primary:hover:not(:disabled) { color: #fff; background: #056b58; border-color: #045644; }
body.staff .danger { color: #9a2637; background: #fff2f4; border-color: #d99eaa; }
body.staff .danger:hover:not(:disabled) { color: #86192a; background: #f9dce2; border-color: #b65569; }
body.staff .badge { color: #614914; background: #f5dfaa; border: 1px solid #cfa956; }
body.staff .notice { color: #674b12; background: #fff1ce; border: 1px solid #dabd76; border-radius: 8px; }
body.staff .error-text { color: #a32c3c; }
body.staff .empty,
body.staff .muted { color: #475769; }
body.staff .empty strong { color: #25364a; }

/* Charcoal header and a clearly separated navigation rail. */
body.staff .topbar,
body.staff:is(.pos-view, .dashboard-view) .topbar { color: #fff; background: #18212b; border-bottom: 1px solid #0b121b; box-shadow: 0 3px 9px #0f192933; }
body.staff .topbrand strong,
body.staff:is(.pos-view, .dashboard-view) .topbrand strong { color: #f3d28b; font-weight: 700; }
body.staff .topbrand img,
body.staff:is(.pos-view, .dashboard-view) .topbrand img { border-radius: 50%; box-shadow: 0 0 0 1px #e6bc6199; }
body.staff .topbrand small,
body.staff .account-chip span,
body.staff:is(.pos-view, .dashboard-view) .topbrand small,
body.staff:is(.pos-view, .dashboard-view) .account-chip span { color: #c7d3e0; }
body.staff .topbar .badge,
body.staff:is(.pos-view, .dashboard-view) .topbar .badge { color: #f6dca5; background: #3a3224; border-color: #8e713d; }
body.staff .topbar .sound-button,
body.staff:is(.pos-view, .dashboard-view) .topbar .sound-button { color: #edf4fb; background: #334456; border: 1px solid #61788e; border-radius: 6px; }
body.staff .topbar .sound-button:hover:not(:disabled) { color: #fff; background: #435b73; border-color: #a2b6c8; }
body.staff .account-chip,
body.staff:is(.pos-view, .dashboard-view) .account-chip { border-color: #53677b; }
body.staff .rail,
body.staff:is(.pos-view, .dashboard-view) .rail { background: #bdc8d4; border-right-color: #8c9dae; }
body.staff .rail button,
body.staff:is(.pos-view, .dashboard-view) .rail button { color: #33475d; background: #e6edf4; border-color: #9eafc0; border-radius: 6px; }
body.staff .rail button.active,
body.staff:is(.pos-view, .dashboard-view) .rail button.active { color: #18212b; background: #e6bc61; border-color: #ad8330; box-shadow: 0 1px 4px #17212b24; }
body.staff .rail button:hover:not(.active),
body.staff:is(.pos-view, .dashboard-view) .rail button:hover:not(.active) { color: #17212b; background: #fff; border-color: #62778d; }
body.staff .rail button.active:hover { color: #18212b; background: #f1ce7f; border-color: #ad8330; }
body.staff .rail .count,
body.staff:is(.pos-view, .dashboard-view) .rail .count { color: #fff; background: #a52f63; }

/* Saturated category colors stand apart from white product tiles. */
body.staff .fg-pos {
  --pos-blue: #087f68;
  --pos-cyan: #c3ced9;
  --pos-bg: #dce2e8;
  --pos-line: #a7b2bf;
  --pos-orange: #087f68;
  color: #17212b;
  background: #dce2e8;
}
body.staff .fg-pos button { border-radius: 7px; }
body.staff .fg-location { color: #25364a; background: #c3ced9; border-bottom: 1px solid #94a4b5; box-shadow: 0 2px 5px #17212b0f; }
body.staff .fg-location > strong { font-weight: 750; letter-spacing: .2px; }
body.staff .fg-toolbar-actions button { color: #24394e; background: #f3f7fb; border-color: #8c9fb2; border-radius: 6px; }
body.staff .fg-toolbar-actions button:hover:not(:disabled) { color: #13273b; background: #fff; border-color: #476783; }
body.staff .fg-search input { color: #17212b; background: #fff; border-color: #8f9fb0; border-radius: 7px; }
body.staff .fg-category { --tile-color: #526171; --tile-text: #fff; color: var(--tile-text); background: var(--tile-color); border-color: #3f4e5e; border-radius: 8px; font-weight: 700; box-shadow: 0 2px 4px #17212b24, inset 0 1px 0 #ffffff1a; }
body.staff .fg-category[data-tone="roll"] { --tile-color: #137b67; border-color: #086551; }
body.staff .fg-category[data-tone="starter"] { --tile-color: #347d38; border-color: #226626; }
body.staff .fg-category[data-tone="set"] { --tile-color: #315e9e; border-color: #214c86; }
body.staff .fg-category[data-tone="burger"] { --tile-color: #a52f63; border-color: #8b1c4d; }
body.staff .fg-category[data-tone="taco"] { --tile-color: #e3ad32; --tile-text: #242014; border-color: #ac7c0c; }
body.staff .fg-category[data-tone="delivery"],
body.staff .fg-category[data-group="Ramen"],
body.staff .fg-category[data-group="Desery"] { --tile-color: #7750a0; border-color: #5f3889; }
body.staff .fg-category[data-tone] { color: var(--tile-text); background: var(--tile-color); }
body.staff .fg-category:hover:not(:disabled) { color: var(--tile-text); background: var(--tile-color); border-color: #17212b; filter: none; box-shadow: 0 3px 8px #17212b33; }
body.staff .fg-category[aria-pressed="true"],
body.staff .fg-category.active { color: #fff; background: #18212b; border-color: #18212b; box-shadow: inset 0 0 0 3px #e6bc61, 0 3px 7px #17212b33; filter: none; }
body.staff .fg-category[aria-pressed="true"]:hover,
body.staff .fg-category.active:hover { color: #fff; background: #253444; border-color: #18212b; box-shadow: inset 0 0 0 3px #e6bc61, 0 3px 7px #17212b33; filter: none; }
body.staff .fg-product-heading { color: #3e5065; font-weight: 650; }
body.staff .fg-product { color: #17212b; background: #fff; border-color: #a7b2bf; border-radius: 7px; box-shadow: 0 2px 4px #17212b17; }
body.staff .fg-product strong { color: #17212b; font-weight: 650; }
body.staff .fg-product .fg-price { color: #17212b; font-weight: 750; }
body.staff .fg-product > small { color: #495f77; }
body.staff .fg-product:hover:not(:disabled) { color: #17212b; background: #fff; border-color: #347567; box-shadow: 0 3px 8px #17212b29, inset 0 0 0 1px #347567; }
body.staff .fg-product:active:not(:disabled) { background: #e2f3ed; border-color: #087f68; }
body.staff .fg-product[aria-disabled="true"] { color: #48596a; background: #f3f6f8; border-color: #b2bdc9; box-shadow: 0 1px 2px #17212b14; }
body.staff .fg-product-hint { color: #47596d; }
body.staff .fg-product-hint strong { color: #2d4259; }

/* White order rail, a dark receipt total, and a decisive emerald action. */
body.staff .fg-order-rail { background: #fff; border-left: 1px solid #8f9fb1; box-shadow: -3px 0 10px #17212b0d; }
body.staff .fg-orders-header { background: #ced8e2; border-color: #9babbc; }
body.staff .fg-time-tabs button,
body.staff .fg-fulfillment-tabs button { color: #33465b; background: #eef3f8; border-color: #b6c4d2; border-radius: 0; font-weight: 600; }
body.staff .fg-time-tabs button.active,
body.staff .fg-fulfillment-tabs button.active { color: #fff; background: #087f68; border-color: #056b58; }
body.staff .fg-time-tabs button:hover:not(.active),
body.staff .fg-fulfillment-tabs button:hover:not(.active) { color: #17212b; background: #fff; border-color: #7a91a8; }
body.staff .fg-time-tabs button.active:hover,
body.staff .fg-fulfillment-tabs button.active:hover { color: #fff; background: #056b58; border-color: #045644; }
body.staff .fg-order-search { color: #17212b; background: #fff; border-color: #8799ac; border-radius: 5px; }
body.staff .fg-order-search::placeholder { color: #526174; }
body.staff .fg-order-card { gap: 0; padding: 0; overflow: hidden; color: #17212b; background: #dceafa; border-color: #7ba5d5; border-radius: 8px; box-shadow: 0 2px 4px #17212b12; }
body.staff .fg-order-card:hover { color: #17212b; background: #d1e4fa; border-color: #356baf; }
body.staff .fg-order-open { display: flex; flex-direction: column; gap: 7px; width: 100%; margin: 0; padding: 12px; text-align: left; color: inherit; background: transparent; border: 0; border-radius: 7px; box-shadow: none; font-weight: 400; }
body.staff .fg-order-open:hover:not(:disabled) { color: inherit; background: transparent; border-color: transparent; box-shadow: none; }
body.staff .fg-order-open:focus-visible { outline: 3px solid #2563a5; outline-offset: -3px; }
body.staff .fg-order-card.is-unpaid { background: #fff3d5; border: 2px solid #ce8820; border-left-width: 6px; }
body.staff .fg-order-card.is-unpaid:hover { background: #ffedbd; border-color: #a86a13; }
body.staff .fg-order-card.is-paid { color: #174c3b; background: #e0f2e7; border: 2px solid #62a382; border-left-width: 6px; box-shadow: none; }
body.staff .fg-order-card.is-paid:hover { background: #d4ecdE; border-color: #387e5e; }
body.staff .fg-order-card.is-paid .fg-order-meta,
body.staff .fg-order-card.is-paid .fg-order-total { color: #285943; }
body.staff .fg-order-card.is-paid .fg-order-total strong { color: #174c3b; }
body.staff .fg-order-card.is-paid .fg-service-note { color: #285943; background: #cce7d8; border-color: #8fc3a7; }
body.staff .fg-payment-stage { display: block; width: 100%; padding: 7px 9px; border-radius: 4px; font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: .35px; }
body.staff .is-unpaid .fg-payment-stage { color: #fff; background: #8e5205; }
body.staff .is-paid .fg-payment-stage { color: #fff; background: #236849; }
body.staff .fg-unpaid-actions { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 5px; }
body.staff .fg-unpaid-actions button { min-width: 0; min-height: 44px; padding: 8px 4px; color: #253e57; background: #fff; border: 1px solid #a7a18e; border-radius: 5px; font-size: 12px; font-weight: 700; }
body.staff .fg-unpaid-actions .fg-pay-order { color: #fff; background: #a85d06; border-color: #8e5205; }
body.staff .fg-unpaid-actions .fg-pay-order:hover { color: #fff; background: #854600; }
body.staff .fg-unpaid-actions .fg-cancel-order { color: #9c2635; border-color: #cb9a9c; }
body.staff .fg-unpaid-actions .fg-cancel-order:hover { color: #851421; background: #ffe4e6; }
body.staff .fg-paid-label { font-weight: 650; }
body.staff .fg-order-card-actions { padding: 0 12px 12px; }
body.staff .fg-complete-order { width: 100%; min-height: 39px; padding: 8px 12px; color: #fff; background: #087f68; border: 1px solid #056b58; border-radius: 6px; font-size: 12px; font-weight: 700; }
body.staff .fg-complete-order:hover:not(:disabled) { color: #fff; background: #056b58; border-color: #045644; }
body.staff .fg-complete-order:disabled { color: #4b6273; background: #dce5ed; border-color: #afc1cf; opacity: 1; }
body.staff .fg-order-meta { color: #4c5f74; }
body.staff .fg-service-note { color: #244d43; background: #daeee6; border: 1px solid #a9cdbd; border-radius: 5px; }
body.staff .fg-order-total { color: #4a5d72; }
body.staff .fg-order-total strong { color: #17212b; }
body.staff .fg-rail-empty { color: #4d6075; }
body.staff .fg-rail-footer { background: #d7e0e9; border-top-color: #91a3b5; }
body.staff .fg-order-actions > button:disabled { color: #5f6f81; background: #cbd5df; border-color: #a8b6c5; opacity: 1; box-shadow: none; }
body.staff .fg-primary:disabled,
body.staff .fg-pos .fg-primary:disabled { color: #5f6f81; background: #cbd5df; border-color: #a8b6c5; opacity: 1; box-shadow: none; }
body.staff .fg-discard { color: #8e3447; background: #fff5f7; border-color: #d2a5b0; }
body.staff .fg-discard:hover:not(:disabled) { color: #842235; background: #f9dde4; border-color: #af6275; }
body.staff .fg-cart-heading { color: #fff; background: #31465b; border-color: #203347; }
body.staff .fg-cart-heading button { color: #253e57; background: #f2f7fc; border-color: #a5b8cb; }
body.staff .fg-cart-item { border-color: #c5d0db; }
body.staff .fg-cart-options { color: #50677f; }
body.staff .fg-line-controls button { color: #344e68; background: #eaf1f8; border-color: #a5b8ca; border-radius: 5px; }
body.staff .fg-line-controls button:hover:not(:disabled) { color: #163a59; background: #d7e7f4; border-color: #637f99; }
body.staff .fg-line-controls .remove,
body.staff .fg-line-controls [data-remove] { color: #a12f48; background: #fff0f3; border-color: #d9a1ae; }
body.staff .fg-cart-total { color: #e8eef6; background: #18212b; border-color: #0d1825; }
body.staff .fg-cart-total strong { color: #fff; }
body.staff .fg-cart-total p,
body.staff .fg-cart-total small { color: #c3d2e2; }

/* White dialogs and inputs with visible boundaries. */
body.staff dialog.modal { color: #17212b; background: #fff; border: 1px solid #9daebe; border-radius: 12px; box-shadow: 0 24px 90px #12213266; }
body.staff dialog.modal::backdrop { background: #12213280; backdrop-filter: blur(2px); }
body.staff .modal > header { background: #e8eff6; border-bottom-color: #acbdce; }
body.staff .modal > header h2 { color: #1c3147; font-weight: 700; }
body.staff .modal > header .close { color: #354f68; background: #fff; border-color: #a8bccf; border-radius: 6px; }
body.staff .modal-actions { border-color: #bacbda; }
body.staff .config-steps button { color: #415e79; background: #edf4fa; border-color: #a5bed2; border-radius: 6px; }
body.staff .config-steps button.active { color: #fff; background: #087f68; border-color: #056b58; }
body.staff .config-steps button.active:hover { color: #fff; background: #056b58; }
body.staff .choice { color: #20364c; background: #fff; border-color: #a7bacc; border-radius: 8px; }
body.staff .choice.selected { color: #164b3c; background: #d8eee5; border-color: #087f68; }
body.staff .choice strong { color: #3d5d77; }
body.staff .choice-count { color: #fff; background: #087f68; }
body.staff .config-summary { color: #2c4f68; background: #eaf2f8; border: 1px solid #b1c7d9; border-radius: 8px; }
body.staff .stepper { border-color: #9db6cb; }
body.staff .stepper button { color: #2c5374; background: #eaf4fc; border-radius: 0; }
body.staff .detail-info { color: #2e4b64; background: #eaf2f8; border: 1px solid #b4c8da; border-radius: 8px; }
body.staff .detail-item { border-color: #c2d2df; }
body.staff .detail-item small { color: #4e6c86; }
body.staff .detail-total { color: #17212b; }
body.staff dialog.fg-customer-modal { --pos-orange: #087f68; background: #fff; border-radius: 12px; box-shadow: 0 24px 90px #12213266; }
body.staff .fg-customer-modal::backdrop { background: #12213280; backdrop-filter: blur(2px); }
body.staff .fg-customer-modal > header { background: #e3edf5; border-bottom: 1px solid #9db4c8; }
body.staff .fg-customer-modal > header h2 { color: #172e44; font-weight: 700; }
body.staff .fg-customer-modal > header .close { color: #3f5c75; background: #f7fbff; }
body.staff .fg-customer-form label,
body.staff .fg-info-controls legend { color: #354f67; font-weight: 600; }
body.staff .fg-customer-form input,
body.staff .fg-customer-form select,
body.staff .fg-customer-form textarea { color: #17212b; background: #fff; border-color: #8fa8bd; border-radius: 7px; }
body.staff .fg-customer-form input:focus,
body.staff .fg-customer-form select:focus,
body.staff .fg-customer-form textarea:focus { color: #17212b; background: #fff; border-color: #087f68; }
body.staff .fg-customer-form .fg-choice { color: #354b61; background: #e5edf4; border-color: #acbfd0; border-radius: 6px; font-weight: 700; }
body.staff .fg-customer-form .fg-choice:has(input:checked) { color: #fff; background: #087f68; border-color: #056b58; box-shadow: inset 0 0 0 1px #ffffff14; }
body.staff .fg-customer-form .fg-choice:hover:not(:has(input:checked, input:disabled)) { color: #213e57; background: #d5e4f0; border-color: #6f91ad; }
body.staff .fg-customer-form .fg-choice:has(input:disabled) { color: #6b7e90; background: #edf2f6; border-color: #cedbe5; }
body.staff .fg-checkout-total { color: #435f76; }
body.staff .fg-checkout-total strong { color: #17212b; }
body.staff .fg-control-note { color: #506c83; }

/* Existing customer lookup and the name/time group. */
body.staff .fg-pickup-identity { min-width: 0; margin: 0; padding: 0; border: 0; }
body.staff .fg-pickup-identity legend { width: 100%; margin: 0 0 6px; padding: 0; color: #354f67; font-size: 14px; font-weight: 600; }
body.staff .fg-pickup-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, .6fr); gap: 8px; }
body.staff .fg-selected-customer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; color: #235544; background: #dcefe5; border: 1px solid #8fbca6; border-radius: 7px; font-size: 12px; line-height: 1.4; }
body.staff .fg-selected-customer > span { min-width: 0; overflow-wrap: anywhere; }
body.staff .fg-selected-customer > button { flex-shrink: 0; padding: 7px 8px; color: #285440; background: #fff; border-color: #91b6a1; border-radius: 5px; font-size: 10px; }
body.staff .fg-selected-customer:not([hidden]) + .fg-customer-suggestions:not([hidden]) { margin-top: 8px; }
body.staff .fg-customer-suggestions { padding: 10px; background: #edf4fa; border: 1px solid #a7bfd3; border-radius: 8px; }
body.staff .fg-suggestion-status { margin: 0 0 7px; color: #496a84; font-size: 11px; line-height: 1.4; }
body.staff .fg-suggestion-list { display: grid; gap: 6px; max-height: 160px; overflow-y: auto; }
body.staff button.fg-suggestion { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 9px 11px; text-align: left; color: #28465d; background: #fff; border-color: #a7c0d3; border-radius: 6px; }
body.staff button.fg-suggestion strong { font-size: 13px; font-weight: 700; }
body.staff button.fg-suggestion span { color: #4e6d84; font-size: 11px; line-height: 1.35; }
body.staff button.fg-suggestion:hover:not(:disabled) { color: #123c58; background: #e0effa; border-color: #608faf; }

/* Dashboard cards and chart now read as separate, white surfaces. */
body.staff .dashboard-heading h1 { color: #17212b; }
body.staff .dashboard-heading > label { color: #3d5870; }
body.staff .dashboard-heading select { color: #2e4d65; background: #fff; border-color: #9bb4c9; border-radius: 7px; }
body.staff .dashboard-test-note { color: #6c4f14; background: #fff1cd; border-color: #d4b15a; border-radius: 8px; }
body.staff .dashboard-card { background: #fff; border-color: #a7b2bf; border-radius: 12px; box-shadow: 0 3px 8px #17212b24; }
body.staff .dashboard-card-label { color: #3c5268; font-weight: 700; }
body.staff .dashboard-card-value { color: #17212b; font-weight: 750; }
body.staff .dashboard-card-caption { color: #4b667d; }
body.staff .dashboard-card-comparison.is-positive { color: #08745b; }
body.staff .dashboard-card-comparison.is-negative { color: #af354b; }
body.staff .dashboard-card-comparison.is-neutral { color: #536e84; }
body.staff .dashboard-chart-panel { background: #fff; border-color: #a7b2bf; border-radius: 12px; box-shadow: 0 3px 8px #17212b24; }
body.staff .dashboard-chart-heading { border-color: #b6c8d7; }
body.staff .dashboard-chart-heading h2 { color: #253e54; }
body.staff .dashboard-chart-heading p,
body.staff .dashboard-chart-legend { color: #395a73; }
body.staff .dashboard-chart-scroll { background: #fff; border-color: #b9ccdc; border-radius: 6px; }
body.staff svg.dashboard-chart { background: #fff; font-family: inherit; }
body.staff .dashboard-chart .dashboard-grid-line { stroke: #c3d1de; }
body.staff .dashboard-chart .dashboard-axis-line { stroke: #819bb2; }
body.staff .dashboard-chart .dashboard-axis-label { fill: #3c5e79; }
body.staff .dashboard-chart .dashboard-bar[data-channel="table"] { fill: #149c80; stroke: #08765f; }
body.staff .dashboard-chart .dashboard-bar[data-channel="delivery"] { fill: #e36b62; stroke: #b74440; }
body.staff .dashboard-chart .dashboard-bar[data-channel="pickup"] { fill: #e3ad32; stroke: #ae7c0b; }
/* Module-provided legend swatches use inline background colors. */
body.staff .dashboard-legend-item > span[data-channel="table"] { background: #149c80 !important; border-color: #08765f; }
body.staff .dashboard-legend-item > span[data-channel="delivery"] { background: #e36b62 !important; border-color: #b74440; }
body.staff .dashboard-legend-item > span[data-channel="pickup"] { background: #e3ad32 !important; border-color: #ae7c0b; }
body.staff .dashboard-chart-empty,
body.staff .dashboard-accessible-data { color: #456780; }
body.staff .dashboard-accessible-data table { background: #fff; }
body.staff .dashboard-accessible-data caption { color: #496d87; }
body.staff .dashboard-accessible-data th { color: #2d5574; background: #dcecf7; }
body.staff .dashboard-accessible-data td { color: #294b66; }
body.staff .dashboard-loading,
body.staff .loading-screen { color: #3e617d; }
body.staff .dashboard-error { color: #973d3e; background: #fff0ef; border-color: #d69d9a; border-radius: 12px; }
body.staff .dashboard-error button { color: #fff; background: #087f68; border-color: #056b58; border-radius: 7px; }
body.staff .dashboard-error button:hover { color: #fff; background: #056b58; border-color: #045644; }

/* Remaining staff screens keep the same component layout. */
body.staff .section-title p { color: #45627b; }
body.staff .segmented { background: #c9d9e7; border-color: #9ab3c9; border-radius: 9px; }
body.staff .segmented button { color: #365b79; background: transparent; border: 0; }
body.staff .segmented button.active { color: #fff; background: #087f68; box-shadow: 0 1px 4px #0f463325; }
body.staff .segmented button.active:hover { color: #fff; background: #056b58; }
body.staff .order-card { color: #17212b; background: #fff; border-color: #a7b2bf; border-radius: 10px; box-shadow: 0 2px 6px #17212b20; }
body.staff .order-card .order-meta,
body.staff .order-card .preview-lines { color: #43647e; }
body.staff .order-card .card-bottom { border-color: #b4cbdc; }
body.staff .status { color: #3d607c; background: #deecf6; border-radius: 5px; }
body.staff .status-new { color: #745309; background: #ffe7a3; }
body.staff .status-accepted { color: #175894; background: #d7eafd; }
body.staff .status-preparing { color: #75418b; background: #eedcf6; }
body.staff .status-ready { color: #206b45; background: #cfefd9; }
body.staff .status-out_for_delivery { color: #125f68; background: #d2f0f1; }
body.staff .status-completed { color: #456957; background: #e1ede5; }
body.staff .status-cancelled { color: #a3364c; background: #fbe0e5; }
body.staff .metric,
body.staff .report-panel,
body.staff .settings-card { background: #fff; border-color: #a7b2bf; border-radius: 12px; box-shadow: 0 2px 7px #17212b1c; }
body.staff .metric strong { color: #17212b; font-variant-numeric: tabular-nums; }
body.staff .metric small,
body.staff .metric span { color: #496c87; }
body.staff th { color: #3e6685; }
body.staff th,
body.staff td { border-bottom-color: #b9cddd; }
body.staff .bar-row .bar { background: #cce9dd; }
body.staff .bar-row .bar > span { background: #087f68; }
body.staff .device-status,
body.staff .account-row { border-bottom-color: #b9cddd; }
body.staff .group-editor { background: #f4f9fd; border-color: #a1bfd6; border-radius: 8px; }

/* Login uses a charcoal backdrop and a crisp white card. */
body.staff .auth-screen { background: radial-gradient(ellipse at top, #354a60 0%, #182a3b 52%, #111b25 100%); }
body.staff .auth-card { background: #fff; border: 1px solid #a7b2bf; border-radius: 16px; box-shadow: 0 25px 85px #050b1266; }
body.staff .auth-brand img { border-radius: 50%; box-shadow: 0 0 0 1px #e6bc6180; }
body.staff .auth-brand h1 { color: #17212b; font-weight: 700; }
body.staff .auth-brand p,
body.staff .auth-card .back-link { color: #456984; }
body.staff .auth-card input,
body.staff .auth-card select { background: #fff; border-color: #9bb9ce; }
body.staff #toast { color: #fff; background: #173c49; border: 1px solid #527a89; border-radius: 8px; box-shadow: 0 6px 22px #112b3a4d; }
body.staff #toast.error { background: #8d2c41; border-color: #c06f81; }

/* Gold marks the active tile; blue/emerald focus stays clear on light surfaces. */
body.staff :is(button, a, input, select, textarea, summary):focus-visible,
body.staff .fg-pos :is(button, input):focus-visible,
body.staff.dashboard-view :is(button, a, input, select, summary):focus-visible { outline: 3px solid #145b91; outline-offset: 3px; }
body.staff .fg-customer-form .fg-choice:has(input:focus-visible) { outline: 3px solid #145b91; outline-offset: 3px; }
body.staff .topbar :is(button, a):focus-visible,
body.staff.dashboard-view .topbar :is(button, a):focus-visible { outline-color: #e6bc61; }
body.staff .dashboard-chart .dashboard-bar:focus-visible { stroke: #17212b; stroke-width: 3; }
@media (max-width: 700px) {
  body.staff .fg-pickup-identity legend { font-size: 12px; }
  body.staff .fg-pickup-fields { grid-template-columns: minmax(0, 1fr) minmax(96px, .6fr); gap: 6px; }
}

/* Single pickup identity row after removing the guest count. */
body.staff .fg-info-bottom.fg-info-bottom-single { grid-template-columns: minmax(0, 1fr); }
body.staff .fg-payment-help { margin: -10px 0 0; color: #43647e; font-size: 12px; line-height: 1.5; }

/* Product choices: distinguish the customer prompt from its selectable options. */
body.staff .product-editor .product-choice-help { padding:16px; background:#e5f2ed; color:#234c40; border:1px solid #8fb6a6; border-left:4px solid #087f68; border-radius:8px; }
body.staff .product-editor .product-choice-help h3 { margin:0 0 8px; font-size:17px; }
body.staff .product-editor .product-choice-help p { margin:6px 0 0; font-size:13px; line-height:1.6; }
body.staff .product-editor .product-choice-shortcuts { display:flex; flex-wrap:wrap; gap:8px; }
body.staff .product-editor .product-choice-shortcuts button { flex:1 1 150px; font-size:13px; }
body.staff .product-editor .group-editor { min-width:0; margin:0 0 18px; padding:16px; }
body.staff .product-editor .group-editor legend { padding:0 6px; font-size:15px; overflow-wrap:anywhere; }
body.staff .product-editor .group-controls { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:10px; margin:16px 0 6px; }
body.staff .product-editor .group-controls label { max-width:none; min-width:0; }
body.staff .product-editor .group-controls .check { grid-column:1/-1; margin:4px 0; align-items:center; }
body.staff .product-editor .product-choice-caption { font-size:12px; line-height:1.5; color:#415d73; margin:7px 0 14px; }
body.staff .product-editor .product-variants-heading { border-top:1px solid #a1bfd6; padding-top:14px; margin:16px 0 10px; }
body.staff .product-editor .product-variants-heading h4 { margin:0 0 4px; font-size:15px; }
body.staff .product-editor .product-variants-heading span { font-size:12px; color:#415d73; }
body.staff .product-editor .product-variants-empty { font-size:13px; line-height:1.5; padding:12px; background:#fff2d5; color:#674c1c; border:1px solid #d6ba78; border-radius:6px; }
body.staff .product-editor .option-edit-row { grid-template-columns:minmax(0,1fr) 110px 40px; align-items:end; padding:12px; background:#fff; border:1px solid #b4c9d8; border-radius:7px; }
body.staff .product-editor .option-edit-row label { min-width:0; font-size:12px; }
body.staff .product-editor .option-edit-row .icon { width:40px; height:40px; margin-bottom:1px; }
body.staff .product-editor [aria-invalid="true"] { outline:2px solid #b5364e; outline-offset:2px; }
body.staff .product-editor [data-group-error] { margin:12px 0; }
@media(max-width:600px) {
 body.staff .product-editor .option-edit-row { grid-template-columns:minmax(0,1fr) 44px; gap:10px; }
 body.staff .product-editor .option-edit-row label:first-child { grid-column:1/-1; }
 body.staff .product-editor .option-edit-row .icon { width:44px; height:44px; }
 body.staff .product-editor input:not([type="checkbox"]),body.staff .product-editor select,body.staff .product-editor textarea { font-size:16px; }
 body.staff .product-editor .group-editor { padding:12px; }
 body.staff .product-editor .group-editor .toolbar { gap:8px; align-items:stretch; }
 body.staff .product-editor .group-editor .toolbar button { flex:1 1 140px; }
 body.staff .product-editor .group-editor .toolbar .spacer { display:none; }
}

/* Bottom payment bar in the compact saved-order chooser. */
body.staff .sales-payment-bar { position:sticky; bottom:-22px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin:22px -24px -22px; padding:18px 24px; background:#e5edf4; border-top:1px solid #a7b9c9; }
body.staff .sales-payment-bar > div,body.staff .sales-payment-amount { display:flex; flex-direction:column; gap:4px; }
body.staff .sales-payment-bar span,body.staff .sales-payment-amount > span { font-size:12px; color:#435e76; }
body.staff .sales-payment-bar strong { font-size:23px; color:#17212b; font-variant-numeric:tabular-nums; }
body.staff .sales-payment-bar button { min-width:155px; min-height:48px; font-size:16px; }
body.staff .sales-payment-bar .sales-paid-status { color:#11644f; background:#d5eee5; border:1px solid #8db8a9; border-radius:7px; padding:12px 17px; font-size:15px; font-weight:700; }
body.staff .sales-payment-amount { margin-bottom:22px; padding:18px; background:#e8f2f8; border:1px solid #b6ccdc; border-radius:8px; }
body.staff .sales-payment-amount strong { font-size:30px; font-variant-numeric:tabular-nums; }
body.staff .sales-payment-methods { margin:16px 0; }
body.staff .sales-payment-methods button { min-height:54px; font-size:16px; font-weight:700; }
body.staff .sales-payment-methods [aria-pressed="true"] { color:#fff; background:#087f68; border-color:#056b58; box-shadow:inset 0 0 0 1px #056b58; }
@media(max-width:800px) { body.staff .sales-payment-bar { bottom:-19px; margin:22px -19px -19px; padding:16px 19px; } }
@media(max-width:420px) { body.staff .sales-payment-bar { gap:12px; } body.staff .sales-payment-bar button { min-width:125px; } body.staff .sales-payment-bar strong { font-size:21px; } }

/* Retain payment stages in the mobile shell, which has its own card theme. */
body.staff.mobile-admin .fg-order-card.is-unpaid { background:#fff3d5; border:2px solid #ce8820; border-left-width:6px; }
body.staff.mobile-admin .fg-order-card.is-paid { color:#174c3b; background:#e0f2e7; border:2px solid #62a382; border-left-width:6px; }
body.staff.mobile-admin .fg-order-card .fg-order-open,
body.staff.mobile-admin .fg-order-card .fg-order-card-actions { background:transparent; }
body.staff.mobile-admin .fg-order-open > .fg-payment-stage { grid-column:1/-1; font-size:11px; }
body.staff.mobile-admin .fg-order-card .fg-unpaid-actions { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:6px; }