/* NP6 register look: 1024x768 stage scaled to fit the browser window. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1b1b; }
body { font-family: Arial, Helvetica, sans-serif; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
[hidden] { display: none !important; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1024px; height: 768px;
  transform-origin: 50% 50%;
  background: #9a9a9a url(../assets/BckGround01.png) center / cover;
  overflow: hidden;
}

.sunken {
  background: #d6d2c9;
  border: 2px solid; border-color: #7b7b7b #f4f4f4 #f4f4f4 #7b7b7b;
  box-shadow: inset 1px 1px 0 #555;
}

/* ---- order panel ---- */
#orderPanel { position: absolute; left: 4px; top: 4px; width: 300px; height: 760px; display: flex; flex-direction: column; }
.op-head { display: flex; height: 26px; border-bottom: 2px solid #8d8d8d; font: bold 12px Arial; }
.op-head span { border-right: 1px solid #999; padding: 6px 4px; background: linear-gradient(#ecebe7, #cfcbc2); }
.op-head .q, .line .q { width: 32px; flex: none; text-align: center; }
.op-head .d, .line .d { flex: 1; min-width: 0; }
.op-head .p, .line .p { width: 72px; flex: none; text-align: right; }
.op-head .o { width: 46px; flex: none; text-align: center; border-right: 0; color: #0a246a; }
.op-head .p { margin-right: 0; }
#orderList { flex: 1; min-height: 0; overflow-y: auto; background: #f8f7f3; }
#orderList::-webkit-scrollbar { width: 10px; }
#orderList::-webkit-scrollbar-thumb { background: #aaa; }
.line { display: flex; font: bold 14px Arial; padding: 3px 4px 3px 0; cursor: pointer; color: #111; }
.line .d { padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line .p { padding-right: 46px; }
.line.sub { font-size: 12px; font-weight: normal; padding-top: 1px; padding-bottom: 1px; color: #333; }
.line.sub .d { padding-left: 16px; white-space: pre; }
.line.mod { color: #b02a1a; }
.line.missing .d { color: #d00; font-weight: bold; }
.line.sel { background: #0a246a; color: #fff; }
.line.sel.missing .d, .line.sel.mod { color: #ffd6d6; }
.op-foot { border-top: 2px solid #8d8d8d; background: linear-gradient(#e8e6e0, #cfcbc2); padding: 4px 8px; font: 13px Arial; }
.op-foot div { display: flex; justify-content: space-between; }
.op-foot .tot { font: bold 20px Arial; margin-top: 2px; }

/* ---- header ---- */
#header { position: absolute; left: 310px; top: 4px; width: 710px; height: 88px; border: 2px solid; border-color: #eee #666 #666 #eee; background: rgba(170,170,170,.35); }
#userIcon { position: absolute; left: 4px; top: 2px; width: 82px; height: 80px; cursor: pointer; }
#userIcon img { position: absolute; left: 10px; top: 8px; width: 61px; height: 64px; }
#userIcon.off img { filter: grayscale(1) opacity(.45); }
.hf { position: absolute; height: 22px; background: #d6d2c9; border: 1px solid; border-color: #777 #fff #fff #777; font: bold 12px/20px Arial; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.hf.white { background: #fff; font-size: 14px; color: #0a246a; text-align: center; }
.hf.msg { color: #0a246a; }
.hf.msg.err { background: #ffe066; color: #a00; }
#hTotal { position: absolute; left: 622px; top: 6px; width: 80px; height: 72px; background: #d6d2c9; border: 1px solid; border-color: #777 #fff #fff #777; text-align: center; font: bold 15px Arial; color: #0a246a; padding-top: 14px; cursor: pointer; }
#hTotal small { display: block; font-size: 10px; color: #444; margin-bottom: 6px; }

/* ---- main content ---- */
#main { position: absolute; left: 310px; top: 96px; width: 710px; height: 668px; background: #8f8f8f url(../assets/BckGround01.png) center / cover; }
#grid, #overlay, #float { position: absolute; left: 0; top: 0; width: 706px; }
#grid, #overlay { height: 664px; }
#overlay { background: #8f8f8f url(../assets/BckGround01.png) center / cover; z-index: 5; }
#float { z-index: 4; background: rgba(40,40,40,.85); box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.ov-body { position: absolute; inset: 0; }
.ov-note { position: absolute; left: 10px; bottom: 90px; font: bold 13px Arial; color: #333; }

/* NP6-style keys: square, bevelled, flat section colour, bold label */
.key {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: pre-line; overflow: hidden; overflow-wrap: normal; word-break: normal;
  font: bold 12px/1.12 Arial, Helvetica, sans-serif; letter-spacing: -.2px; padding: 3px 2px;
  border-radius: 3px; cursor: pointer;
  --bg: #e9e9e9;
  background: linear-gradient(to bottom, rgba(255,255,255,.38), rgba(255,255,255,.08) 42%, rgba(0,0,0,0) 58%, rgba(0,0,0,.14)), var(--bg);
  border: 1px solid #1c1c1c;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(0,0,0,.28), 1px 2px 2px rgba(0,0,0,.45);
}
.key.big { font-size: 17px; letter-spacing: .3px; }
.key.fn { font-size: 12px; }
.key.tab { font-size: 12px; text-shadow: 0 1px 0 rgba(0,0,0,.5); border-color: #0d1b2a; }
.key.tab.active { --bg: #ffc72c !important; color: #1c1c1c !important; text-shadow: none; box-shadow: inset 0 0 0 2px #da291c, 1px 2px 2px rgba(0,0,0,.45); }
.key.img { background: center / 100% 100% no-repeat; border: 0; box-shadow: none; border-radius: 0; color: transparent; }
.key.down { transform: translate(1px, 1px); filter: brightness(.8); box-shadow: inset 2px 2px 3px rgba(0,0,0,.45); }
.key.active { outline: 3px solid #da291c; outline-offset: -3px; }
.key.outage { filter: grayscale(.7) brightness(.9); }
.key .badge { position: absolute; right: 1px; bottom: 1px; background: yellow; color: #000; font: bold 9px Arial; padding: 1px 2px; border: 1px solid #000; }

/* ---- system screens ---- */
.login-box, .pay-info, .rep-box, .settings { position: absolute; left: 5px; top: 5px; background: #f8f7f3; border: 2px solid; border-color: #7b7b7b #f4f4f4 #f4f4f4 #7b7b7b; padding: 14px; font: 14px Arial; color: #111; }
.login-box { width: 405px; height: 360px; }
.login-title { font: bold 22px Arial; margin-bottom: 12px; color: #0a246a; }
.hint { margin-top: 12px; color: #555; font-size: 12px; }
.entry { margin-top: 14px; background: #fff; border: 2px inset #aaa; font: bold 28px "Courier New", monospace; padding: 8px 10px; text-align: right; color: #0a246a; min-height: 50px; }
.pay-info { width: 345px; height: 574px; font-size: 16px; overflow: auto; }
.pay-info > div { display: flex; justify-content: space-between; padding: 4px 0; }
.pay-info .due { font: bold 24px Arial; color: #a00; border-top: 2px solid #999; margin-top: 6px; padding-top: 8px; }
.pay-info .entry { display: block; }
.pay-info .tender { font-size: 14px; color: #2b6a2b; }
.rep-box { width: 694px; height: 574px; overflow: auto; }
.rep { width: 100%; border-collapse: collapse; font: 15px Arial; }
.rep td { padding: 4px 6px; border-bottom: 1px solid #ddd; }
.rep td:last-child { text-align: right; }
.rep th { text-align: left; padding: 12px 6px 4px; color: #0a246a; }
.settings { width: 694px; height: 574px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-content: start; user-select: text; -webkit-user-select: text; }
.settings label { display: flex; flex-direction: column; font: bold 13px Arial; gap: 4px; }
.settings label.chk { flex-direction: row; align-items: center; gap: 8px; }
.settings label.wide { grid-column: 1 / -1; }
.settings input, .settings select, .settings textarea { font: 15px Arial; padding: 6px; border: 1px solid #888; }
.settings input[type=checkbox] { width: 20px; height: 20px; }

/* ---- modal ---- */
#modal { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.modal-box { min-width: 380px; max-width: 700px; max-height: 720px; background: #d6d2c9; border: 2px solid; border-color: #fff #555 #555 #fff; box-shadow: 0 10px 30px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.modal-title { background: linear-gradient(90deg, #0a246a, #3a6ea5); color: #fff; font: bold 15px Arial; padding: 8px 12px; }
.modal-text { padding: 18px; font: 16px Arial; white-space: pre-line; overflow: auto; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; padding: 0 18px 18px; flex-wrap: wrap; }
.mbtn { min-width: 110px; height: 52px; font: bold 15px Arial; border-radius: 5px; border: 1px solid #555; cursor: pointer; background: linear-gradient(#fff, #dcdcdc); }
.mbtn:active { filter: brightness(.85); }
.mbtn.big { min-width: 150px; }
.mbtn.green { background: linear-gradient(#69db7c, #2f9e44); color: #fff; }
.mbtn.red { background: linear-gradient(#ff8787, #e03131); color: #fff; }
.mbtn.blue { background: linear-gradient(#74c0fc, #1c7ed6); color: #fff; min-width: 170px; height: 80px; font-size: 20px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 90px); gap: 8px; margin-top: 12px; justify-content: center; }
.pinpad .mbtn { min-width: 0; height: 60px; font-size: 22px; }
.change { text-align: center; padding: 10px 40px; }
.change span { display: block; font: bold 16px Arial; color: #444; }
.change b { display: block; font: bold 56px Arial; color: #2b6a2b; }

.bar { height: 16px; background: #fff; border: 1px inset #999; margin-top: 12px; width: 420px; }
.bar i { display: block; height: 100%; width: 0; background: #1c7ed6; }

/* ---- printing: only the receipt ---- */
#printArea { display: none; }
@media print {
  @page { size: 80mm auto; margin: 3mm; }
  html, body { background: #fff; overflow: visible; height: auto; }
  #stage { display: none; }
  #printArea { display: block; }
  #printArea .receipt { box-shadow: none; margin: 0; width: auto; }
}

/* ---- McDonald's branding ---- */
:root { --mcd-red: #da291c; --mcd-yellow: #ffc72c; --mcd-dark: #27251f; }
.brand { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px; background: linear-gradient(#e8382b, #b81f14); border-bottom: 2px solid var(--mcd-yellow); color: #fff; font: bold 12px Arial; }
.brand img { height: 22px; }
.brand .bname { font: bold 16px "Arial Rounded MT Bold", "Helvetica Rounded", Arial; color: var(--mcd-yellow); letter-spacing: .2px; }
#brandPod { flex: 1; text-align: right; font-size: 11px; letter-spacing: .5px; }
#dbStatus { font-size: 10px; padding: 2px 5px; border-radius: 3px; background: #2b8a3e; }
#dbStatus.off { background: #e67700; }
#stage.dt .brand { background: linear-gradient(#27251f, #000); }
#stage.dt #brandPod { color: var(--mcd-yellow); }
#header { background: linear-gradient(rgba(218,41,28,.10), rgba(170,170,170,.35)); }
#hTotal { background: var(--mcd-yellow); color: var(--mcd-dark); border-color: #b08600 #fff3bf #fff3bf #b08600; }
#hTotal small { color: var(--mcd-dark); }
.hf.msg { border-left: 4px solid var(--mcd-red); }


.mymcd-bar { display: flex; align-items: center; gap: 6px; background: var(--mcd-red); color: #fff; font: 12px Arial; padding: 4px 6px; }
.mymcd-bar img { height: 18px; }
.line.offer .d { color: var(--mcd-red); }
.line.sel.offer .d { color: #ffd6d6; }
.line.promo .d { color: #fff; }
.line.promo .d::before { content: ''; }
.line.sub.promo .d { color: var(--mcd-red); font-weight: bold; font-style: italic; }

.login-box { position: absolute; }
.login-logo { position: absolute; right: 14px; top: 12px; width: 56px; }
.mymcd-box { position: absolute; left: 5px; top: 5px; width: 405px; background: #fff; border: 3px solid var(--mcd-red); border-radius: 8px; padding: 12px 14px; font: 14px Arial; color: #111; }
.mymcd-box:not(.linked) { height: 360px; }
.mymcd-box.linked { width: 696px; height: 134px; }
.mm-head { display: flex; align-items: center; gap: 10px; font: bold 22px Arial; color: var(--mcd-red); margin-bottom: 8px; }
.mm-head img { width: 40px; }
.mm-head b { margin-left: auto; color: var(--mcd-dark); background: var(--mcd-yellow); padding: 4px 10px; border-radius: 14px; font-size: 18px; }
.ov-note.top { top: 20px; bottom: auto; }
.ov-note.top2 { top: 160px; bottom: auto; }
.pay-info .pm { display: flex; align-items: center; gap: 6px; background: var(--mcd-red); color: #fff; font: bold 13px Arial; padding: 6px 8px; margin: -6px -6px 6px; border-radius: 3px; }
.pay-info .pm img { height: 20px; }
.mm-earn { text-align: center; font: bold 14px Arial; color: var(--mcd-red); padding-top: 6px; }
.crew-form { display: flex; gap: 8px; margin-bottom: 10px; user-select: text; -webkit-user-select: text; }
.crew-form input, .crew-form select { font: 15px Arial; padding: 6px; border: 1px solid #888; min-width: 0; }
.crew-form input[name=id] { width: 90px; }
.crew-form input[name=name] { flex: 1; }
.crew-form .mbtn { min-width: 80px; height: 36px; }
.crew-box .rep { font-size: 13px; }
.crew-box tr[data-id] { cursor: pointer; }
.crew-box tr[data-id]:hover { background: #fff3bf; }
.rep th { text-align: left; }

/* ---- thermal receipt ---- */
.modal-text:has(.receipt) { background: #9a9a9a; max-height: 600px; }
.receipt { box-sizing: content-box; width: 42ch; margin: 0 auto; background: #fff; color: #000; padding: 14px 10px 20px; font: 12px/1.35 "Courier New", Courier, monospace; box-shadow: 0 2px 8px rgba(0,0,0,.4); user-select: text; -webkit-user-select: text; }
.receipt .r { white-space: pre; overflow: hidden; }
.receipt .c { text-align: center; white-space: pre-wrap; }
.receipt .b { font-weight: bold; }
.receipt .big { font-size: 18px; line-height: 1.5; }
.receipt .r-logo { width: 46px; filter: brightness(0); margin: 4px 0; }
.receipt .r-promo { border: 2px solid #000; margin: 2px 0; padding: 0 0 4px; }
.receipt .r-promo-t { background: #000; color: #fff; text-align: center; font: bold 16px Arial; padding: 4px 0; margin-bottom: 4px; letter-spacing: .5px; }

.login-box .lan { margin-top: 10px; padding: 6px 8px; background: #fff3bf; border-left: 4px solid var(--mcd-red); font-size: 12px; }

.ov-note { color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.crew-box tr.on { background: #ffe8a3; }
.crew-form + .crew-form { margin-top: -2px; }
.points-form input { flex: 1; }
.key.tab.active { outline: none; }
.ov-note { white-space: pre-line; line-height: 1.5; }

/* ---- RMHC ---- */
.key.rmhc { border-color: #7a0019; }
.pay-info .don { color: #c8102e; font-weight: bold; }
.line.donation .d { color: #c8102e; }
.receipt .r-rmhc { border-top: 1px dashed #000; border-bottom: 1px dashed #000; margin: 4px 0; padding: 4px 0; }

/* =====================================================================
   NP6 front-counter layout (order panel, header, key shapes)
   ===================================================================== */
#orderPanel { position: absolute; left: 4px; top: 4px; width: 300px; height: 760px; display: flex; flex-direction: column;
  background: #d4d0c8; border: 2px solid; border-color: #7b7b7b #f4f4f4 #f4f4f4 #7b7b7b; }
.op-head { display: flex; height: 24px; border: 0; background: #d4d0c8; font: bold 14px Arial; padding: 1px; gap: 2px; }
.op-head span { display: flex; align-items: center; justify-content: center; background: #d4d0c8; border: 2px solid;
  border-color: #fff #808080 #808080 #fff; padding: 0 4px; }
#opDine { width: 46px; } #opSide { flex: 1; } #opOrder { width: 86px; } .op-head .op-x { width: 22px; }
#orderList { flex: 1; min-height: 0; overflow-y: auto; background: #d4d0c8; border-top: 2px solid #808080; padding: 2px 0; }
.line { display: flex; font: bold 17px/1.18 Arial, Helvetica, sans-serif; padding: 0 4px; color: #000; cursor: pointer; }
.line .q { width: 24px; text-align: left; }
.line .d { flex: 1; min-width: 0; padding-left: 2px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.line .p { width: 66px; text-align: right; padding-right: 0; }
.line.sub { font: bold 16px/1.15 Arial, Helvetica, sans-serif; color: #000; padding-top: 0; padding-bottom: 0; }
.line.sub .d { padding-left: 14px; white-space: nowrap; }
.line.mod .d { padding-left: 10px; color: #000; }
.line.missing .d { color: #c00; }
.line.promo .d, .line.sub.promo .d { color: #c8102e; font-style: normal; }
.line.offer .d { color: #000; }
.line.donation .d { color: #000; }
.line.sel, .line.sel .d { background: #0a246a; color: #fff !important; }
.op-sum { border-top: 2px solid #2e8b3a; margin-top: 3px; padding: 2px 4px 8px; font: bold 17px/1.25 Arial, Helvetica, sans-serif; }
.srow { display: flex; }
.srow .sl { flex: 1; text-align: right; padding-right: 12px; }
.srow .sv { width: 66px; text-align: right; }
.srow.chg { color: #1a3cff; font-size: 25px; line-height: 1.3; }
.srow.chg .sv { width: 90px; }
.op-sum .oid { padding-left: 40px; margin-top: 2px; }
.op-sum .eos { text-align: center; font-size: 15px; margin-top: 2px; }
.op-foot { display: flex; height: 30px; gap: 2px; padding: 2px; border-top: 2px solid #808080; background: #d4d0c8; }
#lastSale { flex: 1; text-align: left; font: 15px Arial; background: #d4d0c8; border: 2px solid; border-color: #808080 #fff #fff #808080; cursor: pointer; }
#opUp { width: 30px; font: bold 16px Arial; background: #d4d0c8; border: 2px solid; border-color: #fff #808080 #808080 #fff; cursor: pointer; }
.mymcd-bar { font-size: 12px; }

#header { background: rgba(160,160,160,.35); }
.hf.c { text-align: center; }
.hf.big { font-size: 14px; }
#dbStatus { font-size: 10px; border-radius: 0; color: #111; }
#dbStatus.on { background: #cde8cd; } #dbStatus.off { background: #ffe0b3; }
#hTotal { background: #d4d0c8; color: #000; border-color: #808080 #fff #fff #808080; }
#hTotal small { color: #333; }

/* ---- key shapes ---- */
.key.shape-round, .key.shape-num {
  border-radius: 50%; flex-direction: column; border: 1px solid rgba(0,0,0,.65);
  background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.8), rgba(255,255,255,0) 42%),
              radial-gradient(circle at 50% 55%, var(--bg) 58%, rgba(0,0,0,.55) 100%), var(--bg);
  box-shadow: 1px 2px 3px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.3);
  font-size: 11.5px; text-shadow: 0 1px 1px rgba(0,0,0,.55); padding: 4px;
}
.key.shape-round.big { font-size: 17px; }
.key.shape-num {
  --bg: #d8d8d8; color: #111 !important; text-shadow: 0 1px 0 #fff; font: bold 34px/1 Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 36% 28%, #ffffff, #e6e6e6 35%, #b3b3b3 75%, #8a8a8a 100%);
}
.key .onoff { display: block; font-size: 11px; color: #ff4d4d; margin-top: 1px; }
.key .onoff.on { color: #5ee06a; }

.key.shape-diamond { overflow: visible; background: none; border: 0; box-shadow: none; flex-direction: column; gap: 0; color: #1c1c1c !important; }
.key.shape-diamond::before { content: ''; position: absolute; inset: 11px; transform: rotate(45deg); border-radius: 7px;
  background: linear-gradient(135deg, #fff5bf, #ffcc33 45%, #e3a600); border: 1px solid #8a6d00; box-shadow: 1px 2px 3px rgba(0,0,0,.5); }
.key.shape-diamond b, .key.shape-diamond small { position: relative; }
.key.shape-diamond b { font: bold 24px/1 Arial, Helvetica, sans-serif; }
.key.shape-diamond small { font: 10px/1.1 Arial, Helvetica, sans-serif; }
.key.shape-diamond.down::before { filter: brightness(.85); }

.key.shape-pill { border-radius: 12px; font-size: 15px; line-height: 1.05; text-shadow: 0 1px 1px rgba(0,0,0,.6);
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(0,0,0,.25)), var(--bg);
  border: 1px solid #4a1f27; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 1px 2px 3px rgba(0,0,0,.5); }
.key.shape-dark { border-radius: 12px; font-size: 12px; text-shadow: 0 1px 1px #000;
  background: linear-gradient(to bottom, #6a6a6a, #2b2b2b 45%, #111); border: 1px solid #000; }
.key.shape-square { font-size: 11px; border-radius: 2px; text-shadow: 0 1px 1px rgba(0,0,0,.5); }

.key.tab { background: linear-gradient(to bottom, #4d8ee0, #1f5fa8 55%, #174a86); border: 1px solid #0b2d57; border-radius: 2px;
  font-size: 11.5px; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.key.tab.active { background: linear-gradient(to bottom, #fff3b0, #ffcc33 55%, #e3a600) !important; color: #111 !important; text-shadow: none; }

.key.shape-photo { padding: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; border-radius: 2px;
  border: 1px solid #2a2a2a; background: linear-gradient(to bottom, #ffffff 10%, var(--bg) 100%); font-size: 11.5px; }
.key.shape-photo .ban { display: block; flex: none; background: #c8102e; color: #fff; font-weight: bold; font-size: .8em; line-height: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: left; padding: 0 3px; }
.key.shape-photo .nm { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1px 3px 3px;
  font-weight: bold; line-height: 1.1; color: #1c1c1c; }
.key.shape-photo .price { position: absolute; right: 2px; bottom: 2px; background: rgba(255,255,255,.9); color: #000; font-size: .85em;
  padding: 0 3px; border-radius: 3px; border: 1px solid #999; }
.key.shape-mym { background: #fff; border: 1px solid #999; border-radius: 2px; gap: 1px; flex-direction: row; }
.key.shape-mym .my { color: #da291c; font: bold 22px Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.key.shape-mym img { width: 28px; }
.key.shape-photo.has-price .nm { padding-bottom: 14px; }
.receipt .small { font-size: 9px; color: #666; }

/* ---- manager extras: cash, more reports, store message ---- */
.mrep .rep td:not(:first-child), .mrep .rep th:not(:first-child) { text-align: right; white-space: nowrap; }
.mrep .rep th { border-bottom: 2px solid #0a246a; padding-top: 6px; }
.mrep .barcell { width: 40%; }
.hbar { display: inline-block; height: 14px; min-width: 2px; background: linear-gradient(#ffe07a, var(--mcd-yellow)); border: 1px solid #b08600; vertical-align: middle; }
.cash-box .rep tr:nth-child(6) td { border-bottom: 2px solid #0a246a; font-size: 17px; }
.notice-box { height: auto; }
.notice-box .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notice-box .presets .mbtn { height: 44px; font-size: 13px; text-align: left; padding: 0 10px; }
.settings-sub { font: bold 14px Arial; color: #0a246a; border-bottom: 2px solid #0a246a; padding-top: 6px; }

/* ---- receipt: guest survey offer ---- */
.receipt .r-survey { border: 2px dashed #000; margin: 2px 0; padding: 0 0 6px; }
.receipt .r-survey-t { background: #000; color: #fff; text-align: center; font: bold 14px Arial; padding: 4px 0; margin-bottom: 4px; letter-spacing: 1px; }
.receipt .r-survey .r { white-space: pre-wrap; }

/* ---- login screen: sign-in panel, keypad, register picker ---- */
.login-box { display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; overflow: hidden; }
.login-box > :not(.lb-head) { margin: 0 12px; }
.lb-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; background: linear-gradient(#e8382b, #b81f14);
  border-bottom: 2px solid var(--mcd-yellow); font: bold 17px "Arial Rounded MT Bold", "Helvetica Rounded", Arial; color: var(--mcd-yellow); }
.lb-head img { height: 22px; }
.lb-lock { background: var(--mcd-dark); color: var(--mcd-yellow); font: bold 15px Arial; text-align: center; padding: 6px; letter-spacing: 1px;
  border: 1px solid; border-color: #000 #555 #555 #000; }
.lb-lock small { display: block; color: #fff; font: 11px Arial; letter-spacing: 0; margin-top: 2px; }
.lb-fields { display: flex; gap: 6px; }
.hf-s { flex: 1; height: 24px; background: #d6d2c9; border: 1px solid; border-color: #777 #fff #fff #777; font: bold 12px/22px Arial;
  padding: 0 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
.hf-s.open { color: #2b6a2b; }
.hf-s.busy { background: #ffe066; color: #a00; }
.lb-label { font: bold 13px Arial; color: #0a246a; margin-top: 4px !important; }
.login-box .entry { margin-top: 0; letter-spacing: 6px; }
.lb-note { font-size: 11px; color: #555; border-left: 4px solid var(--mcd-red); padding: 3px 6px; background: #efece6; }
.login-box.locked { border-color: var(--mcd-red); }
.key.login-go { font-size: 18px; letter-spacing: 1px; }

.pos-panel { position: absolute; left: 5px; top: 370px; width: 696px; height: 222px; background: #d6d2c9;
  border: 2px solid; border-color: #7b7b7b #f4f4f4 #f4f4f4 #7b7b7b; box-shadow: inset 1px 1px 0 #555; }
.pp-head { height: 26px; padding: 0 10px; background: linear-gradient(#0a246a, #3a6ea5); color: #fff; font: bold 13px/26px Arial; }
.pp-legend { padding: 8px 10px 0; font: 12px Arial; color: #333; display: flex; align-items: center; gap: 6px; }
.pp-legend .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #1c1c1c; border-radius: 2px; margin-left: 8px; }
.pp-legend .sw:first-child { margin-left: 0; }
.sw.open { background: #e9e9e9; } .sw.busy { background: #f4b6b6; } .sw.sel { background: #f6d155; }
.key.pos-pick { font-size: 12px; }
.key.pos-pick.sel { outline: 3px solid #0a246a; outline-offset: -4px; }
.key.kiosk-go { font-size: 16px; letter-spacing: .3px; }

/* ---- picture keys (photos from fetch-images.py): white tile, photo under the caption banner ---- */
.key.shape-photo.has-photo { background: #fff; }
.key.shape-photo .ph { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 2px 3px 3px; pointer-events: none; -webkit-user-drag: none; }
.key.shape-photo.logo .ph { padding: 6px 7px 8px; }
.key.shape-photo.has-photo.has-price .ph { padding-bottom: 15px; }
.key.shape-photo.has-photo.outage .ph { opacity: .35; filter: grayscale(1); }

/* ---- POS Setup ---- */
.possetup .ps-table { max-height: 430px; overflow: auto; background: #fff; border: 1px solid #bbb; }
.possetup .ps-table td, .possetup .ps-table th { text-align: left; padding: 5px 8px; }
.possetup .ps-table select { font: 14px Arial; padding: 4px; }
.possetup .ps-table .who { color: #555; font-size: 13px; }

/* ---- declined card ---- */
.declined { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 4px; text-align: center; }
.declined b { background: #c92a2a; color: #fff; font: bold 28px Arial; letter-spacing: 3px; padding: 6px 22px; border-radius: 4px; }
.declined span { font: bold 17px Arial; color: #111; }
.declined small { color: #555; font-size: 13px; }

/* ---- kitchen comments ---- */
.note-bar { background: #ffe066; color: #000; font: bold 13px Arial; padding: 4px 6px; border-bottom: 1px solid #c9a400; cursor: pointer; }
.line.note .d { color: #c92a2a; font-weight: bold; }
.comment-box { height: auto; }
.comment-box .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comment-box .presets .mbtn { height: 42px; font-size: 13px; text-align: left; padding: 0 10px; }

/* ---- daypart: items not being served (only managers and owners see them) ---- */
.key.offday { filter: grayscale(.85); opacity: .55; }
.key.offday .badge { background: #495057; color: #fff; border-color: #212529; font-size: 8px; }

/* ---- reboot ---- */
.reboot-info { display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 14px; line-height: 1.4; }