/* VBS Cloud POS - brand tokens follow virtual.com.pk */
:root {
  --navy: #0E2A47; --navy-deep: #081c31; --azure: #1565D8; --azure-light: #4A8DF0; --amber: #FFB52E;
  --ink: #061426; --steel: #5A6B80; --steel-light: #A8B7CA; --line: #dbe3ee; --cloud: #F3F6FA; --card: #fff;
  --ok: #138a52; --ok-bg: #e5f6ee; --warn: #9a5b00; --warn-bg: #fff3dc; --bad: #b42318; --bad-bg: #fdecea;
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 10px; --shadow: 0 1px 2px rgba(6,20,38,.06), 0 8px 24px rgba(6,20,38,.06);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); color: var(--ink); background: var(--cloud); font-size: 15px; line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: var(--azure); }
p { margin: 0 0 1em; }
.muted { color: var(--steel); }
.small { font-size: .85rem; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 1px solid transparent; border-radius: 8px;
  padding: .65em 1.15em; font: 600 .95rem var(--font-body); cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, box-shadow .15s; }
.btn-primary { background: var(--azure); color: #fff; }
.btn-primary:hover { background: #0f55bb; }
.btn-amber { background: var(--amber); color: var(--navy-deep); }
.btn-amber:hover { background: #f5a50f; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--azure-light); }
.btn-danger { background: #fff; color: var(--bad); border-color: #f3c5c0; }
.btn-sm { padding: .4em .8em; font-size: .85rem; }
.btn-lg { padding: .85em 1.5em; font-size: 1.05rem; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--glow, rgba(74,141,240,.45)); outline-offset: 1px; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3em; color: var(--navy); }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: .65em .8em; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; color: var(--ink); }
.field { margin-bottom: 1rem; }
.field .hint { font-size: .8rem; color: var(--steel); margin-top: .25em; }
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.check { display: flex; align-items: center; gap: .5em; font-weight: 500; }
.alert { padding: .75em 1em; border-radius: 8px; margin-bottom: 1rem; font-size: .92rem; }
.alert-bad { background: var(--bad-bg); color: var(--bad); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.badge { display: inline-block; padding: .15em .6em; border-radius: 99px; font-size: .75rem; font-weight: 700; background: var(--cloud); color: var(--steel); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-azure { background: #e3eefc; color: var(--azure); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.stack > * + * { margin-top: 1rem; }
table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--steel); font-weight: 700; padding: .5em .6em; border-bottom: 1px solid var(--line); }
table.list th.num { text-align: right; }
table.list td { padding: .6em; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* public pages */
.pub-header { background: var(--navy-deep); }
.pub-header .inner { max-width: 1100px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pub-header img { height: 34px; display: block; }
.pub-header nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.pub-header .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.pub-main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 64px; }
.pub-footer { text-align: center; color: var(--steel); font-size: .85rem; padding: 24px 16px 40px; }
.hero { background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, #12407a); color: #fff; border-radius: 16px; padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,181,46,.35), transparent 70%); }
.hero h1 { color: #fff; max-width: 18ch; }
.hero p { color: #cfdcef; max-width: 52ch; font-size: 1.05rem; }
.hero .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; position: relative; z-index: 1; }
.hero .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.5rem; }
.narrow { max-width: 460px; margin: 0 auto; }
.mid { max-width: 760px; margin: 0 auto; }

/* sign-up */
.steps { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.steps span { font-size: .8rem; font-weight: 700; padding: .35em .8em; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--steel); }
.steps span.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.choice { display: block; text-align: left; width: 100%; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; cursor: pointer; font: inherit; color: inherit; }
.choice:hover { border-color: var(--azure-light); }
.choice.on { border-color: var(--azure); box-shadow: 0 0 0 3px rgba(21,101,216,.12); }
.choice[disabled] { opacity: .55; cursor: not-allowed; }
.feature { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.feature .price { font-weight: 700; color: var(--navy); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { border: 0; background: var(--cloud); width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; color: var(--navy); }
.qty span { min-width: 34px; text-align: center; font-weight: 700; }
.toggle { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.toggle button { border: 0; background: transparent; padding: .45em 1em; border-radius: 99px; font: 600 .9rem var(--font-body); cursor: pointer; color: var(--steel); }
.toggle button.on { background: var(--navy); color: #fff; }
.summary { position: sticky; top: 16px; }
.summary .total { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--navy); }
.signup-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 860px) { .signup-grid { grid-template-columns: 1fr; } .summary { position: static; } }

/* shop app shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--navy-deep); color: #c9d6e8; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.side .logo { padding: 4px 8px 18px; }
.side .logo img { height: 30px; }
.side a, .side .soon { display: flex; align-items: center; gap: .65em; padding: .6em .75em; border-radius: 8px; color: #c9d6e8; text-decoration: none; font-weight: 500; }
.side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.active { background: var(--azure); color: #fff; }
.side .soon { opacity: .45; cursor: default; }
.side .soon small { margin-left: auto; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
.side .grow { flex: 1; }
.side .who { border-top: 1px solid rgba(255,255,255,.1); padding: 12px 8px 0; font-size: .85rem; }
.side .who b { color: #fff; display: block; }
.side form button { background: none; border: 0; color: var(--amber); padding: 0; margin-top: 6px; cursor: pointer; font: inherit; }
.ico { width: 18px; height: 18px; flex: none; }
.main { padding: 24px clamp(16px, 3vw, 36px) 48px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.topbar h1 { font-size: 1.6rem; margin: 0; }
.ribbon { background: var(--amber); color: var(--navy-deep); padding: .6em 1em; border-radius: 8px; font-weight: 600; margin-bottom: 1rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ribbon.bad { background: var(--bad-bg); color: var(--bad); }
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi .label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--steel); }
.kpi .value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: .8rem; color: var(--steel); }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 160px; padding-top: 8px; }
.bars .bar { background: var(--azure-light); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bars .bar.today { background: var(--azure); }
.bars-x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font-size: .7rem; color: var(--steel); text-align: center; margin-top: 4px; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mobile-nav { display: none; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 16px 16px 88px; }
  .mobile-top { display: flex; align-items: center; justify-content: space-between; background: var(--navy-deep); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 5; }
  .mobile-top img { height: 26px; }
  .mobile-top form button { background: none; border: 0; color: var(--amber); font: inherit; }
  .mobile-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 5; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: .7rem; color: var(--steel); text-decoration: none; font-weight: 600; }
  .mobile-nav a.active { color: var(--azure); }
  .hide-phone { display: none; }
}
@media (min-width: 761px) { .mobile-top { display: none; } }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bad-bg); color: var(--bad); padding: .7em 1em; z-index: 99; }
#blazor-error-ui .reload { margin-left: 1em; }

/* billing screen */
.sell { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 1rem; align-items: start; }
.sell-search { display: flex; gap: .5rem; margin-bottom: .75rem; }
.sell-search input { font-size: 1.1rem; padding: .8em 1em; }
.sell-search select { width: auto; }
.sell-results { padding: .5rem; }
.result { display: flex; justify-content: space-between; width: 100%; padding: .7em .8em; border: 0; background: none; border-radius: 8px; font: inherit; cursor: pointer; text-align: left; color: inherit; }
.result:hover, .result:focus { background: var(--cloud); }
.cats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cats button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: .4em .9em; font: 600 .85rem var(--font-body); cursor: pointer; color: var(--navy); }
.cats button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tiles-pos { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .5rem; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; min-height: 84px; padding: .7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.tile:hover { border-color: var(--azure-light); box-shadow: var(--shadow); }
.tile b { color: var(--azure); }
.sell-right { position: sticky; top: 16px; }
.cart { max-height: 46vh; overflow-y: auto; margin: .75rem 0; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px auto; gap: .5rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.cart-line .qty input { width: 54px; border: 0; text-align: center; padding: .3em 0; font-weight: 700; }
.cart-line .qty input::-webkit-inner-spin-button { display: none; }
.cl-total { font-weight: 700; }
.cl-actions { display: flex; gap: .3rem; }
.cl-actions input { width: 52px; padding: .35em .4em; font-size: .85rem; }
.totals { border-top: 2px solid var(--navy); padding-top: .5rem; }
.totals > div { display: flex; justify-content: space-between; padding: .15rem 0; color: var(--steel); }
.totals .grand { color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; padding-top: .35rem; }
.sell-actions { display: flex; gap: .5rem; margin-top: .9rem; }
.sell-actions .btn { flex: 1; }
.pay { margin-top: .9rem; }
.quick { display: flex; gap: .4rem; flex-wrap: wrap; }
.change { margin-top: .75rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ok); }
.change.due { color: var(--bad); }
@media (max-width: 980px) { .sell { grid-template-columns: 1fr; } .sell-right { position: static; } .cart { max-height: none; } }
@media (max-width: 760px) { .tiles-pos { grid-template-columns: repeat(2, 1fr); } .cart-line { grid-template-columns: minmax(0,1fr) auto; } .cl-total { text-align: left; } }

/* ===== Desktop VBS Software frame (matches the WinForms app) ===== */
.vbs-app { min-height: 100vh; display: flex; flex-direction: column; background: #f4f7fb; }
.vbs-titlebar { background: #fff; color: #222; font-size: 12px; padding: 3px 8px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #d9dee6; }
.vbs-titlebar img { width: 14px; height: 14px; }
.vbs-tb-right { margin-left: auto; color: #555; }
.vbs-menubar { background: #0E2A47; display: flex; align-items: stretch; padding-left: 182px; font-size: 12px; position: relative; z-index: 20; }
.vbs-menubar details { position: relative; }
.vbs-menubar summary, .vbs-mb-link { list-style: none; color: #fff; padding: 5px 9px; cursor: pointer; display: block; text-decoration: none; }
.vbs-menubar summary::-webkit-details-marker { display: none; }
.vbs-menubar summary:hover, .vbs-menubar details[open] summary, .vbs-mb-link:hover { background: #1565D8; }
.vbs-menubar details > div { position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border: 1px solid #c9d3df; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 3px 0; }
.vbs-menubar details > div a, .vbs-menubar details > div button, .vbs-menubar details > div .soon { display: block; width: 100%; text-align: left; padding: 6px 14px; color: #1b2733; text-decoration: none; font: 13px var(--font-body); background: none; border: 0; cursor: pointer; }
.vbs-menubar details > div a:hover, .vbs-menubar details > div button:hover { background: #e3eefc; }
.vbs-menubar details > div .soon { color: #9aa6b4; cursor: default; }
.vbs-mb-out { margin-left: auto; }
.vbs-mb-out button { background: none; border: 0; color: #FFB52E; font: 12px var(--font-body); padding: 5px 12px; cursor: pointer; }
.vbs-body { flex: 1; display: grid; grid-template-columns: 182px minmax(0, 1fr); }
.vbs-quick { background: #0E2A47; padding: 22px 0; display: flex; flex-direction: column; gap: 2px; }
.vbs-quick-title { color: #c9d6e8; font-size: 11px; font-weight: 700; letter-spacing: .25em; padding: 0 22px 6px; margin-bottom: 14px; position: relative; }
.vbs-quick-title::after { content: ""; position: absolute; left: 22px; bottom: 0; width: 18px; height: 2px; background: #FFB52E; }
.vbs-quick a, .vbs-quick .soon { display: flex; align-items: center; gap: 12px; padding: 9px 22px; color: #e8eef6; text-decoration: none; font-size: 13px; }
.vbs-quick a:hover { background: rgba(255,255,255,.07); }
.vbs-quick a.active { background: rgba(21,101,216,.45); }
.vbs-quick .soon { color: #6f829a; cursor: default; }
.vbs-quick .ico { width: 15px; height: 15px; opacity: .8; }
.vbs-main { padding: 20px 28px 40px; min-width: 0; }

/* lobby (classic dashboard) */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; min-height: calc(100vh - 110px); }
.lobby-left { display: flex; flex-direction: column; }
.pos-big { display: inline-flex; align-items: center; justify-content: center; width: 190px; height: 72px; background: #1565D8; color: #fff; border-radius: 6px; font-size: 17px; text-decoration: none; box-shadow: 0 2px 6px rgba(21,101,216,.35); }
.pos-big:hover { background: #0f55bb; }
.lobby-logo { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.lobby-logo img { width: min(480px, 80%); opacity: .95; }
.lcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lcard { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(6,20,38,.12); border-left: 4px solid #1565D8; padding: 12px 14px; position: relative; min-height: 104px; }
.lcard .t { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #5A6B80; text-transform: uppercase; }
.lcard .v { font-size: 20px; font-weight: 700; color: #0E2A47; margin-top: 10px; font-variant-numeric: tabular-nums; }
.lcard .s { font-size: 11px; color: #5A6B80; margin-top: 8px; }
.lcard .i { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.lcard.c1 { border-color: #1565D8; } .lcard.c1 .i { background: #e3eefc; color: #1565D8; }
.lcard.c2 { border-color: #138a52; } .lcard.c2 .i { background: #e5f6ee; color: #138a52; }
.lcard.c3 { border-color: #FFB52E; } .lcard.c3 .i { background: #fff3dc; color: #b07000; }
.lcard.c4 { border-color: #d63b3b; } .lcard.c4 .i { background: #fdecea; color: #d63b3b; }
.lcard.c5 { border-color: #0E2A47; } .lcard.c5 .i { background: #e9edf2; color: #0E2A47; }
.lcard.c6 { border-left: 0; }
.mini-bars { display: flex; gap: 8px; align-items: flex-end; height: 50px; margin-top: 10px; }
.mini-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: 9px; color: #5A6B80; }
.mini-bars span { width: 70%; background: #1565D8; border-radius: 3px; min-height: 2px; display: block; }
.mini-bars div.today span { background: #FFB52E; }
.lpanel { margin-bottom: 16px; }
.lpanel-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: #1b2733; margin-bottom: 4px; }
.lpanel-h a { font-size: 13px; color: #1b2733; text-decoration: none; }
.grid-box { background: #fff; border: 1px solid #b9c4d2; min-height: 130px; font-size: 11px; }
.grid-box table { width: 100%; border-collapse: collapse; }
.grid-box th { text-align: left; font-weight: 700; padding: 5px 8px; border-bottom: 2px solid #1565D8; color: #1b2733; }
.grid-box td { padding: 4px 8px; border-bottom: 1px solid #edf0f4; }
.grid-box .empty { text-align: center; color: #9aa6b4; padding: 14px; }
@media (max-width: 1100px) { .lobby { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .vbs-titlebar, .vbs-quick { display: none; }
  .vbs-menubar { padding-left: 0; overflow-x: auto; }
  .vbs-body { grid-template-columns: 1fr; }
  .vbs-main { padding: 14px 14px 88px; }
  .lobby-logo { display: none; }
}

/* login - desktop style */
.login-screen { min-height: 100vh; background: #0f203a; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.login-box { width: min(523px, 100%); background: linear-gradient(90deg, #fff 0, #f2f6fb 100%); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.login-head { background: #0E2A47; display: flex; align-items: center; gap: 18px; padding: 22px 18px; position: relative; }
.login-head img { height: 40px; padding-right: 16px; border-right: 2px solid #FFB52E; }
.login-welcome div { color: #fff; font-size: 28px; font-weight: 500; line-height: 1; }
.login-welcome small { color: #fff; font-size: 14px; }
.login-x { position: absolute; right: 8px; top: 8px; color: #fff; text-decoration: none; font-size: 13px; }
.login-form { display: grid; grid-template-columns: 116px 1fr; gap: 14px 12px; align-items: center; padding: 16px 70px 26px 60px; }
.login-form label { font-weight: 500; font-size: 16px; color: #1b2733; margin: 0; }
.login-form input { border: 1px solid #7a7a7a; border-radius: 0; padding: 4px 6px; font-size: 15px; }
.login-last { display: flex; gap: 16px; }
.login-last input { flex: 1; min-width: 0; }
.login-last button { background: #1565D8; color: #fff; border: 0; border-radius: 6px; padding: 6px 30px; font: 15px var(--font-body); cursor: pointer; }
.login-err { grid-column: 1 / -1; background: var(--bad-bg); color: var(--bad); padding: 6px 10px; font-size: 13px; }
.login-links { color: #8fa3bd; font-size: 13px; margin-top: 18px; text-align: center; }
.login-links a { color: #FFB52E; }
@media (max-width: 520px) { .login-form { grid-template-columns: 1fr; padding: 16px 20px 24px; } .login-head img { height: 30px; } .login-welcome div { font-size: 22px; } }

/* ===== Desktop POS screen (copy of POS Rest Retail) ===== */
.dpos { position: fixed; inset: 0; display: grid; background: #0E2A47; color: #111; font-size: 13px;
  grid-template-columns: 152px 24px minmax(0,1fr) 296px; grid-template-rows: 56px auto minmax(0,1fr) 214px;
  grid-template-areas: "btns strip head head" "btns strip entry entry" "btns strip grid totals" "btns strip bottom pay"; padding-bottom: 22px; }
.dpos button { font-family: var(--font-body); cursor: pointer; }
.dpos-btns { grid-area: btns; display: flex; flex-direction: column; gap: 4px; padding: 8px 4px 0 6px; overflow-y: auto; }
.dpos-btn { display: flex; justify-content: space-between; align-items: center; background: #14365a; color: #fff; border: 1px solid #1d4470;
  border-radius: 5px; padding: 0 10px; min-height: 33px; font-size: 12.5px; text-align: left; }
.dpos-btn small { font-size: 9.5px; color: #a8b7ca; margin-left: 4px; white-space: nowrap; }
.dpos-btn:hover:not(:disabled) { background: #1565D8; }
.dpos-btn:disabled { color: #6f84a0; cursor: default; }
.dpos-btns .grow { flex: 1; min-height: 8px; }
.dpos-exit { background: #e04848; color: #fff; border: 0; border-radius: 5px; min-height: 42px; font-size: 14px; margin: 4px 0 6px; }
.dpos-exit:hover { background: #c73636; }
.dpos-strip { grid-area: strip; display: flex; flex-direction: column; background: #fff; margin-top: 56px; border-left: 1px solid #cfd7e2; }
.dpos-strip button { flex: 1; border: 0; border-bottom: 1px solid #e3e8ef; background: #fff; color: #0E2A47; font-size: 10.5px; line-height: 1.15;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -2px; padding: 4px 0; }
.dpos-strip button.on { background: #e8f0fc; color: #1565D8; font-weight: 700; }
.dpos-head { grid-area: head; display: flex; align-items: stretch; }
.dpos-name { flex: 1; text-align: center; color: #fff; font: 400 34px/56px "Great Vibes", cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpos-boxes { display: flex; gap: 3px; padding-top: 2px; }
.dpos-boxes > div { width: 118px; display: flex; flex-direction: column; border: 1px solid #fff; background: #fff; }
.dpos-boxes b { background: #0E2A47; color: #fff; font-weight: 500; text-align: center; font-size: 14px; padding: 2px 0; }
.dpos-boxes span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.dpos-boxes select { border: 0; padding: 0 4px; font-size: 14px; background: transparent; text-align: center; min-height: 0; width: auto; }
.dpos-entry { grid-area: entry; background: #fff; margin: 0 8px 4px 6px; }
.dpos-entry table, .dpos-grid table { width: 100%; border-collapse: collapse; }
.dpos-entry th { font-weight: 400; font-size: 11.5px; border: 1px solid #c7ced8; padding: 2px; background: #fff; }
.dpos-entry td { border: 1px solid #c7ced8; padding: 0; height: 24px; font-size: 12px; }
.dpos-entry td.r { text-align: left; padding: 0 3px; }
.dpos-entry input { width: 100%; border: 0; border-radius: 0; padding: 2px 4px; font-size: 13px; min-height: 0; background: transparent; box-shadow: none; }
.dpos-entry input:focus { outline: 2px solid #1565D8; outline-offset: -2px; }
.dpos-entry #qty { text-align: center; }
.dpos-name-cell { position: relative; }
.dpos-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #8aa3c2; box-shadow: 0 8px 20px rgba(0,0,0,.25); max-height: 320px; overflow-y: auto; }
.dpos-suggest button { display: flex; width: 100%; justify-content: space-between; border: 0; background: #fff; padding: 5px 8px; font-size: 13px; text-align: left; }
.dpos-suggest button span { color: #5A6B80; font-size: 12px; }
.dpos-suggest button.on, .dpos-suggest button:hover { background: #1565D8; color: #fff; }
.dpos-suggest button.on span, .dpos-suggest button:hover span { color: #dbe7fb; }
.dpos-grid { grid-area: grid; background: #fff; margin: 0 0 0 6px; overflow: auto; border: 1px solid #aab5c3; }
.dpos-grid th { position: sticky; top: 0; background: #fff; font-weight: 400; font-size: 12.5px; text-align: left; padding: 3px 5px; border-bottom: 1px solid #c7ced8; line-height: 1.2; }
.dpos-grid td { padding: 2px 5px; font-size: 14px; border-right: 1px solid #e2e6ec; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.dpos-grid td.nm { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.dpos-grid td.rn { width: 30px; text-align: right; font-size: 12px; color: #333; background: #fff; }
.dpos-grid tr { cursor: pointer; }
.dpos-grid tr.sel td { background: #bcd2ee; }
.dpos-grid tr.sel td.rn { background: #1565D8; color: #fff; }
.dpos-held { padding: 10px; }
.dpos-held h3 { font-size: 15px; }
.dpos-held button { display: flex; justify-content: space-between; width: 100%; max-width: 520px; border: 1px solid #c7ced8; background: #f6f8fb; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-size: 14px; }
.dpos-held button:hover { border-color: #1565D8; background: #e8f0fc; }
.dpos-totals { grid-area: totals; background: #fff; margin: 0 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.dpos-total { display: flex; flex-direction: column; margin: 2px; }
.dpos-total b { background: #0E2A47; color: #fff; font-weight: 400; font-size: 22px; text-align: center; padding: 1px 0; }
.dpos-total span { text-align: center; font-size: 26px; padding: 4px 0; border: 1px solid #e3e8ef; font-variant-numeric: tabular-nums; }
.dpos-msg { margin: 0 4px; padding: 6px 8px; font-size: 13px; border-radius: 4px; }
.dpos-msg.ok { background: #e5f6ee; color: #138a52; }
.dpos-msg.bad { background: #fdecea; color: #b42318; }
.dpos-pair { display: flex; gap: 3px; margin: 0 2px; }
.dpos-pair > div { flex: 1; display: flex; flex-direction: column; }
.dpos-pair b, .dpos-field b { background: #1565D8; color: #fff; font-weight: 400; text-align: center; font-size: 14px; padding: 1px 0; }
.dpos-pair span { text-align: center; padding: 3px 0; font-size: 15px; border: 1px solid #e3e8ef; background: #fff; }
.dpos-totals .dpos-pair b { background: #0E2A47; font-size: 16px; }
.dpos-totals .dpos-pair span { font-size: 22px; }
.dpos-bottom { grid-area: bottom; background: #fff; margin: 4px 0 0 6px; display: flex; flex-direction: column; overflow: hidden; }
.dpos-filter { display: flex; align-items: center; gap: 8px; padding: 6px 6px 4px; }
.dpos-filter label { margin: 0; font-weight: 400; font-size: 14px; color: #222; }
.dpos-filter input, .dpos-filter select { width: 196px; min-height: 0; padding: 2px 4px; border-radius: 0; font-size: 12px; border: 1px solid #a9b3c1; }
.dpos-filter .grow { flex: 1; }
.dpos-refresh { background: #FFB52E; border: 0; border-radius: 4px; padding: 3px 9px; font-size: 13px; }
.dpos-tiles { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 5px; padding: 0 6px 6px; align-content: start; }
.dpos-tiles button { background: #dde2ea; border: 1px solid #c3cad5; border-radius: 6px; min-height: 50px; padding: 4px 6px; font-size: 12.5px; color: #222; line-height: 1.25; }
.dpos-tiles button:hover { background: #c9d6ea; border-color: #1565D8; }
.dpos-keys { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 8px; }
.dpos-keys button { background: #dde2ea; border: 1px solid #c3cad5; border-radius: 6px; font-size: 20px; }
.dpos-keys button.wide { grid-column: span 6; background: #1565D8; color: #fff; font-size: 16px; }
.dpos-pay { grid-area: pay; background: #fff; margin: 4px 8px 0 4px; border-top: 3px solid #1565D8; display: flex; flex-direction: column; gap: 4px; padding: 3px 2px 4px; }
.dpos-field { display: flex; flex-direction: column; margin: 0 2px; }
.dpos-field select, .dpos-field input { border-radius: 0; min-height: 0; padding: 3px 4px; font-size: 14px; border: 1px solid #e3e8ef; width: 100%; }
.dpos-field .dpos-bal { background: #fff; border: 1px solid #e3e8ef; padding: 3px 4px; font-size: 14px; text-align: center; font-weight: 600; }
.dpos-save { display: flex; gap: 4px; margin-top: auto; }
.dpos-save button { flex: 1; background: #1565D8; color: #fff; border: 0; border-radius: 5px; min-height: 46px; font-size: 17px; }
.dpos-save button:hover:not(:disabled) { background: #0f55bb; }
.dpos-save button:disabled { opacity: .6; }
.dpos-modal { position: fixed; inset: 0; z-index: 100; background: rgba(6,20,38,.45); display: flex; align-items: center; justify-content: center; }
.dpos-dialog { width: min(380px, 92vw); background: #fff; border: 1px solid #0E2A47; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.dpos-dialog-h { background: #0E2A47; color: #fff; padding: 6px 10px; font-size: 14px; }
.dpos-dialog-b { padding: 14px; }
.dpos-dialog-b input { width: 100%; font-size: 18px; padding: 6px 8px; }
.dpos-dialog-a { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.dpos-dialog-a button { background: #1565D8; color: #fff; border: 0; border-radius: 4px; padding: 6px 18px; font-size: 14px; cursor: pointer; }
.dpos-dialog-a button.ghost { background: #e6eaf0; color: #222; }
@media (max-height: 760px) { .dpos-btn { min-height: 27px; font-size: 11.5px; } .dpos { grid-template-rows: 50px auto minmax(0,1fr) 190px; } }

/* ===== Phone POS (simplified) ===== */
.mpos { max-width: 640px; margin: 0 auto; padding: 0 12px 90px; }
.mpos-head { position: sticky; top: 0; z-index: 5; background: #0E2A47; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin: 0 -12px 10px; }
.mpos-head a { color: #fff; text-decoration: none; }
.mpos-head b { font: 400 24px "Great Vibes", cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpos-head span { font-size: 13px; color: #a8b7ca; }
.mpos-search input { width: 100%; font-size: 16px; }
/* lobby: logo stacked like the desktop, cards across the full width */
.lobby { grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: 1fr auto; min-height: calc(100vh - 100px); }
.lobby .lcards { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0,1fr)) minmax(0,1.6fr); }
.lobby-logo { flex-direction: column; gap: 0; }
.lobby-logo img { width: 190px; margin-bottom: 18px; }
.lobby-logo b { font: 600 clamp(40px, 6vw, 84px)/1 var(--font-display); letter-spacing: .06em; color: #0E2A47; }
.lobby-logo span { font: 500 clamp(14px, 2vw, 30px)/1 var(--font-display); letter-spacing: .32em; color: #8a97a8; margin-top: 14px; padding-left: .32em; }
.lobby-logo i { width: 92px; height: 4px; background: #FFB52E; border-radius: 2px; margin-top: 26px; }
.lcard { min-height: 110px; }
.lcard.c6 .mini-bars span { width: 26px; }
@media (max-width: 1100px) { .lobby .lcards { grid-template-columns: repeat(2, minmax(0,1fr)); } .lobby { grid-template-rows: auto; } }
.lobby { min-height: calc(100vh - 170px); }
.lobby-logo img { width: 150px; }
.lobby-logo b { font-size: clamp(36px, 5vw, 70px); }
.mini-bars div { justify-content: flex-end; }
.mini-bars span { max-height: 34px; }

/* ===== End Of Day window (copy of the desktop form) ===== */
.eod-win { max-width: 730px; margin: 10px auto 0; background: #dfe7f1; border: 1px solid #8aa3c2; box-shadow: 0 10px 30px rgba(6,20,38,.22); font-size: 14px; }
.eod-title { display: flex; align-items: center; gap: 6px; background: #fff; padding: 4px 8px; font-size: 12.5px; border-bottom: 1px solid #c9d3df; }
.eod-title img { width: 14px; }
.eod-x { margin-left: auto; background: #e04848; color: #fff; text-decoration: none; padding: 0 10px; border-radius: 3px; font-size: 12px; }
.eod-msg { margin: 6px 8px 0; padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.eod-msg.ok { background: #e5f6ee; color: #138a52; } .eod-msg.bad { background: #fdecea; color: #b42318; }
.eod-body { display: grid; grid-template-columns: 190px minmax(0,1fr) 214px; gap: 6px; padding: 6px; }
.eod-body section { background: #fff; border: 1px solid #c9d3df; }
.eod-h { text-align: center; padding: 5px 0; position: relative; }
.eod-reset { position: absolute; right: 6px; top: 3px; border: 0; background: none; font-size: 16px; cursor: pointer; }
.eod-calc table { width: 100%; border-collapse: collapse; }
.eod-calc th { font-weight: 400; text-align: center; width: 52px; padding: 1px 0; }
.eod-calc td { padding: 1px 2px 1px 0; }
.eod-calc input { width: 100%; min-height: 0; padding: 1px 3px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; }
.eod-calc td.amt { background: #1565D8; color: #fff; padding: 1px 4px; font-size: 13px; min-width: 66px; border-bottom: 1px solid #fff; }
.eod-two { display: flex; gap: 4px; padding: 8px 4px; }
.eod-two button, .eod-calcbtn button { flex: 1; background: #fff; border: 1px solid #c9d3df; border-radius: 4px; padding: 4px 0; cursor: pointer; font-size: 13.5px; }
.eod-two button:hover { border-color: #1565D8; }
.eod-big { font-size: 25px; text-align: center; padding: 4px 0 6px; border-bottom: 3px solid #1565D8; }
.eod-counter { display: flex; gap: 6px; padding: 10px 8px 6px; align-items: stretch; }
.eod-counter span { flex: 1; border: 1px solid #c9d3df; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.eod-counter select { flex: 1; font-size: 18px; min-height: 0; padding: 2px 6px; border-radius: 4px; }
.eod-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 8px 10px; }
.eod-btns button { background: #1565D8; color: #fff; border: 0; border-radius: 6px; min-height: 40px; font-size: 14.5px; cursor: pointer; }
.eod-btns button:hover:not(:disabled) { background: #0f55bb; }
.eod-btns button:disabled { background: #8fb2e6; cursor: not-allowed; }
.eod-btns .wide { grid-column: span 2; }
.eod-fig { padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.eod-fig label { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0; font-weight: 400; font-size: 13.5px; color: #111; }
.eod-fig input { width: 84px; min-height: 0; padding: 1px 3px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; }
.eod-fig input.hl { background: #1565D8; color: #fff; border-color: #1565D8; }
.eod-calcbtn { display: flex; justify-content: flex-end; margin-top: auto; }
.eod-calcbtn button { flex: 0 0 auto; padding: 4px 12px; background: #1565D8; color: #fff; border: 0; }
.eod-foot { display: flex; gap: 6px; padding: 0 6px 8px; align-items: end; background: #fff; margin: 0 6px 6px; border: 1px solid #c9d3df; padding-top: 6px; }
.eod-foot > div { flex: 1; display: flex; flex-direction: column; text-align: center; }
.eod-foot b { font-weight: 400; font-size: 13.5px; }
.eod-foot span { background: #1565D8; color: #fff; padding: 2px 0; font-size: 13px; }
.eod-foot .gap { flex: .2; }
.eod-foot .tot { flex: 1.3; }
@media (max-width: 760px) {
  .eod-body { grid-template-columns: 1fr; }
  .eod-foot { flex-wrap: wrap; } .eod-foot > div { flex: 1 1 30%; } .eod-foot .gap { display: none; }
}

/* ===== Desktop form window (shared by Products, Categories, Customers, Suppliers...) ===== */
.dwin { margin: 0 auto; background: #eef2f7; border: 1px solid #8aa3c2; box-shadow: 0 10px 30px rgba(6,20,38,.2); font-size: 13.5px; color: #111; }
.dwin-title { display: flex; align-items: center; gap: 6px; background: #fff; padding: 4px 8px; font-size: 12.5px; border-bottom: 1px solid #c9d3df; }
.dwin-title img { width: 14px; }
.dwin-x { margin-left: auto; background: #e04848; color: #fff; text-decoration: none; padding: 0 10px; border-radius: 3px; font-size: 12px; }
.dwin-body { padding: 8px 10px 10px; }
.dmsg { margin: 0 0 8px; padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.dmsg.ok { background: #e5f6ee; color: #138a52; } .dmsg.bad { background: #fdecea; color: #b42318; }
.dh { font: 500 20px var(--font-body); color: #0E2A47; margin: 0 0 10px; }
.dl { display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 400; font-size: 13.5px; color: #1b2733; }
.dl input, .dl select, .dc input, .dc select { min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; background: #fff; width: 100%; }
.dl input:disabled, .dl select:disabled, .dc input:disabled, .dc select:disabled, .plink select:disabled { background: #f6f8fb; color: #333; }
.dl input[readonly] { background: #f1f4f8; }
.dc { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 6px; font-weight: 400; font-size: 13px; }
.dchk { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; margin: 4px 0; }
.dchk input { width: auto; }
.dhint { font-size: 12px; color: #5A6B80; margin: 8px 0 0; }
.dbtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dbtns.col { flex-direction: column; }
.dbtn { background: #1565D8; color: #fff; border: 0; border-radius: 6px; padding: 8px 18px; font-size: 14px; cursor: pointer; }
.dbtn:hover:not(:disabled) { background: #0f55bb; }
.dbtn.alt { background: #0E2A47; } .dbtn.ghost { background: #fff; color: #0E2A47; border: 1px solid #c9d3df; }
.dbtn.amber { background: #FFB52E; color: #0E2A47; } .dbtn.amber:hover:not(:disabled) { background: #f0a21a; }
.dbtn:disabled { opacity: .5; cursor: not-allowed; }
.dref { background: #FFB52E; border: 0; border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.dsearch { width: 100%; min-height: 0; padding: 4px 6px; border-radius: 0; font-size: 13px; margin-bottom: 6px; }
.dgrid { background: #fff; border: 1px solid #aab5c3; overflow: auto; max-height: 360px; }
.dgrid.tall { max-height: 420px; }
.dgrid table { width: 100%; border-collapse: collapse; }
.dgrid th { position: sticky; top: 0; background: #fff; text-align: left; font-weight: 600; font-size: 12.5px; padding: 4px 6px; border-bottom: 2px solid #1565D8; white-space: nowrap; }
.dgrid td { padding: 3px 6px; font-size: 13px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.dgrid th.r, .dgrid td.r { text-align: right; }
.dgrid tr { cursor: default; }
.dgrid tbody tr:hover td, .dgrid tr:hover td { background: #f3f7fd; }
.dgrid tr.sel td { background: #bcd2ee; }
.dgrid tr.off td { color: #8a97a8; }
.dgrid td.empty { text-align: center; color: #8a97a8; padding: 18px; }
.lowstk { color: #b42318; font-weight: 600; }
.mst { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 12px; }
.mst-form { background: #fff; border: 1px solid #c9d3df; padding: 12px; }
.mst .dl { grid-template-columns: 140px minmax(0,1fr); }
.pty-cols { display: grid; grid-template-columns: 1fr 1fr 230px; gap: 14px; background: #fff; border: 1px solid #c9d3df; padding: 12px; }
.pty-side .dl { grid-template-columns: 1fr; gap: 2px; }
.pty-search, .prod-search { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 14px; }
.pty-search input, .prod-search input, .prod-search select { min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; width: 240px; }
.prod-search select { width: 170px; }
.prod-search .grow { flex: 1; }
.prod-search .stockbox { width: 120px; background: #fff; }
.ptabs { display: flex; gap: 2px; margin-bottom: 6px; }
.ptabs span { font-size: 12px; padding: 2px 10px; border: 1px solid #c9d3df; border-bottom: 0; background: #e3e9f1; }
.ptabs span.on { background: #fff; }
.prod { display: grid; grid-template-columns: minmax(0,1fr) 170px 170px; gap: 10px; background: #fff; border: 1px solid #c9d3df; padding: 10px; }
.prod .dl { grid-template-columns: 105px minmax(0,1fr); }
.pr2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.prod-links { margin: 6px 0; }
.plink { display: grid; grid-template-columns: 97px 22px 120px minmax(0,1fr); align-items: center; gap: 6px; margin-bottom: 5px; }
.plink .pl { font-size: 13.5px; }
.plink select { min-height: 0; padding: 2px 4px; border-radius: 0; font-size: 12.5px; border: 1px solid #a9b3c1; }
.padd { width: 20px; height: 20px; border-radius: 50%; border: 0; background: #FFB52E; color: #0E2A47; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.padd:disabled { opacity: .45; cursor: default; }
.pr2.nums { margin-top: 8px; }
.prod-mid { display: flex; flex-direction: column; }
.prod-btns { display: flex; flex-direction: column; gap: 8px; }
.pb { background: #1565D8; color: #fff; border: 0; border-radius: 8px; min-height: 44px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pb:hover:not(:disabled) { background: #0f55bb; }
.pb.red { background: #e04848; } .pb.red:hover:not(:disabled) { background: #c73636; }
.pb.amber { background: #FFB52E; color: #0E2A47; }
.pb:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1000px) {
  .prod { grid-template-columns: 1fr 1fr; } .prod-main { grid-column: 1 / -1; } .prod-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .pty-cols { grid-template-columns: 1fr 1fr; } .pty-side { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mst, .pty-cols, .pr2, .prod { grid-template-columns: 1fr; }
  .plink { grid-template-columns: 90px 22px 70px minmax(0,1fr); }
  .dl, .prod .dl { grid-template-columns: 110px minmax(0,1fr); }
  .pty-search, .prod-search { flex-wrap: wrap; } .pty-search input, .prod-search input, .prod-search select { width: 100%; }
  .dwin-body { padding: 6px; }
}
.pty-search > *, .prod-search > * { white-space: nowrap; flex-shrink: 0; }
.prod-search .dchk input { width: auto; }
.prod-search .grow { flex: 1 1 auto; }
.dgrid table.list th { text-transform: none; letter-spacing: 0; color: #111; font-size: 12.5px; font-weight: 600; }
.dgrid table.list td { padding: 3px 6px; }
.phone-only { display: none; }
@media (max-width: 760px) {
  .phone-only { display: block; margin-bottom: 8px; }
  .prod-win:not(.editing) .prod { display: none; }
  .prod-win .dgrid td:nth-child(2), .prod-win .dgrid th:nth-child(2), .prod-win .dgrid td:nth-child(7), .prod-win .dgrid th:nth-child(7) { display: none; }
  .vbs-menubar { flex-wrap: wrap; padding-left: 0; } .vbs-menubar summary, .vbs-mb-link { white-space: nowrap; padding: 6px 8px; }
}

/* ===== Purchase Journal / Return Journal (copy of desktop AddPur) ===== */
.pj { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 8px; }
.pj-left { display: flex; flex-direction: column; gap: 6px; }
.pj-top { display: flex; align-items: center; gap: 12px; }
.pj-addsup { background: #fff; border: 1px solid #c9d3df; border-radius: 6px; padding: 6px 12px; text-align: center; color: #0E2A47; text-decoration: none; font-size: 14px; line-height: 1.2; }
.pj-addsup:hover { border-color: #1565D8; }
.pj-title { flex: 1; text-align: center; font-size: 30px; color: #0E2A47; position: relative; padding-bottom: 6px; }
.pj-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70px; height: 3px; background: #FFB52E; transform: translateX(-50%); }
.pj-head, .pj-entry, .pj-tot3, .pj-grand, .pj-lump { background: #fff; border: 1px solid #c9d3df; padding: 8px; }
.pj-head, .pj-entry { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 12px; }
.pj .dl { grid-template-columns: 104px minmax(0,1fr); font-size: 12.5px; margin-bottom: 5px; }
.pj .dl span input[type=checkbox] { width: auto; margin: 0 3px 0 0; vertical-align: -2px; }
.pj .span2 { grid-column: span 2; }
.pj-head .span2 { grid-template-columns: 104px minmax(0,1fr); }
.pj-head input.owe { color: #b42318; font-weight: 600; }
.pj-name { position: relative; }
.pj-name .dpos-suggest { left: 112px; }
.pj-ebtns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.dbtn.red { background: #e04848; } .dbtn.red:hover:not(:disabled) { background: #c73636; }
.dbtn.sm { padding: 3px 14px; font-size: 13px; border-radius: 12px; }
.pj-tot3, .pj-grand { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 12px; }
.pj-tot3 .dl, .pj-grand .dl { margin: 0; }
.pj input.big { font-size: 18px; font-weight: 600; text-align: center; }
.pj-lines { min-height: 170px; max-height: 260px; }
.pj-lump { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.pj-lump input { width: 120px; min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; }
.pj-right { background: #fff; border: 1px solid #c9d3df; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pj-rbtns { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding-bottom: 8px; border-bottom: 3px solid #1565D8; }
.pjb { background: #1565D8; color: #fff; border: 0; border-radius: 6px; min-height: 50px; font-size: 14px; line-height: 1.2; cursor: pointer; }
.pjb:hover:not(:disabled) { background: #0f55bb; }
.pjb.w { background: #fff; color: #0E2A47; border: 1px solid #c9d3df; }
.pjb:disabled { opacity: .5; cursor: not-allowed; }
.pj-held-h { text-align: center; font-size: 30px; color: #8a97a8; padding: 8px 0; }
.pj-rhint { margin: -6px 0 4px; text-align: center; }
.pj-held { flex: 1; min-height: 300px; max-height: none; }
.pj-hbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pj-hbtns .dbtn { padding: 6px 14px; font-size: 13px; }
@media (max-width: 1100px) { .pj { grid-template-columns: minmax(0,1fr); } .pj-held { min-height: 160px; } }
.pj-left, .pj-right, .dwin-body, .dgrid { min-width: 0; }
@media (max-width: 760px) {
  .pj-head, .pj-entry, .pj-tot3, .pj-grand { grid-template-columns: 1fr; } .pj .span2 { grid-column: auto; }
  .pj-rbtns { grid-template-columns: repeat(3, 1fr); } .pj-title { font-size: 22px; } .pj-held-h { font-size: 20px; }
  .pj-name .dpos-suggest { left: 0; }
}
.grid-box { overflow-x: auto; }
.lobby > * { min-width: 0; }
@media (max-width: 1100px) { .lobby { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 760px) { .eod-calc td.amt { min-width: 0; } .eod-foot > div { min-width: 0; } }
.lcard.c6 .mini-bars span { width: 70%; max-width: 26px; } .lcard { min-width: 0; } .mini-bars { gap: 4px; }

/* ===== Barcode labels window (desktop Report Filter) ===== */
.bc { background: #fff; border: 1px solid #c9d3df; padding: 10px 14px; }
.bc-h { text-align: center; font-size: 15px; margin: 4px 0 12px; }
.bc-l { font-size: 12.5px; margin-bottom: 2px; }
.bc-row { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 6px; }
.bc input, .bc select { min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; width: 100%; }
.bc-name { position: relative; }
.bc-row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.bc-row3 label { margin: 0; font-weight: 400; font-size: 12.5px; color: #111; }
.bc-copies { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13px; }
.bc-copies input { width: 100px; }
.bc-copies .dbtn { padding: 4px 18px; font-size: 13px; }
.bc-grid { min-height: 150px; }
.bc-print { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.bc-print > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bc-ph { grid-column: span 2; text-align: center; font-size: 12.5px; border-bottom: 2px dashed #0E2A47; padding-bottom: 2px; margin-bottom: 2px; }
.bc-print button { background: #fff; border: 1px solid #c9d3df; border-radius: 4px; padding: 4px 0; font-size: 13.5px; cursor: pointer; }
.bc-print button:hover { border-color: #1565D8; color: #1565D8; }
.bc-print .wide { grid-column: span 2; justify-self: center; width: 60%; }
.bc-note { margin-top: 12px; border: 1px solid #c9d3df; padding: 6px 10px; text-align: center; font-size: 12.5px; }
@media (max-width: 760px) { .bc-row, .bc-row3, .bc-print { grid-template-columns: 1fr; } }

/* ---- Accounts windows (desktop cashin / cashout / bankin / bankout / Journal / chartaccounts / accrptmenud) ---- */
.dbtn.amber { background: #FFB52E; color: #0E2A47; } .dbtn.amber:hover:not(:disabled) { background: #f0a21a; } .dbtn.amber:hover:not(:disabled) { background: #f0a518; }
.vch { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 12px; }
.atree { background: #f3f6fa; border: 1px solid #c9d3df; display: flex; flex-direction: column; min-height: 420px; max-height: 640px; }
.atree-find { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; padding: 5px 6px; font-size: 13px; border-bottom: 1px solid #c9d3df; }
.atree-find input { min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; }
.atree-box { overflow: auto; padding: 4px 2px 8px; flex: 1; }
.atree-n { padding-left: 14px; }
.atree-n.top { padding-left: 0; }
.atree-n > .atree-t, .atree-k { border: 0; background: none; padding: 1px 3px; font-size: 13.5px; cursor: pointer; color: #111; text-align: left; }
.atree-n.top > .atree-t { font-weight: 600; color: #0E2A47; font-size: 14px; }
.atree-k { display: inline-block; width: 16px; color: #5A6B80; padding: 0; }
.atree-t.sel { background: #1565D8; color: #fff; }
.atree-t.hit { background: #ffeb3b; }
.atree-t.off { color: #8a97a8; }
.vch-main { min-width: 0; }
.vch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vch-big { background: #1565D8; color: #fff; border: 0; border-radius: 4px; width: 84px; height: 56px; font-size: 13.5px; line-height: 1.15; cursor: pointer; }
.vch-big:hover:not(:disabled) { background: #0f55bb; } .vch-big:disabled { opacity: .5; }
.vch-title { font: 400 34px var(--font-body); color: #0E2A47; margin: 0 0 0 auto; padding-right: 30%; }
.vch-title.center { margin: 0 0 12px; padding: 0; text-align: center; font-size: 30px; }
.vch-form, .cha-form, .dlv-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 18px; }
.vch-form .dl.wide, .cha-form .dl.wide, .dlv-form .dl.wide { grid-column: 1 / -1; }
.vch-form textarea { width: 100%; border-radius: 0; border: 1px solid #a9b3c1; font: inherit; font-size: 13px; padding: 4px 6px; resize: vertical; }
.vname-in { position: relative; }
.vname-in input { width: 100%; }
.vch-att { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; }
.vch-att .dbtn { padding: 3px 10px; font-size: 13px; }
.vch-btns { display: flex; gap: 8px; margin: 6px 0 8px; }
.vch-btns .gap { flex: 1; }
.vch-btns .dbtn { padding: 5px 0; width: 144px; font-size: 13.5px; border-radius: 4px; }
.vgrid { min-height: 180px; }
.vch-sums { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 8px; }
.vch-sums label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px; align-items: center; font-size: 13.5px; }
.vch-sums input { min-height: 0; padding: 3px 6px; border-radius: 0; border: 1px solid #a9b3c1; text-align: right; background: #f1f4f8; }
.vch-sums input.bad { color: #b42318; font-weight: 600; }
.cha-form { align-items: center; }
.cha-form .dbtn { justify-self: start; padding: 5px 22px; }
.cha-sub { display: flex; gap: 6px; align-items: center; font-size: 13.5px; margin: 0 0 6px; }
.cagrid { max-height: 300px; }
.bnk-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; align-items: center; margin-bottom: 8px; }
.dex-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.dex-top .dl { margin: 0; }
.dex-amt { width: 150px; text-align: right; min-height: 0; padding: 3px 6px; border-radius: 0; border: 1px solid #a9b3c1; }
.dex-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 13.5px; flex-wrap: wrap; }
.dex-foot label { display: flex; gap: 8px; align-items: center; }
.dex-foot input { width: 160px; text-align: right; min-height: 0; padding: 3px 6px; border-radius: 0; border: 1px solid #a9b3c1; background: #f1f4f8; font-weight: 600; }
.gate { padding: 10px 6px; } .gate p { margin: 0 0 12px; }
@media (max-width: 760px) {
  .vch, .vch-form, .cha-form, .dlv-form, .bnk-form, .dex-top, .vch-sums { grid-template-columns: minmax(0,1fr); }
  .atree { min-height: 0; max-height: 220px; }
  .vch-title { padding: 0; font-size: 24px; }
  .vch-btns .dbtn { width: auto; flex: 1; }
}
.atree-t.sel.hit { background: #1565D8; color: #fff; }
@media (max-width: 760px) { .vch-win .atree { display: none; } }

/* ===== Reports: the desktop's modern report viewer (ModernReportForm), Business Reports and Financial Statements ===== */
.rview, .fsw { background: #e9eef4; margin: -20px -28px -40px; min-height: calc(100vh - 52px); display: flex; flex-direction: column; }
.ribbon + :is(.rview, .fsw, .brw) { margin-top: -16px; }
.rv-bar, .fs-bar { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 14px; border-bottom: 2px solid #0E2A47; flex-wrap: wrap; font-size: 13px; }
.rv-name { font: 600 15px var(--font-body); color: #0E2A47; margin: 0 26px 0 0; min-width: 180px; }
.rvb { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 5px 16px; border: 0; border-radius: 2px; font: 600 13px var(--font-body); cursor: pointer; text-decoration: none; color: #fff; }
.rvb.red { background: #e04848; } .rvb.red:hover:not(:disabled) { background: #c73636; }
.rvb.green { background: #1f9d55; } .rvb.green:hover:not(:disabled) { background: #188146; }
.rvb.blue, .rvb.azure { background: #1565D8; } .rvb.blue:hover:not(:disabled), .rvb.azure:hover:not(:disabled) { background: #0f55bb; }
.rvb.navy { background: #0E2A47; border-radius: 4px; } .rvb.navy:hover:not(:disabled) { background: #1b3d63; }
.rvb.ghost { background: #e3eaf3; color: #0E2A47; border: 1px solid #c3cfdd; }
.rvb.ghost:hover { background: #d3deeb; }
.rvb:disabled { opacity: .5; cursor: not-allowed; }
.rv-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; background: #f7f9fc; border-bottom: 1px solid #cfd8e3; padding: 8px 14px; font-size: 13px; }
.rv-filter label, .fs-bar label, .br-bar label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: 13px; color: #1b2733; }
.rv-filter input, .rv-filter select, .fs-bar input, .fs-bar select, .br-bar input, .br-bar select { min-height: 0; padding: 3px 6px; border-radius: 0; font-size: 13px; border: 1px solid #a9b3c1; background: #fff; width: auto; }
.rv-filter input[type=number] { width: 90px; }
.rv-filter #rvitem { width: 190px; }
.rv-ftitle { font-weight: 700; color: #0E2A47; align-self: center; }
.rv-asof { align-self: center; color: #5A6B80; }
.rv-busy { margin: 14px; color: #5A6B80; font-size: 13px; }
.rv-status { margin-top: auto; background: #f4f6f9; border-top: 1px solid #d5dde7; padding: 4px 14px; font-size: 12px; color: #333; min-height: 24px; }
.fs-chk input { width: auto !important; }
.fs-bar .gap { flex: 1; }
.fs-line { display: none; }
.rv-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(6,20,38,.45); display: flex; justify-content: center; align-items: flex-start; padding: 30px 16px; overflow-y: auto; }
.rv-sheet { position: relative; width: min(1100px, 100%); }
.rv-sheet .rpaper { margin: 0; }
.rv-x { position: absolute; right: 10px; top: 8px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #e04848; color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }

/* the report page */
.rpaper { background: #fff; margin: 14px; padding: 22px 22px 14px; border-radius: 4px; box-shadow: 0 1px 4px rgba(6,20,38,.12); color: #1b2733; }
.fsw .rpaper { width: min(880px, calc(100% - 28px)); margin: 16px auto; padding: 40px 44px 18px; }
.fsw .rpaper.land { width: min(1100px, calc(100% - 28px)); }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 8px; border-bottom: 3px solid #FFB52E; margin-bottom: 14px; }
.rp-co { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #5A6B80; }
.rp-title { font: 700 22px var(--font-body); color: #0E2A47; margin: 2px 0; }
.rp-period { font-size: 12.5px; color: #333; }
.rp-meta { text-align: right; font-size: 10.5px; color: #8a97a8; line-height: 1.5; }
.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 225px)); gap: 10px; margin-bottom: 16px; }
.rp-card { border: 1px solid #d5dde7; border-top: 3px solid #1565D8; border-radius: 4px; padding: 10px 11px; background: #f8fafd; }
.rp-card span { display: block; font-size: 10px; letter-spacing: .04em; color: #5A6B80; }
.rp-card b { display: block; font-size: 16px; color: #0E2A47; margin-top: 3px; font-variant-numeric: tabular-nums; }
.rp-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 11px; color: #5A6B80; }
.rp-search { width: 270px !important; max-width: 100%; min-height: 0; padding: 5px 9px 5px 28px !important; border: 1px solid #d5dde7 !important; border-radius: 3px !important; font-size: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b2733' stroke-width='2.5'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") 9px center no-repeat; }
.rp-scroll { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rp-table th { background: #0E2A47; color: #fff; font-weight: 600; text-align: left; padding: 7px 8px; white-space: nowrap; }
.rp-table th:first-child { border-radius: 3px 0 0 0; } .rp-table th:last-child { border-radius: 0 3px 0 0; }
.rp-table th.r, .rp-table td.r { text-align: right; }
.rp-table th.sort { cursor: pointer; user-select: none; } .rp-table th.sort:hover { background: #1b3d63; }
.rp-table td { padding: 4px 8px; border-bottom: 1px solid #e6ebf1; }
.rp-table td.r { white-space: nowrap; }
.rp-table tr.ln:nth-child(even) td { background: #fbfcfe; }
.rp-table tr.ln:hover td { background: #fff8e8; }
.rp-table tr.dr { cursor: pointer; }
.rp-table tr.dr:hover td:first-child { color: #1565D8; text-decoration: underline; }
.rp-table tr.sec td { font-weight: 700; color: #0E2A47; text-transform: uppercase; background: #f3f6fa; padding-top: 7px; font-size: 11px; letter-spacing: .02em; }
.rp-table.stmt tr.ln td:first-child { padding-left: 20px; }
.rp-table tr.sub td { font-weight: 700; background: #f8fafd; }
.rp-table tr.tot td { font-weight: 700; border-top: 1px solid #1b2733; }
.rp-table tr.grand td { font-weight: 700; font-size: 12px; border-top: 2px solid #0E2A47; border-bottom: 3px double #0E2A47; background: #fffdf5; }
.rp-table tr.sp td { border: 0; height: 10px; padding: 0; }
.rp-table tr.note td { color: #5A6B80; font-style: italic; text-align: center; padding: 14px; }
.rp-table .z { color: #a6b0bd; }
.rp-checks { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.rp-ck { padding: 6px 10px; border-radius: 3px; font-size: 12px; }
.rp-ck.ok { background: #e5f6ee; color: #138a52; } .rp-ck.bad { background: #fff3dc; color: #9a5b00; }
.rp-notes { margin-top: 12px; font-size: 11.5px; color: #5A6B80; } .rp-notes p { margin: 0 0 4px; }
.rp-foot { display: flex; justify-content: space-between; margin-top: 18px; font-size: 10px; color: #9aa6b4; }

/* Business Reports window */
.brw { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 10px; background: #fff; margin: -20px -28px -40px; min-height: calc(100vh - 52px); padding: 10px 10px 0; font-size: 13px; color: #1b2733; }
.br-left { display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e3e8ef; }
.br-title { font: 700 17px var(--font-body); color: #0E2A47; padding: 2px 4px 10px; }
.br-group { background: #0E2A47; color: #fff; font-weight: 700; padding: 3px 8px; margin-top: 2px; }
.br-item { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 3px 8px 3px 17px; font: 13px var(--font-body); color: #1b2733; cursor: pointer; }
.br-item:hover { background: #e3eefc; }
.br-item.on { background: #1565D8; color: #fff; }
.br-count { margin-top: auto; padding: 10px 2px 8px; font-size: 12px; }
.br-main { display: flex; flex-direction: column; min-width: 0; }
.br-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 4px 0 8px; }
.br-find input { width: 170px; }
.brb { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; padding: 6px 16px; font: 13px var(--font-body); cursor: pointer; text-decoration: none; }
.brb.navy { background: #0E2A47; color: #fff; } .brb.navy:hover { background: #1b3d63; }
.brb.light { background: #e3eaf3; color: #1b2733; } .brb.light:hover:not(:disabled) { background: #d3deeb; }
.brb.red { background: #e04848; color: #fff; } .brb.red:hover { background: #c73636; }
.brb:disabled { opacity: .55; cursor: not-allowed; }
.br-h { font: 600 17px var(--font-body); color: #0E2A47; margin: 2px 0 0 6px; }
.br-note { font-size: 12px; color: #333; margin: 0 0 4px 6px; }
.br-grid { flex: 1; overflow: auto; background: #fff; border: 1px solid #edf0f4; min-height: 300px; max-height: calc(100vh - 240px); }
.br-grid table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.br-grid th { position: sticky; top: 0; background: #fff; text-align: left; font-weight: 600; font-size: 11.5px; padding: 2px 4px; border-bottom: 2px solid #0E2A47; white-space: nowrap; }
.br-grid td { padding: 3px 4px; border-bottom: 1px solid #edf0f4; white-space: nowrap; }
.br-grid th.r, .br-grid td.r { text-align: right; }
.br-grid tbody tr:hover td { background: #e3eefc; }
.br-grid td.empty { text-align: center; color: #9aa6b4; padding: 20px; }
.br-total { padding: 8px 2px; font-weight: 600; font-size: 12.5px; }

/* the Reports menu (menu bar flyouts) and the Reports page */
.vbs-menubar .mb-reports > div { min-width: 240px; }
.mb-sub { position: relative; }
.mb-sub-t { display: block; padding: 6px 28px 6px 14px; color: #1b2733; font-size: 13px; cursor: default; position: relative; white-space: nowrap; }
.mb-sub-t::after { content: "▸"; position: absolute; right: 10px; color: #5A6B80; }
.mb-sub:hover > .mb-sub-t, .mb-sub:focus-within > .mb-sub-t { background: #e3eefc; }
.mb-fly { display: none; position: absolute; left: 100%; top: -4px; min-width: 240px; max-height: calc(100vh - 90px); overflow-y: auto; background: #fff; border: 1px solid #c9d3df; box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 3px 0; z-index: 2; }
.mb-sub:hover > .mb-fly, .mb-sub:focus-within > .mb-fly { display: block; }
.mb-fly .mb-fly { max-height: none; overflow: visible; }
.vbs-menubar details > div .soon small, .mb-fly .soon small { font-size: 10px; color: #b0b9c5; margin-left: 6px; }
.rx { columns: 3 300px; column-gap: 18px; }
.rx-group { break-inside: avoid; margin-bottom: 16px; }
.rx-group h2 { font: 700 14px var(--font-body); background: #0E2A47; color: #fff; padding: 4px 8px; margin: 0 0 4px; }
.rx-group > a, .rx-group > .soon { display: block; font-weight: 700; background: #0E2A47; color: #fff; padding: 4px 8px; text-decoration: none; }
.rx-list { display: flex; flex-direction: column; }
.rx-list a, .rx-list .soon { padding: 3px 8px 3px 14px; color: #1b2733; text-decoration: none; font-size: 13px; }
.rx-list a:hover { background: #e3eefc; }
.rx-list .soon { color: #9aa6b4; }
.rx-list .soon small { font-size: 10.5px; margin-left: 6px; }
.rx-sub { margin: 4px 0 2px 8px; border-left: 2px solid #dbe3ee; }
.rx-sub h3 { font: 600 13px var(--font-body); color: #0E2A47; margin: 4px 0 2px 8px; }

@media (max-width: 760px) {
  .rview, .fsw, .brw { margin: -14px -14px -88px; min-height: calc(100vh - 40px); padding-bottom: 72px; }
  .rv-name { min-width: 0; flex: 1 1 100%; margin: 0; }
  .rv-filter label, .fs-bar label { flex: 1 1 45%; }
  .rv-filter input, .rv-filter select, .fs-bar input, .fs-bar select { flex: 1; min-width: 0; }
  .rpaper, .fsw .rpaper { margin: 10px 8px; padding: 14px 12px 10px; width: auto; }
  .rp-head { flex-direction: column; align-items: flex-start; }
  .rp-meta { text-align: left; }
  .rp-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rp-search { width: 100% !important; }
  .rp-table { min-width: 560px; }
  .brw { grid-template-columns: minmax(0,1fr); padding: 8px; }
  .br-left { border-right: 0; max-height: 210px; overflow-y: auto; border-bottom: 1px solid #e3e8ef; }
  .br-title { padding-bottom: 4px; }
  .br-count { display: none; }
  .br-grid { max-height: none; }
  .rx { columns: 1; }
  .mb-fly { position: static; box-shadow: none; border: 0; padding-left: 10px; }
}

@media print {
  @page { margin: 12mm; }
  body, .vbs-app, .rview, .fsw, .brw { background: #fff !important; }
  .vbs-titlebar, .vbs-menubar, .vbs-quick, .mobile-nav, .ribbon, .rv-bar, .rv-filter, .rv-status, .rv-busy, .br-left, .br-bar, .fs-bar, #blazor-error-ui { display: none !important; }
  .vbs-body { display: block; } .vbs-main { padding: 0; }
  .rview, .fsw, .brw { margin: 0; min-height: 0; display: block; padding: 0; }
  .rpaper, .fsw .rpaper { box-shadow: none; margin: 0; padding: 0; width: auto; }
  .rp-tools { display: none; }
  .rp-scroll, .br-grid { overflow: visible; max-height: none; border: 0; }
  .rp-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-table tr { break-inside: avoid; }
  .rv-overlay { position: static; background: none; padding: 0; }
  .vbs-main:has(.rv-overlay) > :not(.rv-overlay) { display: none !important; }
  .rv-x { display: none; }
}

/* ===== Dashboard: the newspaper page (wwwroot/magazine.html) fills the main area ===== */
.mag-frame { display: block; width: calc(100% + 56px); height: calc(100vh - 52px); margin: -20px -28px -40px; border: 0; background: #FBF8F1; }
.ribbon + .mag-frame { margin-top: -16px; height: calc(100vh - 120px); }
@media (max-width: 760px) {
  .mag-frame { width: calc(100% + 28px); margin: -14px -14px -88px; height: calc(100vh - 110px); }
  .ribbon + .mag-frame { height: calc(100vh - 200px); }
}
@media print { .mag-frame { height: auto; min-height: 100vh; margin: 0; width: 100%; } }

/* ---- Owner tools (desktop VbsTools ToolUi): a heading with one line under it, a bar of buttons, the list, a status line ---- */
.tool { max-width: 1320px; margin: 0 auto; background: #fff; border: 1px solid #c9d3df; box-shadow: 0 10px 30px rgba(6,20,38,.12); display: flex; flex-direction: column; min-height: calc(100vh - 150px); font-size: 13.5px; }
.tool-head { padding: 10px 16px 6px; display: flex; gap: 12px; align-items: flex-start; }
.tool-head > div { flex: 1; min-width: 0; }
.tool-head h1 { font: 600 20px var(--font-body); color: #0E2A47; margin: 0; }
.tool-head p { margin: 2px 0 0; color: #6b7280; font-size: 13px; }
.tool-head .dwin-x { margin-left: 0; }
.tool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 16px 8px; border-bottom: 1px solid #e6eaf0; }
.tool-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #0E2A47; margin: 0; font-weight: 400; }
.tool-bar input:not([type=checkbox]):not([type=radio]), .tool-bar select { min-height: 0; padding: 4px 6px; font-size: 13px; border: 1px solid #c9d3df; border-radius: 0; width: auto; background: #fff; }
.tool-bar .gap { flex: 1; }
.tbtn { background: #fff; color: #0E2A47; border: 1px solid #c9d3df; padding: 5px 12px; font: 400 13px var(--font-body); cursor: pointer; min-height: 32px; text-decoration: none; display: inline-flex; align-items: center; }
.tbtn.primary { background: #1565D8; border-color: #1565D8; color: #fff; }
.tbtn:hover:not(:disabled) { background: #EAF2FD; } .tbtn.primary:hover:not(:disabled) { background: #0f55bb; }
.tbtn:disabled { opacity: .5; cursor: not-allowed; }
.tool-body { flex: 1; display: flex; min-height: 0; }
.tool-main { flex: 1; min-width: 0; overflow: auto; max-height: calc(100vh - 290px); }
.tool-side { width: 360px; border-left: 1px solid #e6eaf0; overflow: auto; padding: 0 8px; max-height: calc(100vh - 290px); }
.tool-side h3, .tool-main h3 { font: 600 14px var(--font-body); color: #0E2A47; margin: 8px 0 4px; }
.tgrid { width: 100%; border-collapse: collapse; font-size: 13px; }
.tgrid th { position: sticky; top: 0; z-index: 1; background: #f6f8fb; text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #dfe5ee; white-space: nowrap; }
.tgrid td { padding: 5px 8px; border-bottom: 1px solid #edf0f4; vertical-align: top; }
.tgrid td.r, .tgrid th.r { text-align: right; white-space: nowrap; }
.tgrid td.c, .tgrid th.c { text-align: center; }
.tgrid tr.amber td { background: #FFF4DC; }
.tgrid tr.fail td { background: #fdecea; }
.tgrid tr.pick { cursor: pointer; } .tgrid tr.pick:hover td { background: #EAF2FD; } .tgrid tr.sel td { background: #bcd2ee; }
.tgrid td.empty { text-align: center; color: #8a97a8; padding: 22px; }
.tgrid input:not([type=checkbox]) { min-height: 0; padding: 2px 6px; font-size: 13px; border: 1px solid #c9d3df; border-radius: 0; width: 100%; }
.tgrid input.qty { width: 80px; text-align: right; font-weight: 700; background: #FFF4DC; }
.tool-status { border-top: 1px solid #e6eaf0; padding: 6px 14px; font-size: 12.5px; color: #6b7280; }
.tool-fix { background: #FFF4DC; color: #0E2A47; padding: 8px 10px; font-size: 13px; margin: 0 0 6px; }
.tool-title { font: 600 16px var(--font-body); color: #0E2A47; padding: 8px 8px 6px; }
.tool-sec { padding: 8px 16px; border-bottom: 1px solid #e6eaf0; }
.tool-sec h2 { font: 600 15px var(--font-body); color: #0E2A47; margin: 0 0 6px; }
.tool-msg { margin: 8px 16px 0; padding: 6px 10px; font-size: 13px; } .tool-msg.ok { background: #e5f6ee; color: #138a52; } .tool-msg.bad { background: #fdecea; color: #b42318; }
.hc-list { width: 340px; border-right: 1px solid #e6eaf0; overflow: auto; max-height: calc(100vh - 290px); }
.hc-area { font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: #5A6B80; padding: 10px 12px 4px; }
.hc-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; background: none; border: 0; text-align: left; padding: 6px 12px; font: 400 13.5px var(--font-body); cursor: pointer; color: #1b2733; }
.hc-item:hover { background: #EAF2FD; } .hc-item.sel { background: #bcd2ee; }
.hc-item .n { font-weight: 600; white-space: nowrap; color: #8a97a8; } .hc-item .n.ok { color: #1f9d55; } .hc-item .n.bad { color: #e04848; } .hc-item .n.info { color: #966400; }
.tool-dlg { position: fixed; inset: 0; background: rgba(6,20,38,.35); display: grid; place-items: center; z-index: 50; padding: 16px; }
.tool-dlg > div { background: #fff; width: min(520px, 100%); padding: 14px 16px; box-shadow: 0 20px 50px rgba(6,20,38,.3); font-size: 13.5px; }
.tool-dlg h2 { font: 600 16px var(--font-body); color: #0E2A47; margin: 0 0 10px; }
.tool-dlg label { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-weight: 400; }
.tool-dlg .kinds { border: 1px solid #c9d3df; padding: 6px 8px; margin: 4px 0 10px; max-height: 220px; overflow: auto; }
.tool-dlg p { color: #6b7280; font-size: 12.5px; }
.tool-dlg .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tool-dlg input[type=number] { width: 80px; min-height: 0; padding: 3px 6px; border-radius: 0; border: 1px solid #c9d3df; }
.tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 16px; background: #f3f6fa; flex: 1; align-content: start; }
.tool-tile { display: block; background: #fff; border-left: 4px solid #1565D8; padding: 14px; min-height: 130px; text-decoration: none; color: #46505f; font-size: 13.5px; }
.tool-tile:hover { background: #EAF2FD; }
.tool-tile b { display: block; font: 600 16px var(--font-body); color: #0E2A47; margin-bottom: 6px; }
.tool-tile.off { border-left-color: #c9d3df; color: #8a97a8; } .tool-tile.off b { color: #8a97a8; }
.so-print { display: none; }
.wn-entry { padding: 8px 0 10px; border-bottom: 1px solid #edf0f4; }
.wn-entry h3 { margin: 0 0 2px; font: 600 15px var(--font-body); color: #0E2A47; }
.wn-entry .meta { font-size: 12px; color: #5A6B80; margin-bottom: 4px; }
.wn-entry p { margin: 0; color: #1b2733; }
.wn-ver { font: 700 17px var(--font-body); color: #1565D8; margin: 16px 0 2px; }
.wn-area { font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: #5A6B80; margin: 10px 0 0; }
@media (max-width: 760px) {
  .tool { min-height: 0; border: 0; box-shadow: none; margin: -14px -14px 0; }
  .tool-body { flex-direction: column; }
  .tool-side, .hc-list { width: auto; border: 0; max-height: none; }
  .tool-main { max-height: none; }
  .tool-bar, .tool-head, .tool-sec { padding-left: 10px; padding-right: 10px; }
  .tgrid .hide-phone { display: none; }
}
@media print {
  .tool { box-shadow: none; border: 0; min-height: 0; }
  .tool-bar, .tool-status, .tool-head .dwin-x, .tool-side { display: none !important; }
  .tool-main, .tool-side, .hc-list { max-height: none; overflow: visible; }
  .so-print { display: block; } .so-print ~ * , .tool.printing > :not(.so-print) { display: none !important; }
}
.so-page { page-break-after: always; font-family: "Segoe UI", Arial, sans-serif; color: #111; background: #fff; }
.so-page:last-child { page-break-after: auto; }
.so-shop { font-weight: 700; font-size: 13px; }
.so-h { font: 700 20px "Segoe UI", Arial, sans-serif; color: #0E2A47; margin: 2px 0; }
.so-note { font-size: 11px; color: #5A6B80; margin-bottom: 8px; }
.so-sup { font-weight: 700; font-size: 14px; color: #1565D8; margin: 6px 0 4px; }
.so-t { width: 100%; border-collapse: collapse; font-size: 11px; }
.so-t th { text-align: left; border-bottom: 1.5px solid #0E2A47; padding: 3px 4px; } .so-t td { padding: 3px 4px; border-bottom: 1px solid #ddd; }
.so-t .r { text-align: right; } .so-foot td { border-top: 1px solid #0E2A47; border-bottom: 0; }

/* ---- Inventory Audit and Re-Evaluate Inventory (desktop InventoryAuditForm): figure tiles, three tabs, the count line ---- */
.ia-tiles { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 8px; }
.ia-tile { background: #f5f7fa; width: 150px; padding: 6px 10px 8px; }
.ia-tile span { display: block; font-size: 11.5px; color: #64707f; }
.ia-tile b { display: block; font: 700 18px var(--font-body); color: #1e1e1e; margin-top: 2px; white-space: nowrap; }
.ia-tile b.neg, .tgrid td.neg { color: #b91c1c; } .ia-tile b.pos, .tgrid td.pos { color: #16803d; } .ia-tile b.warn { color: #b45309; }
.ia-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid #c9d3df; }
.ia-tabs button { border: 1px solid #c9d3df; border-bottom: 0; background: #e3e9f1; padding: 6px 14px; font: 400 13.5px var(--font-body); color: #0E2A47; cursor: pointer; margin-bottom: -1px; }
.ia-tabs button.on { background: #fff; font-weight: 600; }
.ia-entry #iaScan, .ia-entry #iaQty { font-size: 15px !important; padding: 6px 8px !important; }
.ia-entry .dpos-suggest { min-width: 320px; }
.ia-info { padding: 0 16px 6px; color: #3c3c3c; font-size: 13px; white-space: pre-wrap; min-height: 18px; }
.ia-edit { cursor: pointer; border-bottom: 1px dashed #8aa3c2; }
.ia-foot { border-top: 1px solid #e6eaf0; border-bottom: 0; }
.tbtn.ia-post:not(:disabled) { background: #16803d; border-color: #16803d; color: #fff; font-weight: 700; }
@media (max-width: 760px) {
  .ia-tiles { padding: 4px 10px 8px; gap: 6px; }
  .ia-tile { width: calc(50% - 3px); box-sizing: border-box; }
  .ia-tabs { padding: 0 10px; overflow-x: auto; }
  .ia-tabs button { padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
  .ia-entry .ia-scan { flex-wrap: wrap; }
  .ia-entry #iaScan { width: 100% !important; }
  .ia-entry .dpos-suggest { min-width: 0; }
  .ia-info { padding: 0 10px 6px; }
}

/* ---- Reset Inventory (desktop resetinv): the form and list on the left, Controls on the right, Audit Summary underneath ---- */
.ri { display: grid; grid-template-columns: minmax(0, 1fr) 260px; max-width: 980px; background: #fff; border: 1px solid #c9d3df; box-shadow: 0 10px 30px rgba(6,20,38,.12); font-size: 13.5px; position: relative; }
.ri-left { padding: 10px 12px 8px; min-width: 0; }
.ri-top { display: flex; align-items: flex-start; }
.ri-top .dwin-x { margin-left: auto; }
.ri-h { flex: 1; text-align: center; font: 400 34px var(--font-body); color: #0E2A47; margin: 6px 0 22px; }
.ri-h::after { content: ""; display: block; width: 76px; height: 3px; background: #F0A21B; margin: 4px auto 0; transform: translateX(-12px); }
.ri-audit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #f5f7fa; padding: 6px 8px; margin-bottom: 8px; }
.ri-audit label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; }
.ri-audit input, .ri-audit select { min-height: 0; padding: 3px 6px; font-size: 13px; border: 1px solid #c9d3df; border-radius: 0; width: auto; }
.ri-form { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.ri-form label { margin: 0; font-weight: 400; color: #1b2733; }
.ri-form input, .ri-form select { min-height: 0; padding: 3px 6px; font-size: 13.5px; border: 1px solid #a9b6c6; border-radius: 0; width: 100%; background: #fff; }
.ri-form input[readonly], .ri-form select:disabled { background: #f4f4f4; color: #333; }
.ri-form input:disabled { background: #f4f4f4; }
.ri-form #riCode:focus { background: #fff; outline: 2px solid #1565D8; }
.ri-pick { position: relative; min-width: 0; }
.ri-wide { grid-column: span 3; }
.ri-btns { grid-column: span 2; display: flex; gap: 8px; }
.ri-b { flex: 1; background: #1565D8; color: #fff; border: 0; border-radius: 6px; padding: 4px 8px; font: 400 12.5px var(--font-body); cursor: pointer; }
.ri-b:disabled { opacity: .5; cursor: not-allowed; }
.ri-list { border: 1px solid #a9b6c6; margin-top: 10px; height: 230px; overflow: auto; }
.ri-list .tgrid th { background: #fff; border-bottom: 2px solid #1565D8; }
.ri-list tr.ri-short td { color: #b91c1c; } .ri-list tr.ri-excess td { color: #16803d; } .ri-list tr.sel td { color: #0E2A47; }
.ri-added { text-align: center; font-weight: 600; font-size: 12px; min-height: 18px; margin: 6px 0 4px; color: #1b2733; }
.ri-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ri-row label { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 0 auto; font-weight: 400; font-size: 14.5px; }
.ri-del { background: #e04848; color: #fff; border: 0; border-radius: 7px; width: 128px; padding: 4px 0; font: 400 12.5px var(--font-body); cursor: pointer; }
.ri-del:disabled { opacity: .5; cursor: not-allowed; }
.ri-row .ri-c { width: auto; margin: 0; padding: 5px 14px; }
.ri-right { border-top: 3px solid #1565D8; border-left: 1px solid #e6eaf0; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ri-h2 { text-align: center; font: 400 34px var(--font-body); color: #0E2A47; margin: 6px 0 14px; }
.ri-c { display: block; width: 100%; background: #fff; border: 1px solid #d8dee6; border-radius: 6px; padding: 14px 8px; font: 400 13.5px var(--font-body); color: #3b4656; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ri-c:hover:not(:disabled) { background: #EAF2FD; } .ri-c.on { border-color: #1565D8; color: #1565D8; }
.ri-c:disabled { opacity: .55; cursor: not-allowed; }
.ri-c.ri-post { background: #1565D8; border-color: #1565D8; color: #fff; padding: 16px 8px; }
.ri-c.ri-post:hover:not(:disabled) { background: #0f55bb; }
.ri-gap { margin-top: 14px; }
.ri-link { font-size: 12.5px; color: #1565D8; text-align: center; }
.ri-sum { grid-column: 1 / -1; border-top: 3px solid #1565D8; padding: 6px 12px 10px; }
.ri-sum h3 { font: 600 14px var(--font-body); color: #0E2A47; margin: 0 0 6px; }
.ri-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 12px; }
.ri-tile span { display: block; font-size: 11.5px; color: #3b4656; }
.ri-tile b { display: block; font: 600 15px var(--font-body); color: #1b2733; margin: 2px 0 0 4px; white-space: nowrap; }
.ri-tile b.neg { color: #b91c1c; } .ri-tile b.pos { color: #16803d; } .ri-tile b.warn { color: #c2620c; }
.ri-msg { grid-column: 1 / -1; margin: 0 12px 10px; padding: 6px 10px; font-size: 13px; cursor: pointer; } .ri-msg.ok { background: #e5f6ee; color: #138a52; } .ri-msg.bad { background: #fdecea; color: #b42318; }
.tool-dlg > .ri-dlg { width: min(1100px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.ri-dlg-grid { overflow: auto; flex: 1; min-height: 120px; border: 1px solid #e6eaf0; }
@media (max-width: 760px) {
  .ri { grid-template-columns: 1fr; border: 0; box-shadow: none; margin: -14px -14px 0; }
  .ri-h, .ri-h2 { font-size: 26px; margin-bottom: 12px; }
  .ri-form { grid-template-columns: 84px minmax(0, 1fr); }
  .ri-wide { grid-column: span 1; } .ri-btns { grid-column: 1 / -1; }
  .ri-form label[for=riFind] { grid-column: 1; }
  .ri-list { height: 260px; }
  .ri-right { border-left: 0; }
  .ri-right .ri-h2 { display: none; }
  .ri-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ri-row label { margin-left: 0; }
}

/* classic dashboard (desktop Lobby "Dashboard Overview" + DashboardExtras) */
.cdash { background: #f3f4f6; margin: -8px; padding: 0 20px 20px; min-height: 100%; }
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; padding: 14px 20px; margin: 0 -20px 20px; border-bottom: 1px solid var(--line); }
.cd-top h2 { margin: 0; font: 700 1.45rem var(--font-body); color: #1f2937; }
.cd-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-ctl input[type=date] { padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; font-size: 14px; }
.cd-pill { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 18px; border: 0; border-radius: 15px; color: #fff; font: 600 14px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.cd-pill.blue { background: #3b82f6; } .cd-pill.teal { background: #14b8a6; } .cd-pill.red { background: #ef4444; }
.cd-pill:disabled { opacity: .6; cursor: default; }
.cd-loading { padding: 40px; text-align: center; color: #64748b; }
.cd-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.cd-card { position: relative; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c); padding: 12px 15px; min-height: 88px; }
.cd-card.go { cursor: pointer; } .cd-card.go:hover { box-shadow: 0 2px 10px rgba(14, 42, 71, .1); }
.cd-card .t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #64748b; }
.cd-card .v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cd-card .v b { font-size: 22px; color: #0e2a47; font-variant-numeric: tabular-nums; }
.cd-card .v b.amber { color: #d68c14; } .cd-card .v b.neg { color: #b42318; }
.cd-card .v em { font-style: normal; font-size: 12px; font-weight: 700; }
.cd-card .v em.up { color: #138a52; } .cd-card .v em.down { color: #b42318; } .cd-card .v em.same { color: #78879b; }
.cd-row { display: grid; gap: 16px; margin-bottom: 16px; }
.cd-row.two { grid-template-columns: 1fr 1fr; } .cd-row.three { grid-template-columns: repeat(3, 1fr); }
.cd-box { background: #fff; border: 1px solid var(--line); padding: 15px; min-width: 0; scroll-margin-top: 70px; transition: box-shadow .2s; }
.cd-box h3, .dch h3 { font: 700 16px var(--font-body); color: #1f2937; margin: 0 0 8px; }
.cd-flash { box-shadow: 0 0 0 3px #ffb52e; }
.cd-grid { max-height: 260px; overflow: auto; }
.cd-grid table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cd-grid th { position: sticky; top: 0; background: #f8fafc; color: #64748b; font-size: 12.5px; text-align: left; padding: 8px; }
.cd-grid td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.cd-grid tr:hover td { background: #f1f5f9; }
.cd-grid .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cd-grid .c { text-align: center; white-space: nowrap; }
.cd-grid .blue { color: #3b82f6; } .cd-grid .red { color: #ef4444; } .cd-grid .b { font-weight: 700; }
.cd-grid .empty { color: #94a3b8; text-align: center; padding: 18px; }
.cd-search { width: 100%; padding: 6px 8px; margin-bottom: 8px; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; }
.cd-foot { margin: 4px 2px 0; }
.dch { min-width: 0; }
.dch-legend { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #64748b; margin-bottom: 4px; }
.dch-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.dch-bottom { margin-top: 6px; }
.dch-svg, .dch-pie { display: block; width: 100%; height: auto; }
.dch-pie { max-height: 240px; }
.dch-svg .grid { stroke: #f0f0f0; } .dch-svg .axis { stroke: #cbd5e1; }
.dch-svg .ax { font-size: 10px; fill: #64748b; font-family: var(--font-body); }
.dch-svg rect:hover, .dch-svg circle:hover, .dch-pie path:hover { opacity: .8; }
.dch-empty { padding: 60px 10px; text-align: center; color: #94a3b8; font-size: 14px; }
@media (max-width: 1100px) { .cd-cards { grid-template-columns: repeat(2, 1fr); } .cd-row.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .cdash { margin: -8px -8px; padding: 0 10px 14px; }
  .cd-top { margin: 0 -10px 12px; padding: 10px; }
  .cd-top h2 { font-size: 1.15rem; }
  .cd-ctl input[type=date] { width: 132px; }
  .cd-pill { height: 28px; padding: 0 12px; font-size: 13px; }
  .cd-cards { gap: 8px; }
  .cd-card { padding: 9px 10px; min-height: 0; }
  .cd-card .t { font-size: 10px; } .cd-card .v { margin-top: 4px; gap: 6px; } .cd-card .v b { font-size: 17px; }
  .cd-row.two, .cd-row.three { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
}

/* ===== Restaurant POS (desktop POS Rest): the tables screen, then the order of a table ===== */
.dpos.rpos-t { grid-template-areas: "btns strip head head" "btns strip tbl tbl" "btns strip tbl tbl" "btns strip tbl tbl"; }
.dpos-strip button:disabled { color: #9aa6b5; cursor: default; }
.rpos-tables { grid-area: tbl; background: #fff; margin: 0 8px 0 6px; display: flex; flex-direction: column; min-height: 0; }
.rt-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #dfe5ec; flex-wrap: wrap; }
.rt-bar .grow { flex: 1; }
.rt-bar .dpos-msg { margin: 0; }
.rt-sel { font-size: 15px; color: #0E2A47; width: 138px; }
.rt-legend { display: flex; flex-wrap: wrap; }
.rt-legend span, .rm-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-right: 10px; }
.rt-legend i, .rm-legend i { width: 14px; height: 14px; border: 1px solid #9aa6b5; display: inline-block; }
.rt-time { display: flex; flex-direction: column; border: 1px solid #0E2A47; min-width: 70px; text-align: center; }
.rt-time b { background: #0E2A47; color: #fff; font-weight: 400; font-size: 12px; }
.rt-time span { font-size: 16px; }
.rt-btn { background: #1565D8; color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; font-size: 13px; text-decoration: none; cursor: pointer; }
.rt-btn:hover { background: #0f55bb; color: #fff; }
.rt-btn.amber { background: #FFB52E; color: #0E2A47; }
.rt-body { flex: 1; display: flex; min-height: 0; }
.rt-halls { width: 150px; flex: 0 0 150px; border-right: 1px solid #dfe5ec; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px; }
.rt-halls button { display: flex; justify-content: space-between; gap: 4px; border: 1px solid #c3cad5; background: #f3f6fa; padding: 9px 8px; font-size: 13.5px; text-align: left; border-radius: 4px; color: #0E2A47; }
.rt-halls button.on { background: #1565D8; color: #fff; border-color: #1565D8; }
.rt-halls small { font-weight: 700; }
.rt-main { flex: 1; overflow: auto; padding: 8px; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: start; }
.rt-table { min-height: 124px; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px; font-size: 12px; color: #111; line-height: 1.25; text-align: center; }
.rt-table b { font-size: 15px; }
.rt-table em { font-style: normal; font-weight: 700; margin-top: 2px; }
.rt-table:hover { outline: 3px solid #1565D8; outline-offset: -1px; }
.rt-table.late, .rm-table.late { animation: rtblink 1s steps(2, start) infinite; }
@keyframes rtblink { 50% { filter: brightness(1.2) saturate(.25); box-shadow: 0 0 0 3px #e04848 inset; } }
.rt-add, .rm-add { background: #fff !important; border: 2px dashed #9aa6b5; color: #0E2A47; font-size: 14px; }
.rt-held { height: 190px; flex: 0 0 190px; border-top: 3px solid #1565D8; display: flex; flex-direction: column; }
.rt-held-h { display: flex; align-items: center; padding: 4px 8px; font-size: 13px; }
.rt-held-h .grow { flex: 1; }
.rt-held-list { flex: 1; overflow: auto; }
.rt-held table, .rt-riders, .rt-retrieve table { width: 100%; border-collapse: collapse; }
.rt-held th, .rt-riders th, .rt-retrieve th { text-align: left; font-weight: 400; font-size: 12px; border-bottom: 1px solid #c7ced8; padding: 3px 6px; position: sticky; top: 0; background: #fff; }
.rt-held td, .rt-riders td, .rt-retrieve td { padding: 3px 6px; font-size: 13px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.rt-held td.nm, .rt-retrieve td.nm { white-space: normal; max-width: 420px; }
.rt-held tbody tr, .rt-retrieve tbody tr { cursor: pointer; }
.rt-held tbody tr:hover td, .rt-retrieve tbody tr:hover td { background: #e8f0fc; }
.rt-riders { margin-bottom: 10px; border: 1px solid #dfe5ec; }
.rt-del { border: 1px solid #c3cad5; border-radius: 6px; background: #f6f8fb; display: flex; flex-direction: column; }
.rt-del-open { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: transparent; padding: 8px; text-align: left; font-size: 12.5px; flex: 1; }
.rt-del-open b { font-size: 14px; }
.rt-del-open em { font-style: normal; font-weight: 700; }
.rt-dispatch { border: 0; background: #138A52; color: #fff; padding: 6px; border-radius: 0 0 6px 6px; font-size: 13px; }
.rt-del.gone { opacity: .7; }
.rt-gone { font-size: 12px; padding: 6px; color: #138a52; text-align: center; }
.rt-info { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center; padding: 3px 6px; font-size: 12.5px; background: #f3f6fa; border: 1px solid #c7ced8; border-top: 0; }
.rt-info b { color: #1565D8; }
.rt-info button { margin-left: auto; border: 1px solid #1565D8; background: #fff; color: #1565D8; border-radius: 4px; padding: 1px 10px; font-size: 12px; }
.dpos-grid tr.lessk td { color: #b42318; }
.rt-cats { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; align-items: center; }
.rt-cats .grow { flex: 1; }
.rt-cats button { background: #0E2A47; color: #fff; border: 0; border-radius: 4px; padding: 5px 10px; font-size: 12px; }
.rt-cats button.on { background: #FFB52E; color: #0E2A47; }
.rt-cats input { width: 170px; min-height: 0; padding: 3px 6px; font-size: 12px; border: 1px solid #a9b3c1; border-radius: 0; }
.rt-qty { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px 0; }
.rt-qty b { font-weight: 400; font-size: 13px; background: #0E2A47; color: #fff; padding: 1px 8px; }
.rt-qty span { font-size: 22px; min-width: 60px; }
.rt-qty small { color: #5A6B80; }
.rt-dlg { width: min(520px, 94vw); }
.rt-wide { width: min(980px, 96vw); }
.rt-form label { display: grid; grid-template-columns: 140px minmax(0,1fr); align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 400; font-size: 13.5px; }
.rt-form input, .rt-form select { width: 100%; min-height: 0; padding: 4px 6px; border-radius: 0; font-size: 14px; border: 1px solid #a9b3c1; }
.rt-form input[readonly] { background: #f1f4f8; }
.rt-pair { display: flex; gap: 6px; }
.rt-pair > input, .rt-pair > select { flex: 1; min-width: 0; }
.rt-pair button { border: 0; background: #1565D8; color: #fff; border-radius: 3px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.rt-running { border-top: 1px solid #dfe5ec; margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.rt-running > button, .rt-move button { align-self: flex-start; border: 0; background: #138A52; color: #fff; border-radius: 4px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.rt-running > button:disabled { opacity: .5; cursor: default; }
.rt-move { display: flex; align-items: center; gap: 6px; }
.rt-move select { width: auto; flex: 1; }
.rt-move button { background: #0E2A47; }
.rt-new { display: flex; flex-direction: column; gap: 8px; }
.rt-new > button { border: 0; background: #1565D8; color: #fff; border-radius: 6px; padding: 14px; font-size: 17px; cursor: pointer; }
.rt-retrieve { max-height: 60vh; overflow: auto; border: 1px solid #dfe5ec; }
@media (max-height: 760px) { .rt-held { height: 150px; flex-basis: 150px; } .rt-table { min-height: 108px; } }
/* phone */
.rmpos .rm-tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rm-table { min-height: 84px; border: 1px solid rgba(0,0,0,.2); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; font-size: 12px; color: #111; text-align: center; }
.rm-table b { font-size: 18px; }
.rm-table em { font-style: normal; font-weight: 700; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.rm-back { background: none; border: 0; color: #fff; font-size: 15px; padding: 0; cursor: pointer; }
.rm-info { width: 100%; text-align: left; background: #f3f6fa; border: 1px solid #dfe5ec; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; font-size: 14px; color: #0E2A47; }
@media (max-width: 760px) { .rt-form label { grid-template-columns: 1fr; gap: 2px; } .rt-move { flex-wrap: wrap; } }
/* Tables / Colors */
.rh-tabs { padding: 0; }
.rh-body { padding: 12px 0 0; }
.rh-form { max-width: 540px; }
.rh-pair { display: flex; gap: 6px; align-items: center; }
.rh-pair select, .rh-pair input { flex: 1; min-width: 0; }
.rh-pair small { color: #5A6B80; font-size: 12px; }
.rh-sample { display: inline-block; padding: 6px 16px; border: 1px solid #9aa6b5; font-weight: 400; min-width: 150px; text-align: center; }
.rh-colors input[type=color] { width: 60px; flex: 0 0 60px; padding: 0; height: 30px; }
.dbtns .grow { flex: 1; }
.mpos-head b.rm-title { font: 700 17px var(--font-body); }
.rm-order { margin-top: 0; }
.rm-bar { position: sticky; bottom: 0; z-index: 5; background: #0E2A47; color: #fff; display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 12px -12px 0; }
.rm-bar > span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.rm-bar small { color: #a8b7ca; font-size: 12px; }
.rm-bar b { font-size: 18px; }
.rm-bar .btn-ghost { background: #fff; }

/* File > Backup (desktop bnr) and File > Export to Excel > Report Filter (desktop excel1-3) */
.bk-win .dwin-body, .ex-win .dwin-body { background: #F3F6FA; }
.bk-title { text-align: center; font: 600 17px var(--font-body); color: #0E2A47; margin: 10px 0 14px; }
.bk-btns { display: flex; justify-content: center; gap: 40px; margin-bottom: 14px; }
.bk-b { min-width: 150px; padding: 10px 18px; border: 0; border-radius: 6px; font: 600 14px var(--font-body); cursor: pointer; color: #fff; }
.bk-b.orange { background: #FFB52E; color: #1b2733; }
.bk-b.blue { background: #1565D8; }
.bk-b:disabled { opacity: .6; cursor: default; }
.bk-pick { background: #fff7e6; border: 1px solid #f2c46b; padding: 7px 10px; margin: 6px 0; font-size: 13px; }
.bk-list { margin-top: 8px; background: #fff; }
.bk-list td .tbtn { padding: 3px 10px; }
.bk-note { font-size: 12px; color: #5A6B80; margin: 10px 2px 2px; }
.ex-head { font-size: 13px; color: #5A6B80; margin: 4px 0 8px; }
.ex-head b { color: #0E2A47; }
.ex-lead { margin: 4px 0 10px; }
.ex-cap { font-size: 12px; color: #33404d; }
.ex-dates { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.ex-dates label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ex-dates input { width: 200px; padding: 5px 6px; border: 1px solid #b9c6d6; border-radius: 3px; font: inherit; }
.ex-bar { display: flex; justify-content: flex-end; }
.ex-finish { background: #1565D8; color: #fff; text-decoration: none; padding: 8px 18px; border-radius: 4px; font-weight: 600; }
.ex-status { margin-top: 10px; font-size: 13px; color: #33404d; }
@media (max-width: 760px) { .bk-btns { gap: 12px; } .bk-b { min-width: 0; flex: 1; } .ex-dates input { width: 100%; } .ex-dates label { flex: 1; } }

/* Utilities > Projects (desktop AddProjects "Manage Projects") */
.pjm-win .dwin-body { background: #f3f6fa; }
.pjm-title { margin: 0 0 14px; text-align: center; font: 400 31px/1.2 "DM Sans", sans-serif; color: #0E2A47; }
.pjm-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 30px; }
.pjm-col { display: flex; flex-direction: column; gap: 8px; }
.pjm-col .dl { margin: 0; grid-template-columns: 110px minmax(0,1fr); color: #0E2A47; }
.pjm-col .dl input, .pjm-col .dl select { padding: 4px 6px; font-size: 13.5px; color: #0E2A47; }
.pjm-b { border: 0; border-radius: 0; padding: 7px 10px; font: 500 13.5px "DM Sans", sans-serif; cursor: pointer; min-height: 32px; }
.pjm-b.blue { background: #1565D8; color: #fff; }
.pjm-b.red { background: #D64545; color: #fff; }
.pjm-b.white { background: #fff; color: #0E2A47; border: 1px solid #0E2A47; }
.pjm-b.small { width: 120px; }
.pjm-b:disabled { opacity: .6; cursor: default; }
.pjm-btns { display: flex; gap: 16px; margin: 14px 0 10px; }
.pjm-grid table td, .pjm-grid table th { color: #0E2A47; }
@media (max-width: 760px) {
  .pjm-form { grid-template-columns: 1fr; }
  .pjm-title { font-size: 24px; }
}

/* Utilities > Saleman (desktop Salesman "Salesmen") */
.sm-win .dwin-body { background: #f3f6fa; }
.sm-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-bottom: 10px; }
.sm-form .dl { margin: 0; grid-template-columns: 120px minmax(0, 1fr); color: #0E2A47; }
.sm-form .dl:not(:first-child) { grid-column: 1 / -1; }
.sm-btns { display: flex; gap: 8px; }
.pjm-b.amber { background: #FFB52E; color: #0E2A47; }
.sm-grid table td, .sm-grid table th { color: #0E2A47; }
.dpos-boxes .dpos-sm select, .dpos-boxes .dpos-sm input { width: 100%; font: inherit; border: 0; background: transparent; text-align: center; padding: 0; margin: 0; min-height: 0; height: auto; line-height: inherit; }
.mpos-sm { margin: 8px 0 0; }
.mpos-sm input, .mpos-sm select { width: 100%; }

/* Utilities > Membership Panel (desktop MemP) */
.mem-win .dwin-body { background: #f3f6fa; }
.mem-rules { display: flex; flex-direction: column; gap: 10px; color: #0E2A47; font-size: 14px; align-items: flex-start; }
.mem-rule input { width: 90px; padding: 3px 6px; margin: 0 4px; border: 1px solid #a9b3c1; font: inherit; }
.mem-h { margin: 16px 0 6px; font: 600 14px "DM Sans", sans-serif; color: #0E2A47; }
.dpos-totals .dpos-points b { font-size: 14px; background: #1565D8; }
.dpos-totals .dpos-points span { font-size: 17px; }

/* Utilities > Access Control: Login Access ("Password Change") and POS Access Management */
.la-win .dwin-body, .pa-win .dwin-body { background: #f3f6fa; }
.la { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; }
.la-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; align-items: center; }
.la-form .dl, .pa-form .dl, .pa-disc { margin: 0; grid-template-columns: 90px minmax(0, 1fr); color: #0E2A47; }
.la-form .dl input, .pa-form .dl input, .pa-disc input { padding: 4px 6px; font-size: 13.5px; color: #0E2A47; }
.la-check { display: inline-flex; align-items: center; gap: 6px; font: 400 14px "DM Sans", sans-serif; color: #0E2A47; cursor: pointer; }
.la-check.later { color: #9aa6b4; cursor: default; }
.la-btns { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin: 10px 0 8px; }
.la-btns .muted { margin-right: auto; }
.la-btns .pjm-b { min-width: 110px; }
.la-grid table td, .la-grid table th, .pa-grid table td, .pa-grid table th { color: #0E2A47; }
.la-grid tr.off td, .pa-grid tr.off td { color: #9aa6b4; }
.la-sec { font: 400 22px "DM Sans", sans-serif; color: #0E2A47; text-align: center; margin: 4px 0 12px; }
.la-cap { font: 500 14px "DM Sans", sans-serif; color: #0E2A47; margin: 14px 0 6px; }
.la-row { display: flex; gap: 40px; padding-left: 40px; }
.la-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; padding-left: 40px; }
.la-hint { margin-top: 18px; }
.pa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.pa-ticks { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 14px 0 6px; }
.pa-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pa-disc { display: grid; grid-template-columns: 90px 90px auto; align-items: center; gap: 8px; }
.pa-disc b { font-weight: 400; color: #5A6B80; font-size: 13px; }
.pa-bar .la-btns { margin-left: auto; }
.pos-big.off { background: #9aa6b4; cursor: default; }
.lpanel.off { opacity: .55; }
.pos-denied { max-width: 620px; margin: 60px auto; padding: 0 16px; display: grid; gap: 14px; justify-items: start; }
@media (max-width: 900px) {
  .la { grid-template-columns: 1fr; gap: 10px; }
  .la-form, .pa-form { grid-template-columns: 1fr; }
  .la-row, .la-ticks { padding-left: 0; }
  .la-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .la-btns { flex-wrap: wrap; }
}

/* Company > Assign Route (desktop SMRoute "Assign Routes") */
.ar-day { display: block; width: 100%; margin: 0 0 10px; padding: 6px 8px; font: 600 15px/1.3 "DM Sans", sans-serif; color: #0E2A47; border: 1px solid #b9c6d6; border-radius: 4px; background: #fff; }
.ar-grid { max-height: 52vh; overflow: auto; }
.ar-grid select { width: 100%; font: inherit; padding: 3px 4px; border: 1px solid #c8d3e0; border-radius: 3px; background: #fff; }
.ar-btns { justify-content: flex-end; margin-top: 10px; }
.dpos-boxes .dpos-route select { font-size: 13px; }

/* Recipes > Recipes (desktop Recipe), Add Recipe Rates, Manual Costing "Daily Cost Sheet" */
.rc-win .dwin-body { background: #f3f6fa; }
.rc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.rc-top #rcCustom { margin-right: auto; }
.rc-cap { font-weight: 600; color: #0E2A47; white-space: nowrap; }
.rc-top input { padding: 5px 8px; border: 1px solid #b9c6d6; border-radius: 3px; background: #fff; color: #0E2A47; }
.rc-code { width: 110px; } .rc-name { width: 300px; max-width: 100%; }
.rc-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 10px; }
.rc-menu { max-height: 470px; overflow: auto; }
.rc-menu tr { cursor: pointer; }
.rc-menu tr.has td { background: #fff7a8; }
.rc-menu tr.sel td { background: #0E2A47; color: #fff; }
.rc-menu tr.off { opacity: .45; cursor: default; }
.rc-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rc-panel.locked .rc-form { opacity: .6; }
.rc-form .dl { margin: 0 0 6px; grid-template-columns: 130px minmax(0, 1fr); color: #0E2A47; }
.rc-pair { display: flex; gap: 6px; align-items: center; min-width: 0; }
.rc-pair input { flex: 1; min-width: 0; }
.rc-pair #rcIngCode, .rc-pair #rcQty, .rc-pair #rcSub { flex: 0 0 150px; }
.rc-units-cap { font-weight: 600; white-space: nowrap; color: #0E2A47; }
.rc-lines { max-height: 300px; overflow: auto; }
.rc-lines tr { cursor: pointer; }
.rc-lines tr.sel td { background: #dbe8f7; }
.rc-foot, .mc-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rc-foot #rcDelLine { margin-right: auto; }
.rc-foot input, .mc-foot input { width: 160px; padding: 5px 8px; border: 1px solid #b9c6d6; border-radius: 3px; background: #fff; text-align: right; font-weight: 700; }
.rr-grid, .mc-grid { max-height: 56vh; overflow: auto; }
.rr-grid input, .mc-grid input { width: 130px; text-align: right; padding: 3px 6px; border: 1px solid #c8d3e0; border-radius: 3px; }
.rr-btns { justify-content: flex-end; margin-top: 10px; }
.mc-date { max-width: 360px; margin: 0 0 10px; grid-template-columns: 130px minmax(0, 1fr); }
.mc-foot { margin-top: 10px; }
.mc-h { margin: 16px 0 6px; font: 600 15px/1.3 "DM Sans", sans-serif; color: #0E2A47; }
@media (max-width: 760px) {
  .rc-body { grid-template-columns: 1fr; }
  .rc-menu { max-height: 220px; }
  .rc-pair { flex-wrap: wrap; }
  .rc-pair #rcIngCode, .rc-pair #rcQty, .rc-pair #rcSub { flex: 1 1 100px; }
  .rc-form .dl { grid-template-columns: 1fr; }
  .rc-name { width: 100%; }
}

/* Store > Issuance / Issuance Return (desktop Issuance, Issuanceret) and Departments */
.vbs-menubar details > div .mb-sep { display: block; height: 1px; margin: 4px 10px; background: #d5dde7; }
.pjm-b.green { background: #1E9E5A; color: #fff; }
.is-body { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 12px; }
.is-left, .is-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.is-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.is-form .dl { margin: 0 0 6px; grid-template-columns: 130px minmax(0, 1fr); color: #0E2A47; }
.is-form .dl.wide { grid-column: 1 / -1; }
.is-btns, .is-import, .is-day-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-btns a.pjm-b { text-decoration: none; display: inline-flex; align-items: center; }
.is-lines { max-height: 330px; overflow: auto; }
.is-lines tr { cursor: pointer; }
.is-lines tr.sel td { background: #dbe8f7; }
.is-lines tr.edit td { background: #fff7a8; }
.is-import select { flex: 1; min-width: 0; padding: 5px 6px; border: 1px solid #b9c6d6; border-radius: 3px; background: #fff; }
.is-right { background: #fff; border: 1px solid #c8d3e0; padding: 8px; }
.is-day-title { font: 600 15px/1.3 "DM Sans", sans-serif; color: #0E2A47; text-align: center; }
.is-day { max-height: 420px; overflow: auto; flex: 1; }
.is-day-sum { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.is-day-foot input { width: 130px; padding: 5px 8px; border: 1px solid #b9c6d6; border-radius: 3px; background: #fff; text-align: right; font-weight: 700; }
@media (max-width: 1000px) { .is-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .is-form { grid-template-columns: 1fr; }
  .is-form .dl { grid-template-columns: 1fr; gap: 2px; }
  .is-btns .pjm-b { flex: 1 1 40%; }
  .is-day-sum { flex: 1 1 100%; } .is-day-sum input { flex: 1; width: auto; }
}

/* Store > Demand (desktop Add Demand, "Demand Form") */
.dm-head { padding: 0 0 8px; margin: 0 0 8px; border-bottom: 1px solid #d5dde7; }
.dm-win .is-lines { max-height: 360px; }
.dm-win .is-btns { margin: 0 0 8px; }
.is-body.one { grid-template-columns: minmax(0, 1fr); }

/* Customer Advance on the sales screens (desktop CustomerAdvanceForm) */
.adv-dialog { width: min(480px, 94vw); }
.adv-title { font: 700 18px/1.2 "DM Sans", sans-serif; color: #0E2A47; margin: 0 0 10px; }
.adv-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.adv-row input, .adv-row select { width: 100%; font-size: 14px; padding: 5px 7px; border: 1px solid #a9b3c1; background: #DAF7F0; }
.adv-row #advNote, .adv-row #advDate { background: #fff; }
.adv-row b.owes { color: #961E1E; } .adv-row b.held { color: #16803D; }
.adv-hint { font-size: 12.5px; color: #505050; margin: 4px 0 0; }
.adv-dialog .dmsg { margin: 0 0 8px; }