/* Macau Nutrition POS — modern light skin. Clean white surfaces, slate text,
   MN-green accent, flat controls, soft shadows. Variable NAMES are kept from
   the classic skin so inline var() references keep resolving; only the values
   and component styling changed. Shared by till, back office, and login. */
:root {
  --win-bg:      #f4f6f9;   /* page background */
  --win-panel:   #ffffff;   /* cards / panels */
  --win-border:  #e4e9f0;   /* hairline borders */
  --win-soft:    #eef2f7;   /* soft fills */
  --blue:        #3b82f6;   /* info accent + charts */
  --blue-dark:   #1d4ed8;   /* links / emphasized figures */
  --band1:       #101828;   /* header dark */
  --band2:       #1d2939;   /* header dark (lighter) */
  --band3:       #e9f9ef;   /* selection / hover tint (green) */
  --group-label: #101828;
  --btn1:        #ffffff;   /* legacy gradient endpoints — now flat */
  --btn2:        #ffffff;
  --btn-border:  #d0d7e2;
  --green:       #16a34a;   /* brand accent */
  --green-d:     #15803d;
  --red:         #dc2626;
  --amber:       #d97706;
  --grid-head:   #f8fafc;
  --grid-line:   #edf0f5;
  --txt:         #101828;
  --dim:         #667085;
  --shadow-sm:   0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md:   0 4px 12px rgba(16, 24, 40, .10);
  --shadow-lg:   0 12px 32px rgba(16, 24, 40, .18);
  --ring:        0 0 0 3px rgba(22, 163, 74, .18);
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--win-bg);
  color: var(--txt);
  font: 14px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden;
}
button { font: inherit; }

/* ---- top menu bar ---- */
.winbar {
  display: flex; align-items: center; gap: 2px;
  background: #fff;
  border-bottom: 1px solid var(--win-border);
  padding: 0 10px; height: 42px; flex: 0 0 auto; position: relative; z-index: 40;
}
.winbar .brand { font-weight: 800; color: var(--txt); padding: 0 12px 0 4px; letter-spacing: .2px; }
.winbar .brand b { color: var(--green-d); }
.menu { position: relative; }
.menu > .m-label { padding: 7px 13px; cursor: pointer; border-radius: var(--r-sm); user-select: none; color: var(--dim); font-weight: 500; transition: background .15s, color .15s; }
.menu:hover > .m-label, .menu.open > .m-label { background: var(--win-soft); color: var(--txt); }
.menu .m-drop {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--win-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 5px; z-index: 50;
}
.menu.open .m-drop { display: block; }
.m-drop a { display: flex; justify-content: space-between; gap: 20px; padding: 8px 12px; color: var(--txt); text-decoration: none; border-radius: var(--r-sm); cursor: pointer; transition: background .12s; }
.m-drop a:hover { background: var(--band3); color: var(--green-d); }
.m-drop a .k { color: var(--dim); font-size: 12px; }
.m-drop a:hover .k { color: var(--green-d); }
.m-drop .sep { height: 1px; background: var(--win-border); margin: 5px 8px; }
.winbar .spacer { flex: 1; }
.winbar .barinfo { color: var(--dim); padding: 0 8px; font-size: 12.5px; text-decoration: none; }
a.barinfo:hover { color: var(--green-d); }
.winbar .barinfo b { color: var(--txt); }

/* ---- dark header band ---- */
.posbanner {
  flex: 0 0 auto; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  color: #fff; background: var(--band1);
}
.posbanner .ico { font-size: 20px; }
.posbanner .title { font-size: 16px; font-weight: 700; letter-spacing: .4px; }
.posbanner .spacer { flex: 1; }
.posbanner .clock, .posbanner .date {
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.posbanner .date { color: #98a2b3; }

/* ---- group box → card with small caps label ---- */
.groupbox { border: 1px solid var(--win-border); border-radius: var(--r-lg); margin: 10px 8px 6px; padding: 14px 12px 10px; position: relative; background: #fff; box-shadow: var(--shadow-sm); }
.groupbox > .legend { position: absolute; top: -8px; left: 12px; background: #fff; padding: 0 7px; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border-radius: 4px; }

/* ---- form fields ---- */
.win-input, .win-select {
  border: 1px solid var(--btn-border); background: #fff; color: var(--txt);
  padding: 7px 10px; border-radius: var(--r-sm); font: inherit; transition: border-color .15s, box-shadow .15s;
}
.win-input:focus, .win-select:focus { outline: none; border-color: var(--green); box-shadow: var(--ring); }
.win-btn:focus-visible, .fnbtn:focus-visible, .tab:focus-visible,
button:focus-visible, a.barinfo:focus-visible { outline: 2px solid var(--green-d); outline-offset: 1px; }
.win-input.ro { background: var(--win-soft); color: var(--dim); }

/* ---- generic button ---- */
.win-btn { border: 1px solid var(--btn-border); background: #fff; color: var(--txt); padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-weight: 500; transition: background .15s, border-color .15s; box-shadow: var(--shadow-sm); }
.win-btn:hover { background: var(--win-soft); border-color: #b9c3d2; }
.win-btn.green { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.win-btn.green:hover { background: var(--green-d); border-color: var(--green-d); }
.win-btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.win-btn.red:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---- function-key pad ---- */
.fn-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 8px; }
.fnbtn {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: 1px solid var(--win-border); border-radius: var(--r-md);
  background: #fff; color: var(--txt);
  padding: 9px 10px; cursor: pointer; min-height: 48px; font-size: 12.5px; line-height: 1.15;
  box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s;
}
.fnbtn:hover { border-color: var(--green); background: #fbfefc; }
.fnbtn .fi { font-size: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); color: #fff; flex: 0 0 auto; }
.fnbtn .fk { color: var(--dim); font-weight: 700; }
.fnbtn.wide { grid-column: 1 / -1; }
.fi.blue { background: var(--blue); } .fi.green { background: var(--green); }
.fi.red { background: var(--red); } .fi.grey { background: #667085; } .fi.amber { background: var(--amber); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--win-border); background: #fff; }
.tabs .tab { padding: 9px 15px; cursor: pointer; border: none; border-bottom: 2px solid transparent; font-size: 13px; color: var(--dim); font-weight: 500; transition: color .15s; }
.tabs .tab:hover { color: var(--txt); }
.tabs .tab.on { background: transparent; color: var(--green-d); font-weight: 700; border-bottom: 2px solid var(--green); margin-bottom: -1px; }

/* ---- sale grid ---- */
.win-grid-head, .win-grid-row { display: grid; align-items: center; }
.win-grid-head { background: var(--grid-head); color: var(--dim); font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--win-border); }
.win-grid-head span, .win-grid-row > * { padding: 7px 8px; }
.win-grid-row { border-bottom: 1px solid var(--grid-line); }
.win-grid-row:nth-child(even) { background: #fafbfd; }
.win-grid-row.sel { background: var(--band3); }

/* ---- grand total bar ---- */
.grandtotal { background: var(--band1); color: #fff; border: none; border-radius: var(--r-lg); padding: 8px 16px; display: flex; align-items: baseline; gap: 12px; }
.grandtotal .lbl { font-size: 12px; letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.grandtotal .val { font-size: 32px; font-weight: 800; line-height: 1; margin-left: auto; font-variant-numeric: tabular-nums; }
.fxbox { background: var(--win-soft); color: var(--txt); border: 1px solid var(--win-border); border-radius: var(--r-sm); padding: 3px 9px; font-weight: 600; font-size: 12.5px; }

/* ---- status bar ---- */
.statusbar { flex: 0 0 auto; height: 26px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: #fff; border-top: 1px solid var(--win-border); font-size: 12px; color: var(--dim); }
.statusbar b { color: var(--txt); }

/* ---- tier chips ---- */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.chip.silver { background: #f2f4f7; color: #475467; border: 1px solid #d0d5dd; }
.chip.gold { background: #fef7e0; color: #93700a; border: 1px solid #f0d67c; }
.chip.platinum { background: #f0ebfd; color: #6941c6; border: 1px solid #d3c3f5; }
.chip.app { background: var(--band3); color: var(--green-d); border: 1px solid #a6e5bd; }

/* ---- toast + dialog ---- */
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--band1); color: #fff; padding: 11px 22px; border-radius: var(--r-md); font-weight: 600; opacity: 0; transition: .2s; pointer-events: none; z-index: 90; box-shadow: var(--shadow-lg); }
#toast::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 9px; }
#toast.err::before { background: var(--red); }
#toast.show { opacity: 1; }
/* margin:auto restores UA centering (the `* { margin:0 }` reset above kills it,
   pinning modals to the top-left) — keeps every dialog in the screen middle */
dialog { border: 1px solid var(--win-border); border-radius: 14px; padding: 0; box-shadow: var(--shadow-lg); margin: auto; }
dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dlg-title { background: #fff; color: var(--txt); font-weight: 700; font-size: 15px; padding: 13px 16px; border-bottom: 1px solid var(--win-border); border-radius: 14px 14px 0 0; }
.dlg-body { padding: 16px; }
pre.receipt { background: #fff; color: #111; padding: 14px; border: 1px solid var(--grid-line); border-radius: var(--r-sm); font: 12.5px/1.35 ui-monospace, "Consolas", monospace; max-height: 58vh; overflow: auto; white-space: pre; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}