/* =========================================================
   BramSamnang 2 & 3 — PHONE DATA-ENTRY PAD  (Phase 2)
   Every rule is scoped to  html.ui-mobile , exactly like mobile.css,
   so this file is inert on the PC and styles.css keeps the desktop
   entry form untouched.
   Built to the supplied design: slip + condition panel on top,
   posts A–E and the number keypad underneath.
   ========================================================= */

html.ui-mobile {
  --mp-bg: #eef0f4;
  --mp-card: #ffffff;
  --mp-line: #dfe3e9;
  --mp-ink: #2b2f36;
  --mp-dim: #8b929c;
  --mp-orange: #f4511e;         /* W · X · # · ទូទាត់ */
  --mp-orange-d: #d63c0c;
  --mp-amber: #f5a623;          /* → · active post */
  --mp-amber-d: #d98a0c;
  --mp-yellow: #ffd400;         /* បញ្ចូលលេខ */
  --mp-soft: #f5f6f8;
  --mp-tint: #fff5ea;
  --mp-gap: 6px;
}

/* ---------- the pad takes over the whole entry view ---------- */
html.ui-mobile #view-entry.mpad { display: none; }
html.ui-mobile #view-entry.mpad.active {
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0;
  top: calc(var(--m-bar) + var(--m-safe-t));
  bottom: 0;
  overflow: hidden;
  background: var(--mp-bg);
  height: auto;
}
/* the desktop entry markup stays in the DOM (app.js reads and writes it)
   but is never shown — the pad drives those same fields */
html.ui-mobile #view-entry.mpad > .app { display: none !important; }
/* the tab bar would sit under បញ្ចូលលេខ and invite mis-taps */
html.ui-mobile body.mpad-active .m-tabs { display: none; }

html.ui-mobile .mp { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* ---------- context strip: dealer · page · draw ---------- */
html.ui-mobile .mp-ctx {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 38px; padding: 0 10px;
  background: #fff; border: 0; border-bottom: 1px solid var(--mp-line);
  font: 700 13px/1.2 inherit; color: var(--mp-ink); text-align: left; cursor: pointer;
}
html.ui-mobile .mp-ctx .mp-ctx-v { color: var(--mp-orange); }
html.ui-mobile .mp-ctx .mp-ctx-warn { color: #c0392b; font-weight: 800; }
html.ui-mobile .mp-ctx .mp-ctx-gear { margin-left: auto; color: var(--mp-dim); font-size: 15px; }

/* ---------- top half: slip + panel ---------- */
html.ui-mobile .mp-top {
  flex: 1 1 auto; min-height: 0;
  display: flex; gap: var(--mp-gap); padding: var(--mp-gap);
}

/* --- the slip (left) --- */
html.ui-mobile .mp-slip {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mp-card); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  overflow: hidden;
}
html.ui-mobile .mp-slip-head {
  flex: 0 0 auto; padding: 8px 10px 4px;
  font-size: 15px; font-weight: 800; color: var(--mp-ink);
}
html.ui-mobile .mp-slip-head b { color: var(--mp-ink); }
html.ui-mobile .mp-slip-head .mp-col { color: var(--mp-dim); font-weight: 700; font-size: 12px; float: right; }
html.ui-mobile .mp-rows {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 6px 4px;
}
html.ui-mobile .mp-empty { color: var(--mp-dim); font-size: 13px; padding: 14px 6px; }

html.ui-mobile .mp-row {
  border-bottom: 1px solid #f0f1f4; padding: 6px 4px;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px;
}
html.ui-mobile .mp-row:last-child { border-bottom: 0; }
html.ui-mobile .mp-row.is-win { background: #eef7ee; border-radius: 8px; }
html.ui-mobile .mp-n { font-size: 21px; font-weight: 700; color: var(--mp-ink); letter-spacing: .5px; }
html.ui-mobile .mp-a { font-size: 17px; color: var(--mp-ink); white-space: nowrap; }
html.ui-mobile .mp-a::before { content: ": "; color: var(--mp-dim); }
html.ui-mobile .mp-del {
  border: 0; background: transparent; cursor: pointer;
  width: 34px; height: 34px; font-size: 17px; color: #d9534f; line-height: 1;
}
/* a range renders as  start / ↓ (count) / end  exactly like the paper slip */
html.ui-mobile .mp-mid {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; padding: 0 2px;
  color: var(--mp-amber); font-weight: 700; font-size: 14px;
}
html.ui-mobile .mp-mid .mp-arrow { color: var(--mp-ink); font-size: 15px; padding-left: 22px; }
html.ui-mobile .mp-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: var(--mp-soft); border: 1px solid var(--mp-line);
  font-size: 11px; font-weight: 800; color: var(--mp-dim); vertical-align: 2px;
}

html.ui-mobile .mp-notice {
  flex: 0 0 auto; margin: 0 6px 6px; padding: 8px 10px;
  background: var(--mp-tint); border-radius: 8px;
  font-size: 12px; line-height: 1.45; color: #6b4a2a;
}
html.ui-mobile .mp-notice.is-error { background: #fdecea; color: #a52418; font-weight: 700; }
html.ui-mobile .mp-notice[hidden] { display: none; }
html.ui-mobile .mp-total {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; background: var(--mp-tint);
  border-top: 1px solid #f3e3d0;
}
html.ui-mobile .mp-total span { font-size: 15px; font-weight: 800; color: var(--mp-ink); }
html.ui-mobile .mp-total b { font-size: 22px; font-weight: 800; color: var(--mp-orange); }

/* --- the condition panel (right) --- */
html.ui-mobile .mp-panel {
  flex: 0 0 38%; max-width: 160px;
  display: flex; flex-direction: column; gap: var(--mp-gap); min-height: 0;
}
html.ui-mobile .mp-fld {
  flex: 0 0 auto; text-align: left; cursor: pointer;
  background: var(--mp-card); border: 2px solid var(--mp-line); border-radius: 10px;
  padding: 5px 9px 7px; min-height: 52px; width: 100%;
  display: flex; flex-direction: column; justify-content: center; position: relative;
}
html.ui-mobile .mp-fld > span { font-size: 11px; color: var(--mp-dim); font-weight: 700; }
html.ui-mobile .mp-fld > b {
  font-size: 20px; font-weight: 700; color: var(--mp-ink);
  min-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.ui-mobile .mp-fld.is-on { border-color: var(--mp-orange); }
html.ui-mobile .mp-fld.is-on > b { color: var(--mp-orange); }
html.ui-mobile .mp-fld .mp-lock {
  position: absolute; right: 7px; bottom: 6px; font-size: 15px; font-style: normal;
}
html.ui-mobile .mp-fld .mp-lock.is-locked { filter: none; }

html.ui-mobile .mp-cond {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-gap);
}
html.ui-mobile .mp-cond button,
html.ui-mobile .mp-width button,
html.ui-mobile .mp-clear {
  background: var(--mp-soft); border: 1px solid var(--mp-line); border-radius: 10px;
  color: #4a5058; font-size: 15px; font-weight: 700; cursor: pointer;
  min-height: 40px; padding: 0 4px; width: 100%;
}
html.ui-mobile .mp-cond button:active,
html.ui-mobile .mp-width button:active { background: #e8eaee; }
html.ui-mobile .mp-cond button.is-on,
html.ui-mobile .mp-width button.is-on {
  background: var(--mp-amber); border-color: var(--mp-amber-d); color: #fff;
}
html.ui-mobile .mp-width { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-gap); }
html.ui-mobile .mp-width[hidden] { display: none; }
html.ui-mobile .mp-clear { flex: 0 0 auto; min-height: 38px; font-size: 16px; }

html.ui-mobile .mp-acts { flex: 0 0 auto; display: flex; gap: var(--mp-gap); }
html.ui-mobile .mp-acts button {
  min-height: 54px; border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer;
}
html.ui-mobile .mp-erase {
  flex: 0 0 34%; background: var(--mp-card); border: 1px solid var(--mp-line); color: #4a5058;
}
html.ui-mobile .mp-pay {
  flex: 1 1 auto; background: var(--mp-orange); border: 1px solid var(--mp-orange-d); color: #fff;
}
html.ui-mobile .mp-pay:active { background: var(--mp-orange-d); }

/* ---------- bottom half: posts + keypad ---------- */
html.ui-mobile .mp-keys {
  flex: 0 0 auto;
  padding: var(--mp-gap) var(--mp-gap) calc(var(--mp-gap) + var(--m-safe-b));
  background: var(--mp-bg); border-top: 1px solid var(--mp-line);
}
html.ui-mobile .mp-posts { display: flex; gap: 4px; margin-bottom: var(--mp-gap); }
html.ui-mobile .mp-posts button {
  flex: 1 1 0; min-width: 0; min-height: 40px;
  background: var(--mp-soft); border: 1px solid var(--mp-line); border-radius: 8px;
  color: #4a5058; font-size: 13px; font-weight: 800; cursor: pointer; padding: 0 2px;
}
html.ui-mobile .mp-posts button.is-on {
  background: var(--mp-amber); border-color: var(--mp-amber-d); color: #fff;
}
html.ui-mobile .mp-posts button[disabled] { opacity: .45; cursor: default; }

html.ui-mobile .mp-grid { display: flex; gap: var(--mp-gap); }
html.ui-mobile .mp-nums {
  flex: 1 1 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--mp-gap);
}
html.ui-mobile .mp-nums button {
  background: var(--mp-card); border: 1px solid var(--mp-line); border-radius: 10px;
  font-size: 26px; font-weight: 500; color: var(--mp-ink); cursor: pointer;
  min-height: 52px; box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}
html.ui-mobile .mp-nums button.mp-small { font-size: 20px; }
html.ui-mobile .mp-nums button:active { background: #eceff3; }

html.ui-mobile .mp-side {
  flex: 0 0 30%; max-width: 130px;
  display: grid; grid-template-rows: .85fr 1fr 1fr 1fr 1fr 1.35fr; gap: var(--mp-gap);
}
html.ui-mobile .mp-side button {
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font-size: 17px; font-weight: 800; color: #fff; min-height: 34px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
html.ui-mobile .mp-side .mp-back { background: var(--mp-card); border-color: var(--mp-line); color: #d9534f; font-size: 19px; }
html.ui-mobile .mp-side .mp-w { background: var(--mp-orange); border-color: var(--mp-orange-d); }
html.ui-mobile .mp-side .mp-rr { background: var(--mp-amber); border-color: var(--mp-amber-d); font-size: 19px; }
html.ui-mobile .mp-side .mp-box { background: var(--mp-orange); border-color: var(--mp-orange-d); }
html.ui-mobile .mp-side .mp-hash { background: var(--mp-orange); border-color: var(--mp-orange-d); }
html.ui-mobile .mp-side .mp-enter {
  background: var(--mp-yellow); border-color: #e0bb00; color: #3a2f00; font-size: 15px;
}
html.ui-mobile .mp-side button.is-on { outline: 3px solid #2b2f36; outline-offset: -3px; }
html.ui-mobile .mp-side button:active { filter: brightness(.92); }

/* ---------- setup bottom sheet (dealer · page · date · draw · product) ---------- */
html.ui-mobile .mp-sheet {
  position: fixed; inset: 0; z-index: 160;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end;
}
html.ui-mobile .mp-sheet[hidden] { display: none; }
html.ui-mobile .mp-sheet-box {
  width: 100%; background: #fff; border-radius: 16px 16px 0 0;
  padding: 16px 14px calc(16px + var(--m-safe-b));
  max-height: 90vh; overflow: auto;
}
html.ui-mobile .mp-sheet-box h3 { margin: 0 0 12px; color: var(--mp-orange); font-size: 17px; }
/* .top-inputs is MOVED here from the desktop markup, so its inputs keep every
   binding app.js gave them (dealer datalist, page load, draw times, …) */
html.ui-mobile .mp-sheet-box .top-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.ui-mobile .mp-sheet-box .top-inputs .hc-dealer { grid-column: 1 / -1; }
html.ui-mobile .mp-sheet-box .hc-field { display: flex; flex-direction: column; gap: 4px; }
html.ui-mobile .mp-sheet-box .hc-field > span { font-size: 12px; font-weight: 700; color: var(--mp-dim); }
html.ui-mobile .mp-sheet-box .hc-field input,
html.ui-mobile .mp-sheet-box .hc-field select {
  width: 100%; min-height: 46px; border: 1px solid var(--mp-line); border-radius: 8px; padding: 0 10px;
}
html.ui-mobile .mp-sheet-acts { display: flex; gap: 8px; margin-top: 14px; }
html.ui-mobile .mp-sheet-acts button { flex: 1 1 0; min-height: 46px; border-radius: 10px; font-size: 15px; font-weight: 800; cursor: pointer; }
html.ui-mobile .mp-sheet-acts .mp-ok { background: var(--mp-orange); border: 0; color: #fff; }
html.ui-mobile .mp-sheet-acts .mp-cancel { background: #fff; border: 1px solid var(--mp-line); color: #4a5058; }
html.ui-mobile .mp-cols { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
html.ui-mobile .mp-cols span { font-size: 12px; font-weight: 700; color: var(--mp-dim); }
html.ui-mobile .mp-cols button {
  min-width: 42px; min-height: 38px; border-radius: 8px;
  background: var(--mp-soft); border: 1px solid var(--mp-line); color: #4a5058; font-weight: 800; cursor: pointer;
}
html.ui-mobile .mp-cols button.is-on { background: var(--mp-amber); border-color: var(--mp-amber-d); color: #fff; }

/* ---------- very small phones ---------- */
@media (max-height: 700px) {
  html.ui-mobile .mp-nums button { min-height: 44px; font-size: 22px; }
  html.ui-mobile .mp-fld { min-height: 46px; }
  html.ui-mobile .mp-fld > b { font-size: 18px; }
  html.ui-mobile .mp-acts button { min-height: 46px; }
}