/* Pie & Pie redesign - additions on top of pie.css (black bg, white text,
   red accents, geekmark checkboxes). New file; pie.css is unchanged. */

* { box-sizing: border-box; }
img.pnp-header { max-width: 100%; height: auto; }

.pnp-btn {
  font: inherit;
  font-size: 0.8em;
  background: #ff0000;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 56px;
  cursor: pointer;
  touch-action: manipulation;
}
.pnp-btn:active { background: #a00; }

.pnp-error {
  background: #400; border: 2px solid #f00; color: #fff;
  padding: 10px 14px; margin: 10px 0; border-radius: 8px;
}
.pnp-empty { color: #aaa; font-size: 0.8em; padding: 10px 0; }
.pnp-count { color: #aaa; font-size: 0.7em; font-weight: normal; }

/* ---- order form ---- */
#usrform { max-width: 900px; padding-right: 20px; }
.pnp-name { display: block; margin: 10px 0; }
.pnp-name input {
  font: inherit; width: 100%; max-width: 600px; display: block;
  padding: 8px 10px; margin-top: 6px; border: 2px solid #fff; border-radius: 6px;
}
.pnp-menu { display: flex; flex-direction: column; gap: 12px; }
.pnp-pizza {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #555; border-radius: 10px; padding: 12px 14px;
}
.pnp-pizza-text { flex: 1 1 auto; }
.pnp-pizza-name { font-weight: bold; }
.pnp-pizza-desc { color: #bbb; font-size: 0.6em; line-height: 1.3; }
.pnp-add { flex: 0 0 auto; }

.pnp-item {
  border: 2px solid #ff0000; border-radius: 10px;
  padding: 10px 14px; margin: 12px 0;
}
.pnp-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pnp-item-no { color: #aaa; }
.pnp-item-name { font-weight: bold; flex: 1 1 auto; }
.pnp-remove { background: #000; font-size: 0.6em; min-height: 44px; padding: 6px 12px; }
.pnp-extras-label { color: #bbb; font-size: 0.6em; margin: 8px 0 4px; }
.pnp-extras { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.pnp-extras .main { margin-bottom: 6px; min-height: 36px; }
.pnp-extras .main .geekmark { top: 4px; }

/* ---- confirmation ---- */
.pnp-confirm { padding-left: 20px; }
.pnp-orderno { font-size: 2.5em; color: #ff0000; font-weight: bold; }
.pnp-summary { font-size: 0.8em; }
.pnp-summary li { margin: 6px 0; }
.pnp-sum-pizza { font-weight: bold; }
.pnp-sum-extras { color: #ccc; }

/* ---- status badges (same colours as the numpad / trackers) ---- */
.pnp-badge {
  display: inline-block; font-size: 0.55em; padding: 2px 10px;
  border-radius: 20px; vertical-align: middle; border: 1px solid #fff;
}
.pnp-badge.st-prepping { background: #fff; color: #000; }
.pnp-badge.st-cooking  { background: #ffa500; color: #000; }
.pnp-badge.st-ready    { background: #ff0000; color: #fff; }
.pnp-badge.st-done     { background: #000; color: #aaa; border-color: #666; }

/* ---- kitchen screen (order_details.php) ---- */
.kds { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 10px; }
.kds-order {
  flex: 1 1 420px; max-width: 640px;
  border: 3px solid #fff; border-radius: 12px; padding: 10px 14px;
}
.kds-order.st-cooking { border-color: #ffa500; }
.kds-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; border-bottom: 1px solid #555; padding-bottom: 6px; }
.kds-no { font-family: Courier, monospace; font-size: 1.4em; font-weight: bold; }
.kds-name { font-size: 1em; }
.kds-meta { color: #aaa; font-size: 0.6em; margin-left: auto; }
.kds-items { margin: 8px 0 0; padding-left: 1.4em; }
.kds-item { margin: 8px 0; line-height: 1.25; }
.kds-pizza { font-weight: bold; font-size: 1.05em; }
.kds-extras { color: #ff4d4d; font-weight: bold; display: block; }
.kds-plain { color: #888; font-size: 0.7em; display: block; }
.kds-item.st-ready .kds-pizza, .kds-item.st-done .kds-pizza,
.kds-item.st-ready .kds-extras, .kds-item.st-done .kds-extras { color: #777; text-decoration: line-through; }

/* ---- staff updater (order_updater.php) ---- */
.upd-body { font-size: 1.4em; }
.upd-bar {
  position: sticky; top: 0; z-index: 5; background: #000;
  display: flex; gap: 10px; align-items: center; padding: 8px 0;
}
#upd-find {
  font: inherit; font-size: 1.2em; width: 6.5em; padding: 6px 10px;
  border: 2px solid #fff; border-radius: 8px; text-align: center;
}
.upd-msg { font-size: 0.8em; color: #0f0; }
.upd-msg.is-error { color: #ff4d4d; font-weight: bold; }
.upd-order { border: 3px solid #fff; border-radius: 12px; padding: 8px 12px; margin: 12px 0; }
.upd-order.st-cooking { border-color: #ffa500; }
.upd-order.st-ready   { border-color: #ff0000; }
.upd-order.st-done    { border-color: #444; opacity: 0.6; }
.upd-head { font-size: 1.1em; }
.upd-no { font-family: Courier, monospace; font-weight: bold; font-size: 1.3em; }
.upd-all { font-size: 0.6em; color: #aaa; margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.upd-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid #333; }
.upd-item-text { flex: 1 1 260px; }
.upd-pizza { font-weight: bold; }
.upd-extras { color: #ff4d4d; }
.upd-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.upd-btn {
  font: inherit; font-size: 0.8em; min-width: 96px; min-height: 64px;
  border: 2px solid #666; border-radius: 10px; background: #222; color: #888;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.upd-btn-sm { min-width: 70px; min-height: 48px; font-size: 1em; }
.upd-btn.st-prepping.is-current { background: #fff; color: #000; border-color: #fff; }
.upd-btn.st-cooking.is-current  { background: #ffa500; color: #000; border-color: #ffa500; }
.upd-btn.st-ready.is-current    { background: #ff0000; color: #fff; border-color: #fff; }
.upd-btn.st-done.is-current     { background: #000; color: #fff; border-color: #fff; }
.upd-btn.is-busy { opacity: 0.6; }
.upd-btn:active { transform: scale(0.96); }
#upd-clear { min-width: 0; padding: 0 16px; color: #fff; }

/* ---- trackers (responsive customer TV) ---- */
.trk-body { margin: 0; padding: 0; background: #000; color: #fff; width: 100%; max-width: 100%; overflow-x: hidden; }
.trk-banner { display: block; width: 100%; max-width: 1100px; margin: 0 auto; }
.trk-logo { display: block; width: 100%; height: auto; max-width: 100%; border: 0; }
.trk-board {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1vw;
}
.trk-col {
  -webkit-box-flex: 1; -webkit-flex: 1 1 0; flex: 1 1 0;
  min-width: 0; text-align: right; padding: 0.4em 2vw;
  font-family: Courier, "Courier New", monospace;
  font-size: clamp(1.4rem, 4.8vw, 3.75rem);
  line-height: 1.2; word-wrap: break-word; overflow-wrap: anywhere;
}
.trk-prepping { color: #fff; }
.trk-cooking { color: orange; }
.trk-ready { color: #ff0000; font-size: clamp(1.6rem, 5.5vw, 4.7rem); }
.trk-order { display: block; margin: 0.08em 0; }
.trk-count { font-size: 0.45em; color: #bbb; margin-left: 0.25em; vertical-align: middle; }



/* ==== kitchen overlay (rebuilt 2026-10-24) ==== */
.upd-body { font-size: 1.4em; }
.upd-bar { position: sticky; top: 0; z-index: 5; background: #000; display: block; padding: 8px 0; width: 100%; }
#upd-find { font: inherit; font-size: 1.2em; width: 6.5em; padding: 6px 10px; border: 2px solid #fff; border-radius: 8px; text-align: center; }
.upd-msg { font-size: 0.8em; color: #0f0; }
.upd-msg.is-error { color: #ff4d4d; font-weight: bold; }
.upd-order { border: 3px solid #fff; border-radius: 12px; padding: 8px 12px; margin: 12px 0; overflow: visible; }
.upd-order.st-cooking { border-color: #ffa500; }
.upd-order.st-ready { border-color: #ff0000; }
.upd-order.st-done { border-color: #444; opacity: 0.6; }
.upd-head { font-size: 1.1em; }
.upd-no { font-family: Courier, monospace; font-weight: bold; font-size: 1.3em; }
.upd-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid #333; }
.upd-item-text { flex: 1 1 260px; }
.upd-pizza { font-weight: bold; }
.upd-extras { color: #ff4d4d; }
.upd-body-block {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
  width: 100%; max-width: 100%; margin-top: 6px; overflow: visible;
}
.upd-item-stack { -webkit-box-flex: 1; -webkit-flex: 1 1 200px; flex: 1 1 200px; min-width: 0; }
.upd-btns {
  display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto;
  width: auto; max-width: 100%; margin: 0 0 0 auto; text-align: right; overflow: visible;
}
.upd-btn {
  -webkit-appearance: none; appearance: none; display: inline-block;
  font: inherit; font-size: 0.8em; min-width: 96px; min-height: 64px;
  margin: 4px 2px; border: 2px solid #666; border-radius: 10px; background: #222; color: #888;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.upd-btn.st-prepping.is-current { background: #fff; color: #000; border-color: #fff; }
.upd-btn.st-cooking.is-current { background: #ffa500; color: #000; border-color: #ffa500; }
.upd-btn.st-ready.is-current { background: #ff0000; color: #fff; border-color: #fff; }
.upd-btn.st-done.is-current { background: #000; color: #fff; border-color: #fff; }
.upd-btn.is-busy { opacity: 0.6; }
.upd-btn:active { transform: scale(0.96); }
#upd-clear { min-width: 0; padding: 0 16px; color: #fff; }
.upd-page-head { display: block; width: 100%; max-width: 100%; padding: 4px 0 8px; overflow: visible; }
.upd-page-head .pnp-header { display: inline-block; width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; vertical-align: middle; }
.upd-toolbar { display: block; width: 100%; max-width: 100%; margin: 6px 0 0; padding: 0; text-align: right; position: relative; z-index: 6; background: #000; overflow: visible; }
.upd-filters { display: inline-block; max-width: 100%; text-align: right; vertical-align: middle; }
.upd-filter, .upd-sort {
  font: inherit; font-weight: 700; letter-spacing: 0.02em;
  border: 3px solid #888; border-radius: 14px;
  background: linear-gradient(#2a2a2a, #151515); color: #eee;
  cursor: pointer; box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,0.12);
  text-shadow: 0 1px 0 #000; -webkit-appearance: none; appearance: none; display: inline-block;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.upd-filter { font-size: 0.71em; min-height: 48px; min-width: 82px; padding: 7px 14px; margin: 4px 2px; }
.upd-filter.st-prepping { border-color: #bbb; color: #fff; }
.upd-filter.st-cooking { border-color: #cc8400; color: #ffc14d; }
.upd-filter.st-ready { border-color: #cc0000; color: #ff6b6b; }
.upd-filter.st-done { border-color: #666; color: #bbb; }
.upd-filter.is-selected { transform: translateY(1px); box-shadow: 0 1px 0 #000, inset 0 2px 6px rgba(0,0,0,0.45); }
.upd-filter.is-selected:not([class*="st-"]) { background: linear-gradient(#fff, #ddd); color: #000; border-color: #fff; text-shadow: none; }
.upd-filter.st-prepping.is-selected { background: linear-gradient(#fff, #e8e8e8); color: #000; border-color: #fff; text-shadow: none; }
.upd-filter.st-cooking.is-selected { background: linear-gradient(#ffb733, #e69500); color: #000; border-color: #ffc14d; text-shadow: none; }
.upd-filter.st-ready.is-selected { background: linear-gradient(#ff3333, #cc0000); color: #fff; border-color: #fff; }
.upd-filter.st-done.is-selected { background: linear-gradient(#555, #333); color: #fff; border-color: #aaa; }
.upd-sort { min-width: 56px; min-height: 52px; padding: 6px 14px; color: #eee; border-color: #888; background: linear-gradient(#2a2a2a, #151515); }
.upd-sort-icon { font-size: 1.15em; line-height: 1; display: block; }
.upd-sort:active, .upd-filter:active { transform: scale(0.97); }
.upd-find-row {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; width: 100%;
}
.upd-find-row #upd-find, .upd-find-row #upd-clear { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.upd-find-row #upd-msg {
  -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto;
  min-width: 8em; min-height: 1.2em; text-align: right; margin: 0 8px;
}
.upd-find-row #upd-sort { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; }
.upd-open-list { min-height: 0; }
.upd-done-section { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #555; }
.upd-done-label { color: #888; font-size: 0.75em; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.upd-done-count { font-weight: normal; color: #666; }
.upd-order.is-minimized { padding: 4px 10px; margin: 6px 0; opacity: 0.72; cursor: pointer; border-width: 2px; border-color: #555; }
.upd-order.is-minimized .upd-body-block { display: none !important; }
.upd-order.is-minimized .upd-head { font-size: 0.85em; }
.upd-order.is-minimized .upd-no { font-size: 1.05em; }
.upd-order.is-minimized .kds-meta { display: none; }
.upd-order.is-expanded { cursor: pointer; }
.upd-order.is-expanded .upd-body-block { display: -webkit-box; display: -webkit-flex; display: flex; }
@media (max-width: 1100px), (orientation: portrait) {
  .upd-filter { min-height: 42px; min-width: 72px; font-size: 0.64em; padding: 6px 9px; }
}
@media (max-width: 700px) {
  .upd-body-block { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; }
  .upd-btns { margin-left: 0; width: 100%; text-align: left; }
  .upd-btn { min-width: 72px; }
}