/* iPOS Desktop shell kit (js/deskshell.js) - PC layout only.
 * Everything is inside @media (min-width: 821px) and scoped to body.nav-top:not(.ms-on), so phones, tablets
 * (the mshell layer) and apps that never call DeskShell.init() are untouched.
 * Colours come from the app's own variables (--brand, --brand-2, --line, --muted, --card, --ink). */

/* kit elements never show below 821 px or on the mshell tablet layout */
.topnav, .app-foot { display: none; }

@media (min-width: 821px) {
  :root { --tn-h: 40px; --foot-h: 24px; }

  /* ---------- top menu strip (RW style) ---------- */
  body.nav-top:not(.ms-on) .topnav { display: flex; align-items: center; flex-wrap: nowrap; min-height: var(--tn-h); position: sticky; top: var(--bar-h, 0px); z-index: 29;
    background: var(--card, #fff); border-bottom: 1px solid var(--line, #e2e7ef); padding: 0 8px; gap: 0; }
  body.nav-top:not(.ms-on) .topnav .tn-brand { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 4px; margin-right: 6px; text-decoration: none; color: var(--ink, #16202e); border-right: 1px solid var(--line, #e2e7ef); height: 28px; }
  body.nav-top:not(.ms-on) .topnav .tn-brand img { width: 24px; height: 24px; border-radius: 6px; }
  body.nav-top:not(.ms-on) .topnav .tn-brand b { font-size: 14px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) .topnav > a, body.nav-top:not(.ms-on) .topnav .tn-g > button { display: inline-flex; align-items: center; gap: 6px; height: var(--tn-h); padding: 0 11px; line-height: 1; font-size: 13px; font-weight: 600;
    color: var(--muted, #637083); text-decoration: none; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-family: inherit; white-space: nowrap; box-sizing: border-box; }
  body.nav-top:not(.ms-on) .topnav > a svg { width: 16px; height: 16px; }
  body.nav-top:not(.ms-on) .topnav .tn-g > button i { font-style: normal; font-size: 10px; opacity: .7; }
  body.nav-top:not(.ms-on) .topnav > a.active, body.nav-top:not(.ms-on) .topnav > a:hover, body.nav-top:not(.ms-on) .tn-g > button:hover, body.nav-top:not(.ms-on) .tn-g.open > button, body.nav-top:not(.ms-on) .tn-g.cur > button { color: var(--brand-2, var(--brand, #0f5c8c)); border-bottom-color: var(--brand, #0f5c8c); }
  body.nav-top:not(.ms-on) .topnav > a:focus-visible, body.nav-top:not(.ms-on) .tn-g > button:focus-visible { outline: 2px solid var(--brand, #0f5c8c); outline-offset: -2px; }
  body.nav-top:not(.ms-on) .tn-g { position: relative; display: inline-flex; align-items: stretch; }
  body.nav-top:not(.ms-on) .tn-dd { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--card, #fff); border: 1px solid var(--line, #e2e7ef); border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.14); z-index: 45; padding: 4px; }
  body.nav-top:not(.ms-on) .tn-g.open .tn-dd { display: block; }
  body.nav-top:not(.ms-on) .tn-dd a { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 7px; font-size: 13px; line-height: 1.25; font-weight: 500; color: var(--ink, #16202e); text-decoration: none; white-space: nowrap; }
  body.nav-top:not(.ms-on) .tn-dd a svg { width: 16px; height: 16px; flex: none; color: var(--muted, #637083); }
  body.nav-top:not(.ms-on) .tn-dd a:hover, body.nav-top:not(.ms-on) .tn-dd a:focus-visible, body.nav-top:not(.ms-on) .tn-dd a.active { background: var(--brand-soft, #e6f0f7); color: var(--brand-2, var(--brand, #0f5c8c)); outline: none; }
  body.nav-top:not(.ms-on) .tn-dd a.active { font-weight: 700; }
  body.nav-top:not(.ms-on) .tn-dd a.active svg { color: var(--brand, #0f5c8c); }
  body.nav-top:not(.ms-on) .tn-dd .tn-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #637083); padding: 6px 10px 3px; border-bottom: 1px solid var(--line, #e2e7ef); margin-bottom: 2px; }
  /* right side */
  body.nav-top:not(.ms-on) .tn-right { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; padding-left: 8px; flex: 1 1 auto; min-width: 0; }
  body.nav-top:not(.ms-on) .tn-out { font-size: 13px; font-weight: 600; color: var(--muted, #637083); text-decoration: none; padding: 0 8px; white-space: nowrap; }
  body.nav-top:not(.ms-on) .tn-out:hover { color: var(--bad, #b3261e); }
  body.nav-top:not(.ms-on) .tn-bell { position: relative; background: transparent; border: 0; font-size: 17px; cursor: pointer; padding: 3px 8px; border-radius: 8px; line-height: 1; }
  body.nav-top:not(.ms-on) .tn-bell:hover { background: var(--bg, #f3f5f9); }
  body.nav-top:not(.ms-on) .tn-bell span { position: absolute; top: -3px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #d93025; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; display: none; text-align: center; }
  body.nav-top:not(.ms-on) .tn-bell.has span { display: inline-block; }
  body.nav-top:not(.ms-on) .tn-backup { font-size: 12.5px; padding: 4px 10px; border-radius: 14px; white-space: nowrap; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) .tn-backup:empty { display: none; }
  body.nav-top:not(.ms-on) .tn-backup.ok { background: #e3f4ea; color: #12703b; }
  body.nav-top:not(.ms-on) .tn-backup.warn { background: #fff1d6; color: #9a5b00; }
  body.nav-top:not(.ms-on) .tn-backup.bad { background: #fde3e1; color: #b42318; }
  body.nav-top:not(.ms-on) .tn-backup.bad:hover, body.nav-top:not(.ms-on) .tn-backup.warn:hover { filter: brightness(.95); }
  /* the strip is the menu: no side menu, no minimize button, full-width content, page title bar below the strip */
  body.nav-top:not(.ms-on) .sidenav, body.nav-top:not(.ms-on) .nav-toggle, body.nav-top:not(.ms-on) #navToggle { display: none !important; }
  body.nav-top:not(.ms-on) .main { width: 100%; }
  body.nav-top:not(.ms-on) .content { max-width: none; }
  body.nav-top:not(.ms-on) .topbar { top: calc(var(--bar-h, 0px) + var(--tn-h)); }
  body.nav-top:not(.ms-on) .cart { top: calc(var(--bar-h, 0px) + var(--tn-h) + 24px); }
  /* login screen / full-screen POS: strip and foot out of the way */
  body.nav-top.ds-login .topnav, body.nav-top.pos-mode .topnav, body.nav-top.ds-login .app-foot, body.nav-top.pos-mode .app-foot { display: none !important; }

  /* ---------- bottom strip ---------- */
  body.nav-top:not(.ms-on).ds-foot .app-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--foot-h);
    padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--brand-2, var(--brand, #0b4a72)); color: rgba(255,255,255,.85); box-sizing: border-box; }
  body.nav-top:not(.ms-on).ds-foot .app-foot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on).ds-foot .app-foot .af-c { flex: 1; text-align: center; }
  body.nav-top:not(.ms-on).ds-foot .app-foot .af-c.ok { color: #9be7b0; }
  body.nav-top:not(.ms-on).ds-foot .app-foot .af-c.warn { color: #ffd180; }
  body.nav-top:not(.ms-on).ds-foot .app-foot a { color: #fff; font-weight: 800; text-decoration: none; }
  body.nav-top:not(.ms-on).ds-foot .app-foot a:hover { text-decoration: underline; }
  body.nav-top:not(.ms-on).ds-foot:not(.ds-login):not(.pos-mode) .app { padding-bottom: var(--foot-h); }
  body.nav-top:not(.ms-on).ds-foot:not(.ds-login):not(.pos-mode) .toast { bottom: calc(var(--foot-h) + 14px); }
  body.nav-top:not(.ms-on).ds-foot:not(.ds-login):not(.pos-mode) #demoPill { bottom: calc(var(--foot-h) + 8px); }

  /* ---------- no wrapped text in fields (all forms and pop-ups) ---------- */
  body.nav-top:not(.ms-on) label.f > span, body.nav-top:not(.ms-on) label.f > b, body.nav-top:not(.ms-on) .f > span:first-child, body.nav-top:not(.ms-on) th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) .btn, body.nav-top:not(.ms-on) .seg button, body.nav-top:not(.ms-on) .tabs button, body.nav-top:not(.ms-on) .modal footer button, body.nav-top:not(.ms-on) button.sm, body.nav-top:not(.ms-on) label.btn { white-space: nowrap; }
  body.nav-top:not(.ms-on) .modal footer .btn { flex: none; }
  body.nav-top:not(.ms-on) input:not([type=checkbox]):not([type=radio]):not([type=file]), body.nav-top:not(.ms-on) select { min-width: 0; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) select, body.nav-top:not(.ms-on) select option { white-space: nowrap; text-overflow: ellipsis; }
  body.nav-top:not(.ms-on) .row > label.small { white-space: nowrap; }

  /* ---------- compact Settings page ---------- */
  /* cards flow down 2 columns (3 on wide screens) like a newspaper, so short and tall cards pack without gaps */
  body.nav-top:not(.ms-on) .settings-compact { column-count: 2; column-gap: 12px; }
  body.nav-top:not(.ms-on) .settings-compact > .grid { display: block; }
  body.nav-top:not(.ms-on) .settings-compact > .card, body.nav-top:not(.ms-on) .settings-compact > .grid > .card, body.nav-top:not(.ms-on) .settings-compact > .banner { break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; }
  body.nav-top:not(.ms-on) .settings-compact .card { padding: 12px 14px; }
  body.nav-top:not(.ms-on) .settings-compact .card .card { margin: 0 0 10px; }
  body.nav-top:not(.ms-on) .settings-compact > .row, body.nav-top:not(.ms-on) .settings-compact > .wide, body.nav-top:not(.ms-on) .settings-compact > .card.wide { column-span: all; }
  body.nav-top:not(.ms-on) .settings-compact > .row { margin-top: 2px; }
  body.nav-top:not(.ms-on) .settings-compact h2 { font-size: 15px; margin: 0 0 8px; }
  body.nav-top:not(.ms-on) .settings-compact h3 { font-size: 13.5px; margin: 8px 0 4px; }
  body.nav-top:not(.ms-on) .settings-compact p { margin: 4px 0 8px; }
  body.nav-top:not(.ms-on) .settings-compact p.small, body.nav-top:not(.ms-on) .settings-compact .small { font-size: 12.5px; }
  body.nav-top:not(.ms-on) .settings-compact .card > .grid.g2, body.nav-top:not(.ms-on) .settings-compact .card .grid.g2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Hotel Manager local addition: the Hotel details card also uses .grid.g3 (3-column) - collapse it the same way */
  body.nav-top:not(.ms-on) .settings-compact .card > .grid.g3, body.nav-top:not(.ms-on) .settings-compact .card .grid.g3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Hotel Manager local addition: the "Invoice footer" field carries an inline style="grid-column:span 2" (meant
   * for the original 3-column grid) - once the grid above is collapsed to one column that span still asks for a
   * 2nd column, so the browser silently adds an implicit one back. Cancel the inline span inside the compact layout. */
  body.nav-top:not(.ms-on) .settings-compact .card .grid.g2 > [style*="grid-column"], body.nav-top:not(.ms-on) .settings-compact .card .grid.g3 > [style*="grid-column"] { grid-column: auto !important; }
  body.nav-top:not(.ms-on) .settings-compact label.f { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-bottom: 6px; }
  body.nav-top:not(.ms-on) .settings-compact label.f > span { margin: 0; font-size: 12.5px; }
  body.nav-top:not(.ms-on) .settings-compact label.f:has(> textarea) { grid-template-columns: minmax(0, 1fr); }
  body.nav-top:not(.ms-on) .settings-compact label.f:has(> textarea) > span { margin-bottom: 2px; }
  body.nav-top:not(.ms-on) .settings-compact input:not([type=checkbox]):not([type=radio]):not([type=file]), body.nav-top:not(.ms-on) .settings-compact select { min-height: 34px; padding: 5px 9px; font-size: 14px; }
  body.nav-top:not(.ms-on) .settings-compact textarea { min-height: 56px; padding: 6px 9px; font-size: 13.5px; }
  body.nav-top:not(.ms-on) .settings-compact .btn { min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
  body.nav-top:not(.ms-on) .settings-compact .btn.lg { min-height: 40px; font-size: 14.5px; }
  body.nav-top:not(.ms-on) .settings-compact table th, body.nav-top:not(.ms-on) .settings-compact table td { padding: 6px 6px; font-size: 13.5px; }
  body.nav-top:not(.ms-on) .settings-compact .kv { grid-template-columns: 120px 1fr; gap: 4px 10px; font-size: 13.5px; }
  body.nav-top:not(.ms-on) .settings-compact hr { margin: 10px 0 !important; }
  body.nav-top:not(.ms-on) .settings-compact details > label.f { margin-top: 6px; }
}
@media (min-width: 821px) and (max-width: 1199px) {
  body.nav-top:not(.ms-on) .topnav > a, body.nav-top:not(.ms-on) .topnav .tn-g > button { padding: 0 8px; font-size: 12.5px; }
  body.nav-top:not(.ms-on) .tn-backup { font-size: 12px; padding: 3px 8px; }
  body.nav-top:not(.ms-on) .tn-out { padding: 0 4px; }
}
@media (min-width: 1400px) {
  body.nav-top:not(.ms-on) .settings-compact { column-count: 3; }
  body.nav-top:not(.ms-on) .topnav > a, body.nav-top:not(.ms-on) .topnav .tn-g > button { padding: 0 13px; font-size: 13.5px; }
}

/* ---------- login screen: shop online account box (all widths; it lives inside the login card) ---------- */
.ds-shop { margin-top: 12px; padding: 9px 11px; border: 1px dashed var(--line, #dbe3ec); border-radius: 12px; background: rgba(243, 245, 249, .9); text-align: left; display: flex; flex-direction: column; gap: 3px; color: var(--ink, #1f2937); font-size: 13px; line-height: 1.35; }
.ds-shop b { font-size: 13px; }
.ds-shop.on { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; border-style: solid; background: #e3f4ea; color: #12703b; border-color: #bfe6cd; }
.ds-shop .ds-code { font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: .04em; }
.ds-shop-t { font-size: 12px; color: var(--muted, #637083); line-height: 1.35; }
.ds-shop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: 6px; margin-top: 5px; }
.ds-shop-row input { width: 100%; min-height: 36px; padding: 6px 8px; border: 1.5px solid var(--line, #dbe3ec); border-radius: 9px; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink, #111827); text-transform: none; letter-spacing: normal; text-align: left; box-sizing: border-box; margin: 0; }
.ds-shop-row input.ds-sc { text-transform: uppercase; }
.ds-shop-row input::placeholder { text-transform: none; letter-spacing: normal; font-size: 13px; }
.ds-shop-row input:focus { outline: none; border-color: var(--brand, #0f5c8c); box-shadow: 0 0 0 3px var(--brand-soft, #e6f0f7); }
.ds-shop-row .btn, .ds-shop-row button { min-height: 36px; margin: 0; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--brand, #0f5c8c); background: var(--brand, #0f5c8c); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ds-shop-row button:disabled { opacity: .6; cursor: default; }
@media (max-width: 520px) { .ds-shop-row { grid-template-columns: 1fr 1fr; } .ds-shop-row .btn, .ds-shop-row button { grid-column: 1 / -1; } }
/* the IPW login card: when it is taller than the window it starts at the top and scrolls, instead of being cut at the top */
body #ipw .ipw-r { justify-content: flex-start; }
body #ipw .ipw-card { margin: auto 0; }
/* short PC screens (laptops, 768-860 px high): a tighter IPW login card so the PIN pad and the shop box fit without scrolling */
@media (min-width: 821px) and (max-height: 860px) {
  body #ipw .ipw-r { padding: 12px 22px; }
  body #ipw .ipw-card { padding: 18px 24px 14px; }
  body #ipw .ipw-clogo { width: 52px; height: 52px; margin-bottom: 6px; }
  body #ipw .ipw-chead h1 { font-size: 20px; } body #ipw .ipw-chead h1 span { font-size: 14px; }
  body #ipw .ipw-cb { margin-top: 10px; }
  body #ipw .ipw-sel { margin-bottom: 6px; }
  body #ipw .ipw-pin { font-size: 20px; padding: 7px; }
  body #ipw .ipw-pad { gap: 5px; margin-top: 7px; } body #ipw .ipw-pad button { padding: 7px 0; font-size: 16px; }
  body #ipw .ipw-btn { margin-top: 8px; padding: 10px 14px; }
  body #ipw .ipw-link { margin-top: 8px; }
  body #ipw .ipw-cfoot { margin-top: 10px; padding-top: 8px; }
  body #ipw .ds-shop { margin-top: 10px; }
}