/* ============================================================
   style.css — visual design
   Theme: neutral grayscale surfaces with clear black-and-white actions.
   Prices, quantities, and totals use tabular monospace figures.
   ============================================================ */


:root {
  --ink: #1c2430;
  --paper: #f3f3f3;
  --paper-raised: #ffffff;
  --line: #d6d6d6;
  --stamp: #9c3b2e;
  --stamp-dark: #7e2e24;
  --brand-red: #e51e2a;
  --brand-red-dark: #b91520;
  --pastel-mint: #dff5ec;
  --pastel-blue: #e0efff;
  --pastel-lilac: #eee7ff;
  --pastel-peach: #ffe8df;
  --sage: #4f6f52;
  --amber: #747474;
  --muted: #666666;
  font-family: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  min-height: 100vh;
}

button, input, select {
  font-family: inherit;
  font-size: 1rem;
}

.num {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- Login screen ---------- */

#activation-screen { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:1rem; overflow:auto; background:var(--paper); }
#activation-screen[hidden] { display:none; }
.activation-card { position:relative; width:min(100%, 29rem); display:grid; gap:.7rem; margin-block:auto; padding:2rem; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); box-shadow:0 16px 50px rgba(0,0,0,.12); }
.activation-logo { width:min(12rem,55%); max-height:5rem; object-fit:contain; margin:0 auto .35rem; }
.activation-card h1 { margin:.25rem 0 0; font-size:1.25rem; }
.activation-copy,.activation-footnote { color:var(--muted); font-size:.86rem; line-height:1.5; margin:0; }
.activation-card label:not(.login-language-picker) { font-size:.82rem; font-weight:600; margin-top:.2rem; }
.activation-device-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.5rem; }
.activation-device-row code,.activation-card textarea,.settings-block code { min-width:0; overflow-wrap:anywhere; padding:.65rem; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink); font-size:.78rem; }
.activation-card textarea { width:100%; resize:vertical; font-family:monospace; }
.activation-error { min-height:1.2rem; color:#a22; font-size:.82rem; line-height:1.4; }
.activation-card > .btn { width:100%; min-height:2.7rem; }
@media(max-width:480px) { .activation-card { padding:1.25rem; padding-top:3.3rem; } }

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

.login-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2.5rem 2.25rem;
  width: 320px;
}

.login-card h1 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem;
}

.login-card p.sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}

#login-user-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.user-pick {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-pick:hover { border-color: var(--stamp); }
.user-pick .role { font-size: 0.7rem; color: var(--muted); text-transform: lowercase; }

#pin-entry { display: none; margin-top: 1rem; }
#pin-entry input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  letter-spacing: 0.3em;
  font-family: "IBM Plex Mono", monospace;
}
#pin-error { color: var(--stamp); font-size: 0.8rem; min-height: 1.2em; margin-top: 0.4rem; }

/* ---------- Branded POS login ---------- */

#login-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.95), transparent 32%),
    linear-gradient(135deg, #f7fbfa 0%, #f4f0ff 52%, #fff6f0 100%);
}

#login-screen::before,
#login-screen::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}
#login-screen::before { width: 22rem; height: 22rem; left: -10rem; bottom: -10rem; background: rgba(213, 243, 232, .75); }
#login-screen::after { width: 18rem; height: 18rem; right: -8rem; top: -7rem; background: rgba(255, 225, 218, .72); }

.login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(440px, 1.18fr);
  width: min(1120px, calc(100% - 3rem));
  min-height: min(680px, calc(100vh - 3rem));
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(74, 67, 95, .16), 0 2px 7px rgba(74, 67, 95, .08);
  backdrop-filter: blur(18px);
}

.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: rgba(255, 255, 255, .87);
  border: 0;
  border-radius: 0;
}
.login-language-picker { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; align-items: center; gap: .45rem; color: #5d6864; font-size: .72rem; }
.pos-language-select { min-height: 2.15rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font: inherit; }

.login-brand-lockup { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.25rem; }
.login-logo { width: clamp(190px, 34vw, 280px); height: 94px; object-fit: contain; object-position: left center; border-radius: 8px; }
.login-product-label { color: #17324d; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.login-card h1 { color: #24302f; font-family: "Inter", system-ui, sans-serif; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.04em; margin: 0 0 .45rem; }
.login-card p.sub { color: #6f7471; font-size: .9rem; line-height: 1.55; margin: 0 0 1.35rem; }
.login-card input { background: #fff; border: 1px solid #d9e4e0; border-radius: 12px; padding: .82rem .9rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.login-card input:focus { border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(229, 30, 42, .1); }
#setup-entry { display: flex; flex-direction: column; gap: .9rem; }
#setup-entry > .sub { margin-bottom: 0; }
#setup-entry > #setup-submit { margin-top: 0 !important; }
#setup-entry input { width: 100%; min-width: 0; }
#login-restore-box { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #d9e4e0; border-radius: 12px; background: #f7faf9; }
#login-restore-box[hidden] { display: none; }
#login-restore-box h2 { margin: 0 0 .35rem; color: #24302f; font-size: .9rem; }
#login-restore-box p { margin: 0 0 .7rem; color: #6f7471; font-size: .78rem; line-height: 1.45; }
.login-restore-picker { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; cursor: pointer; }
.login-restore-picker input { display: none; }
#login-user-list { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.1rem; }
.user-pick { width: 100%; min-height: 3.25rem; }
.user-pick { padding: .85rem 1rem; border: 1px solid #dfe9e5; background: #fbfdfc; border-radius: 12px; color: #293634; transition: transform .2s, border-color .2s, box-shadow .2s; }
.user-pick:hover { border-color: var(--brand-red); box-shadow: 0 8px 22px rgba(229, 30, 42, .1); transform: translateY(-1px); }
.user-pick .role { color: #89938f; }
#pin-entry { margin-top: 1.1rem; }
#pin-entry input { border-radius: 12px; }
.login-card .btn-primary { background: var(--brand-red); border-color: var(--brand-red); border-radius: 12px; box-shadow: 0 8px 18px rgba(229, 30, 42, .2); }
.login-card .btn-primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.login-card #pin-cancel { border-radius: 12px; background: #f4f8f6; border-color: #dfe9e5; }
.login-security-note { color: #99a4a0 !important; font-size: .72rem !important; margin: 2rem 0 0 !important; }
.login-security-note span { color: var(--brand-red); margin-right: .25rem; }

.login-showcase { position: relative; min-height: 100%; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); background: linear-gradient(145deg, #e9f8f1 0%, #e9f1ff 47%, #f3eaff 100%); }
.login-showcase::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(135deg, black, transparent 72%); }
.showcase-glow { position: absolute; border-radius: 50%; filter: blur(4px); opacity: .65; }
.showcase-glow-one { width: 22rem; height: 22rem; right: -7rem; top: -8rem; background: var(--pastel-peach); }
.showcase-glow-two { width: 17rem; height: 17rem; left: -8rem; bottom: -7rem; background: var(--pastel-mint); }
.showcase-copy, .product-orbit, .showcase-footer { position: relative; z-index: 1; }
.showcase-kicker { color: var(--brand-red); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.showcase-copy h2 { margin: .85rem 0 .8rem; color: #263a37; font-size: clamp(2.1rem, 5vw, 4rem); line-height: .98; letter-spacing: -.07em; }
.showcase-copy h2 em { color: var(--brand-red); font-style: normal; }
.showcase-copy p { max-width: 20rem; color: #647a75; line-height: 1.55; font-size: .95rem; }
.product-orbit { height: 330px; margin-top: 1.5rem; }
.showcase-product-tile { position: absolute; overflow: hidden; display: grid; place-items: center; border: 8px solid rgba(255,255,255,.75); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 22px 40px rgba(93, 103, 139, .18); transform: rotate(var(--tilt)); transition: transform .3s; }
.showcase-product-tile:hover { transform: rotate(0) translateY(-5px) scale(1.03); }
.showcase-product-tile img { width: 100%; height: 100%; object-fit: cover; }
.product-tile-camera { --tilt: -8deg; width: 190px; height: 145px; left: 4%; top: 76px; background: var(--pastel-blue); }
.product-tile-nvr { --tilt: 7deg; width: 170px; height: 125px; right: 6%; top: 33px; background: var(--pastel-lilac); }
.product-tile-sensor { --tilt: -5deg; width: 126px; height: 126px; right: 25%; bottom: 7px; background: var(--pastel-mint); }
.product-tile-router { --tilt: 8deg; width: 142px; height: 110px; left: 28%; bottom: 4px; background: var(--pastel-peach); }
.showcase-footer { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .5rem; color: #71817d; font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.showcase-footer span { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.85); border-radius: 999px; background: rgba(255,255,255,.45); }

@media (max-width: 820px) {
  #login-screen { align-items: flex-start; justify-content: flex-start; min-height: 100dvh; overflow-y: auto; }
  .login-shell { grid-template-columns: 1fr; width: 100%; min-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .login-showcase { min-height: 360px; padding: 2.25rem; }
  .login-card { padding: 2.25rem; }
  .product-orbit { height: 210px; margin-top: .5rem; transform: scale(.82); transform-origin: left top; width: 120%; }
  .showcase-footer { margin-top: -1.5rem; }
}

@media (max-width: 420px) {
  .login-card { padding: 1.6rem; }
  .login-brand-lockup { margin-bottom: 1.7rem; }
  #setup-entry { gap: .75rem; }
  #setup-entry input { padding-inline: .5rem; font-size: .72rem; }
  .login-showcase { min-height: 300px; padding: 1.7rem; }
  .showcase-copy h2 { font-size: 2.2rem; }
  .product-orbit { height: 165px; transform: scale(.64); width: 155%; }
  .showcase-footer { display: none; }
}
/* ---------- App shell ---------- */

#app-screen { display: none; width: 100%; }
#app-screen.active { display: flex; }

nav.sidebar {
  width: 190px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.nav-group { display: flex; flex-direction: column; gap: .12rem; margin-bottom: .28rem; }
.nav-group[hidden] { display: none !important; }
.nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: .45rem; width: 100%; min-height: 1.85rem; border: 0; border-radius: 7px; padding: .34rem .58rem; background: transparent; color: #718178; text-align: left; font: inherit; font-size: .64rem; font-weight: 750; letter-spacing: .1em; cursor: pointer; }
.nav-group-toggle:hover, .nav-group-toggle:focus-visible { background: #e7f4ec; color: #285b43; outline: none; }
.nav-group:first-of-type .nav-group-toggle { padding-top: .34rem; }
.nav-group-chevron { flex: 0 0 auto; font-size: .95rem; line-height: 1; transition: transform .16s ease; }
.nav-group.is-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: .08rem; margin-left: .42rem; padding-left: .32rem; border-left: 1px solid var(--line); }
.nav-group-items[hidden] { display: none !important; }

.brand {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0 0.5rem 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.75rem;
}
.brand small { display: flex; align-items: center; gap: .32rem; font-weight: 500; color: var(--muted); font-size: 0.7rem; margin-top: 2px; }
.sidebar-product-mark { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }

.stock-adjust-preview { margin: 0.2rem 0 0.8rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--muted); font-size: 0.8rem; }
.stock-adjust-preview[data-invalid="true"] { color: var(--stamp); border-color: #d89b92; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0.55rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.9rem;
}
.nav-btn:hover { background: var(--paper-raised); }
.nav-btn.active { background: var(--ink); color: var(--paper-raised); }

.nav-spacer { flex: 1; }

.who-am-i {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 0.5rem 0.5rem;
}
.who-am-i b { color: var(--ink); }

#logout-btn {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  padding: 0.45rem;
  cursor: pointer;
  font-size: 0.85rem;
}

main.view {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  height: 100vh;
}

.view-section { display: none; }
.view-section.active { display: block; }
.view-section#view-returns { width: 100%; max-width: none; }
.warranty-guidance{color:var(--muted);font-size:.85rem;line-height:1.5;margin:.5rem 0 1rem}
.warranty-sales-list{display:grid;gap:1rem}
.warranty-sale-card{border:1px solid var(--line);border-radius:8px;padding:1rem;background:var(--surface,#fff)}
.warranty-sale-heading{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.7rem;margin-bottom:.4rem}
.warranty-sale-heading span,.warranty-sale-item small{color:var(--muted);font-size:.78rem}
.warranty-sale-item{display:grid;grid-template-columns:minmax(150px,1fr) minmax(250px,2fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.warranty-sale-item:last-child{border-bottom:0}
.warranty-sale-item small{display:block;margin-top:.25rem}
.warranty-status{display:inline-flex;margin-top:.45rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700}
.warranty-status.is-valid{background:#e6f6ec;color:#176337}
.warranty-status.is-invalid{background:#fce9e7;color:#9b3027}
.warranty-claim-fields{display:flex;align-items:end;gap:.5rem;flex-wrap:wrap}
.history-filters{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.history-filters label{display:grid;gap:.3rem;font-size:.78rem}
.history-filters select{min-width:160px;padding:.5rem;border:1px solid var(--line);border-radius:4px}
.history-table-wrap{width:100%;overflow-x:auto}
.history-table-wrap table{min-width:700px}
.warranty-claim-fields label{font-size:.75rem;display:grid;gap:.25rem}
.warranty-claim-fields input{border:1px solid var(--line);border-radius:4px;padding:.5rem;font-size:16px;max-width:100%}
.warranty-claim-fields input[type=number]{width:95px}
.warranty-claim-fields input[type=text]{width:min(250px,100%)}
@media(max-width:700px){.warranty-sale-item{grid-template-columns:1fr}.warranty-claim-fields{align-items:stretch}.warranty-claim-fields label{flex:1 1 150px}.warranty-claim-fields input[type=text]{width:100%}}

h2.view-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.1rem;
  margin: 0 0 1.1rem;
}

/* ---------- Buttons ---------- */

.btn {
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn-primary:hover { background: var(--stamp-dark); border-color: var(--stamp-dark); }
.btn-danger { color: var(--stamp); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Sales screen ---------- */

#sales-layout {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
  height: calc(100vh - 5rem);
}

#product-grid-wrap { flex: 1 1 0; width: 0; min-width: 0; overflow-y: auto; }

.search-row { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.search-row input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.search-row { align-items: center; }
.scanner-help { color: var(--muted); font-size: 0.82rem; }
.scanner-video { width: 100%; max-height: 260px; object-fit: cover; background: #111; border-radius: 4px; margin: 0.5rem 0 0.8rem; }

.cashflow-amount { text-decoration: none; }
.income-amount { color: #2f7d45; }
.outcome-amount { color: #b33a3a; }
.table-total { border-top: 2px solid var(--line); font-weight: 700; }
.taxonomy-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:.45rem; }
.taxonomy-heading h3 { margin:0; }
.taxonomy-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.25rem .7rem; margin-bottom:.6rem; }
.taxonomy-list > div { border-bottom:1px solid var(--line); padding:.25rem 0; }

#product-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.product-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 148px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: 4px;
  padding: 0.7rem;
  text-align: left;
  cursor: pointer;
}
.product-tile:hover { border-color: var(--stamp); }
.product-tile:focus-visible { outline: 3px solid rgba(229, 30, 42, .28); outline-offset: 2px; }
.product-tile .p-name { font-size: 0.85rem; margin-bottom: 0.35rem; }
.product-tile .p-price { font-weight: 600; }
.product-tile .p-stock { display: block; font-size: 0.7rem; color: var(--muted); margin-top: 0.25rem; }
.product-tile .p-stock.low { color: var(--amber); }
.product-tile .p-stock.out { color: var(--stamp); }
.product-tile:disabled { opacity: 0.4; cursor: not-allowed; }

/* Receipt / cart panel */

#receipt-panel {
  flex: 0 0 300px;
  min-width: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

#receipt-panel h3 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 0.6rem;
}

#printable-receipt { margin: 0 auto; color: var(--ink); }
#printable-receipt.receipt-size-2in { width: 48mm; font-size: 0.78rem; }
#printable-receipt.receipt-size-3in { width: 72mm; font-size: 0.86rem; }
#printable-receipt.receipt-size-a5 { width: 148mm; font-size: 1rem; }
#printable-receipt.receipt-size-a4 { width: 190mm; font-size: 1rem; }
#printable-receipt input { color: var(--ink); }
#printable-receipt .receipt-datetime,
#printable-receipt .receipt-payment-info { color: var(--ink); font-weight: 500; }
#printable-receipt .receipt-datetime { margin-top: 0.3rem; }
#printable-receipt .receipt-payment-info { margin-top: 0.4rem; }
#printable-receipt .receipt-customer { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: 0 0 0.55rem; padding: 0.4rem 0; line-height: 1.35; }

@media print {
  html, body { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
  body * { visibility: hidden; }
  #printable-receipt, #printable-receipt * { visibility: visible; }
  #modal-backdrop { visibility: visible; position: absolute !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; background: transparent !important; }
  #modal-content { visibility: visible; position: static !important; display: block !important; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
  #modal-content > h3, #modal-content > .modal-actions { display: none !important; }
  #printable-receipt { position: static; margin-left: auto; margin-right: auto; max-width: calc(100vw - 16mm); overflow-wrap: anywhere; }
  #printable-receipt.receipt-size-a5 { width: 148mm; }
  #printable-receipt.receipt-size-a4 { width: 190mm; }
  #printable-receipt.receipt-size-a5,
  #printable-receipt.receipt-size-a4 { max-width: calc(100vw - 16mm); }
  #printable-receipt { break-before: avoid; break-after: avoid; page-break-before: avoid; page-break-after: avoid; }
  @page { margin: 8mm; }
}

#cart-lines { flex: 1; overflow-y: auto; }

.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--line);
  gap: 0.4rem;
}
.cart-line .cl-name { flex: 1; }
.cart-line .cl-qty-ctrl { display: flex; align-items: center; gap: 0.3rem; }
.cart-line .cl-qty-ctrl button {
  width: 20px; height: 20px; border-radius: 3px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; font-size: 0.75rem; line-height: 1;
}

.cart-empty { color: var(--muted); font-size: 0.82rem; padding: 1rem 0; text-align: center; }

.receipt-totals { border-top: 1px dashed var(--line); margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.85rem; }
.receipt-totals .row { display: flex; justify-content: space-between; padding: 0.15rem 0; }
.receipt-totals .grand { font-weight: 700; font-size: 1.05rem; margin-top: 0.3rem; }

.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 0.4rem;
  margin: 0.7rem 0;
  width: 100%;
}
.pay-methods button {
  min-width: 0;
  min-height: 52px;
  padding: 0.45rem 0.35rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pay-methods button.selected { background: var(--paper-raised); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.payment-heading { font-family: "IBM Plex Mono", monospace; font-size: 0.76rem; color: var(--muted); margin-top: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.split-payment-toggle { display:flex; align-items:center; gap:.5rem; margin:.45rem 0; font-size:.84rem; cursor:pointer; }
.split-payment-editor { display:grid; gap:.45rem; margin:.45rem 0 .7rem; }
.split-payment-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(5.5rem,.7fr) auto; gap:.4rem; }
.split-payment-row select,.split-payment-row input { min-width:0; width:100%; min-height:2.5rem; padding:.4rem; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); }
.split-payment-status { font-size:.8rem; font-weight:600; color:var(--muted); }
.split-payment-status[data-valid="true"] { color:var(--ink); }
.split-payment-note { margin:0; color:var(--muted); font-size:.72rem; line-height:1.4; }

.cashflow-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cashflow-column { min-width: 0; overflow-x: auto; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px; padding: 0.8rem; }
.cashflow-column h3 { margin: 0 0 0.6rem; font-family: "IBM Plex Mono", monospace; font-size: 0.9rem; }
.income-column h3 { color: #3f7255; }
.outcome-column h3 { color: var(--stamp); }
.cashflow-column .data-table { min-width: 520px; }
.cashflow-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.cashflow-summary, .cashflow-balance-summary { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 4px; padding: 0.8rem; overflow-x: auto; }
.cashflow-summary h3, .cashflow-balance-summary h3 { margin: 0 0 0.6rem; font-family: "IBM Plex Mono", monospace; font-size: 0.9rem; }
.cashflow-balance-summary { margin-top: 1rem; }
.cashflow-balance-summary h3 { color: var(--ink); }
.cashflow-carry-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.25rem; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); font-size: .8rem; cursor: pointer; }
.cashflow-carry-toggle input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--sage); }
.cashflow-carry-note { margin: -.35rem 0 .85rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.balance-value { font-weight: 700; }

/* ---------- Tables (inventory, users, reports) ---------- */

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.data-table th, table.data-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
table.data-table th { color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: lowercase; }
.sales-report-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); }
.sales-report-table { min-width: 1360px; }
.sales-report-table th { position: sticky; top: 0; z-index: 1; background: var(--paper-raised); white-space: nowrap; text-transform: none; }
.sales-report-table td { vertical-align: top; }
.sales-report-table .report-sale-start td { border-top: 2px solid #dce7df; }
.sales-report-table .report-sale-meta { vertical-align: top; padding-top: .7rem; }
.sales-report-table .report-product-cell { min-width: 220px; }
.sales-report-table .report-product-details { display: block; margin-top: .2rem; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.sales-report-table .report-sale-total { font-weight: 750; white-space: nowrap; }
.sales-report-table .report-discount { color: #9b4a37; }
.report-sale-actions { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 190px; }
.report-sale-actions .btn { white-space: nowrap; }
.report-sale-actions select { max-width: 100%; }
.sales-report-table .report-empty { padding: 1.4rem; color: var(--muted); text-align: center; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.6rem; }

/* ---------- Stat cards (reports) ---------- */

.stat-row { display: flex; gap: 0.8rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.stat-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.85rem 1.1rem;
  min-width: 140px;
}
.stat-card .label { font-size: 0.72rem; color: var(--muted); }
.stat-card .value { font-family: "IBM Plex Mono", monospace; font-size: 1.35rem; margin-top: 0.15rem; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(28,36,48,0.35);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--paper-raised);
  border-radius: 6px;
  padding: 1.5rem;
  width: 380px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal h3 { font-family: "IBM Plex Mono", monospace; margin-top: 0; font-size: 1rem; }
.field { margin-bottom: 0.8rem; }
.field label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; }
.field input, .field select {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 4px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }

/* ---------- Settings / Drive ---------- */

.drive-status { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 1rem; }
.settings-block { max-width: 480px; margin-bottom: 1.75rem; }
.bug-report-block { width:min(100%, 760px); max-width:760px; padding:0; border:0; background:transparent; }
.bug-report-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper-raised); box-shadow:0 12px 32px rgba(25,32,42,.08); }
.bug-report-header { display:flex; align-items:center; gap:.85rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper-raised) 86%,var(--stamp) 14%); }
.bug-report-mark { display:grid; flex:0 0 2.65rem; width:2.65rem; height:2.65rem; place-items:center; border:1px solid color-mix(in srgb,var(--stamp) 30%,var(--line)); border-radius:10px; background:var(--paper); color:var(--stamp); font-size:1.25rem; font-weight:800; }
.bug-report-card .bug-report-header h3 { margin:0 0 .18rem; font-family:inherit; font-size:1rem; }
.bug-report-card .bug-report-header p { margin:0; color:var(--muted); font-size:.8rem; }
.bug-report-fields { display:grid; gap:1rem; padding:1.2rem 1.25rem 1.25rem; }
.bug-report-field,.bug-report-choice-field { display:grid; min-width:0; gap:.4rem; margin:0; padding:0; border:0; color:var(--ink); font-size:.78rem; font-weight:650; }
.bug-report-field input,.bug-report-field textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); color:var(--ink); font:inherit; font-weight:450; }
.bug-report-field input { min-height:2.75rem; padding:.65rem .75rem; }
.bug-report-field textarea { min-height:6.2rem; padding:.7rem .75rem 1.55rem; resize:vertical; line-height:1.5; }
.bug-report-input-wrap { display:flex; align-items:center; gap:.6rem; padding-left:.75rem; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); color:var(--muted); }
.bug-report-input-wrap:focus-within,.bug-report-field textarea:focus { outline:2px solid color-mix(in srgb,var(--stamp) 35%,transparent); outline-offset:1px; }
.bug-report-input-wrap input { border:0; background:transparent; outline:none; box-shadow:none; }
.bug-report-description-wrap { position:relative; display:block; }
.bug-report-counter { position:absolute; right:.65rem; bottom:.45rem; color:var(--muted); font-size:.68rem; font-weight:450; }
.bug-report-choice-field legend { margin-bottom:.45rem; padding:0; }
.bug-report-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.bug-choice { display:flex; min-width:0; min-height:2.45rem; align-items:center; justify-content:center; gap:.38rem; padding:.45rem .55rem; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); color:var(--muted); font:inherit; font-size:.75rem; font-weight:550; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.bug-choice:hover { border-color:var(--stamp); color:var(--ink); transform:translateY(-1px); }
.bug-choice.is-selected { border-color:var(--stamp); background:color-mix(in srgb,var(--paper-raised) 86%,var(--stamp) 14%); color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stamp) 28%,transparent); }
.bug-report-priorities { grid-template-columns:repeat(3,minmax(0,1fr)); }
.priority-dot { width:.52rem; height:.52rem; border-radius:50%; background:#87948a; }
.priority-low .priority-dot { background:#55a978; }.priority-medium .priority-dot { background:#d2a33d; }.priority-high .priority-dot { background:#c15d5d; }
.bug-report-state { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; clip-path:inset(50%); }
.bug-report-upload { position:relative; display:flex; min-height:4.25rem; align-items:center; gap:.7rem; padding:.7rem .8rem; border:1px dashed color-mix(in srgb,var(--stamp) 40%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--paper-raised) 92%,var(--stamp) 8%); cursor:pointer; }
.bug-report-upload:hover { border-color:var(--stamp); }
.bug-report-upload-icon { display:grid; flex:0 0 2.1rem; width:2.1rem; height:2.1rem; place-items:center; border-radius:8px; background:var(--paper); color:var(--stamp); font-size:1.2rem; font-weight:700; }
.bug-report-upload strong,.bug-report-upload small { display:block; }
.bug-report-upload strong { color:var(--ink); font-size:.76rem; }.bug-report-upload em { color:var(--muted); font-style:normal; font-weight:450; }
.bug-report-upload small { margin-top:.16rem; color:var(--muted); font-size:.68rem; font-weight:450; }
.bug-report-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.bug-report-file-name { max-width:35%; margin-left:auto; overflow:hidden; color:var(--muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.bug-report-note { margin:0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.bug-report-submit { display:flex; width:100%; min-height:2.9rem; align-items:center; justify-content:center; gap:.5rem; border-radius:8px; font-weight:650; }
@media(max-width:600px) { .bug-report-header { padding:1rem; }.bug-report-fields { gap:.85rem; padding:1rem; }.bug-report-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }.bug-report-priorities { grid-template-columns:repeat(3,minmax(0,1fr)); }.bug-report-file-name { max-width:30%; } }
.view-section#view-returns > .settings-block { width: 100%; max-width: none; }
.view-section#view-returns #return-matching-sales { width: 100%; max-width: none; }
.view-section#view-returns #return-matching-sales > div { width: 100% !important; max-width: none !important; }
.view-section#view-returns #return-matching-sales table { width: 100%; }
.view-section#view-returns > table.data-table { width: 100%; }
.settings-block h3 { font-family: "IBM Plex Mono", monospace; font-size: 0.9rem; margin-bottom: 0.5rem; }
.settings-block p { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.settings-toggle { display: flex; align-items: center; gap: 0.45rem; margin: 0.7rem 0 1rem; font-size: 0.85rem; }
.settings-toggle input { width: 1rem; height: 1rem; accent-color: var(--stamp); }

.toast {
  position: fixed; bottom: 1.2rem; right: 1.2rem;
  background: var(--ink); color: #fff; padding: 0.7rem 1rem; border-radius: 4px;
  font-size: 0.85rem; opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #257942; }
.toast.error { background: #b42318; }

/* ---------- Product photos ---------- */

.product-tile .p-photo {
  width: 100%; height: 64px; object-fit: cover; border-radius: 3px; margin-bottom: 0.4rem; background: var(--paper);
}
.table-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; display: block; }
.table-thumb-placeholder { width: 34px; height: 34px; border-radius: 3px; background: var(--paper); border: 1px dashed var(--line); }

/* ---------- Payment methods list (settings) ---------- */

.payment-method-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 4px; padding: 0.4rem 0.6rem; font-size: 0.85rem;
}

/* ---------- Sales chart ---------- */

#sales-chart-wrap {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem;
}
.chart-legend { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--muted); margin-top: 0.4rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

@media (max-width: 1000px) {
  #sales-layout { flex-direction: column; height: auto; }
  #product-grid-wrap { flex: 1 1 auto; width: 100%; }
  #receipt-panel { flex: 1 1 auto; width: auto; }
}
@media (max-width: 760px) {
  body { flex-direction: column; }
  nav.sidebar { width: 100%; flex-direction: row; overflow-x: auto; align-items: center; }
  .nav-group { display: contents; }
  .nav-group-label { display: none; }
  .nav-spacer { display: none; }
  #sales-layout { flex-direction: column; height: auto; }
  #product-grid-wrap { flex: 1 1 auto; width: 100%; }
  #receipt-panel { flex: 1 1 auto; width: auto; }
  .cashflow-columns { grid-template-columns: 1fr; }
  .cashflow-summary-grid { grid-template-columns: 1fr; }
}


/* ---------- Counter overview redesign ---------- */
#app-screen.active { min-height: 100vh; background: #fff; }
nav.sidebar { background: #f5faf7; border-color: #e2ebe5; padding: 1.1rem .8rem .9rem; }
.brand { color: #394c43; font-family: Inter, system-ui, sans-serif; font-size: 1.12rem; letter-spacing: -.035em; padding: .2rem .5rem .7rem; margin-bottom: .25rem; }
.brand span { color: var(--brand-red); font-weight: 800; }
.nav-btn { border-radius: 7px; padding: .48rem .62rem; min-height: 2.15rem; line-height: 1.3; transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-btn:hover { background: #e7f4ec; color: #285b43; }
.nav-btn.active { background: #dff2e6; color: #245b40; font-weight: 700; box-shadow: inset 3px 0 #72b98d; }
#logout-btn { background: #fff; }
.theme-toggle { display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 2.25rem; margin: .15rem 0 .5rem; padding: .48rem .62rem; border: 1px solid #dfe9e3; border-radius: 8px; background: transparent; color: #42534a; text-align: left; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.theme-toggle:hover,.theme-toggle:focus-visible { background: #e7f4ec; color: #285b43; outline: none; }
main.view { background: #fff; padding: clamp(1.1rem, 2.5vw, 2.3rem); }
.view-section#view-dashboard { width: 100%; max-width: 1500px; margin: 0 auto; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.dashboard-heading h1 { margin: .12rem 0 .2rem; font-size: clamp(1.65rem, 3vw, 2.1rem); letter-spacing: -.045em; }
.dashboard-heading p { margin: .2rem 0 0; color: #727c75; font-size: .9rem; }
.dashboard-heading .dashboard-eyebrow { color: #56856b; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.dashboard-heading .btn { background: #fff; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dashboard-stat-card { min-width: 0; text-align: left; display: grid; gap: .5rem; padding: 1.05rem 1.15rem; background: #fff; border: 1px solid #e7ece8; border-radius: 12px; box-shadow: 0 2px 10px #183a2510; color: var(--ink); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.dashboard-stat-card:hover { transform: translateY(-2px); box-shadow: 0 7px 18px #183a2517; }
.dashboard-stat-card > span { font-size: .83rem; color: #68746c; }
.dashboard-stat-card strong { font-family: "IBM Plex Mono", monospace; font-size: clamp(1.15rem, 2vw, 1.55rem); overflow-wrap: anywhere; }
.dashboard-stat-card small { font-size: .73rem; color: #858e88; }
.dashboard-stat-card.mint { border-top: 3px solid #7cc49a; }
.dashboard-stat-card.blue { border-top: 3px solid #88b6d5; }
.dashboard-stat-card.peach { border-top: 3px solid #e6aa8d; }
.dashboard-stat-card.lilac { border-top: 3px solid #b8a4d6; }
.dashboard-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-panel { min-width: 0; padding: 1.1rem 1.2rem; border: 1px solid #e7ece8; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px #183a250a; }
.dashboard-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.dashboard-panel-heading h2 { font-size: 1rem; margin: 0; }
.dashboard-panel-heading p { color: #858e88; font-size: .76rem; margin: .35rem 0 0; }
.dashboard-text-link { border: 0; padding: .25rem 0; background: transparent; color: #47815f; font-size: .77rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dashboard-sales-chart { height: 220px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; align-items: stretch; margin-top: 1rem; padding-top: .3rem; }
.dashboard-chart-column { display: grid; grid-template-rows: 1fr auto; min-width: 0; text-align: center; gap: .55rem; color: #828c85; font-size: .72rem; }
.dashboard-chart-track { display: flex; align-items: end; height: 100%; border-bottom: 1px solid #e9efeb; background: repeating-linear-gradient(to bottom, transparent 0, transparent 24%, #f1f4f2 25%); }
.dashboard-chart-track span { display: block; width: min(46px, 72%); margin: 0 auto; min-height: 0; background: linear-gradient(180deg, #9dd5b0, #5ea77b); border-radius: 5px 5px 0 0; transition: height .25s ease; }
.dashboard-list { margin-top: .75rem; }
.dashboard-list-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .72rem 0; border-bottom: 1px solid #eff2f0; font-size: .83rem; }
.dashboard-list-row:last-child { border-bottom: 0; }
.dashboard-list-row > span { min-width: 0; display: flex; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.dashboard-list-row small { display: block; color: #828c85; font-size: .72rem; }
.dashboard-list-row b { flex: 0 0 auto; color: #50765e; font-family: "IBM Plex Mono", monospace; font-size: .76rem; }
.dashboard-list-row i { display: grid; place-items: center; flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; background: #eaf5ee; color: #52785e; font-size: .72rem; font-style: normal; }
.dashboard-empty { color: #818a84; font-size: .83rem; line-height: 1.55; padding: .55rem 0; }
.dashboard-shortcuts { display: grid; gap: .4rem; margin-top: .6rem; }
.dashboard-shortcuts button { display: flex; justify-content: space-between; gap: .6rem; padding: .72rem .2rem; border: 0; border-bottom: 1px solid #eff2f0; background: #fff; text-align: left; color: #34493b; cursor: pointer; }
.dashboard-shortcuts button:hover { color: #328457; }
.dashboard-shortcuts button span { color: #6da17d; }
#view-dashboard [hidden] { display: none !important; }

/* Counter POS motion: brief view transitions and clear tactile feedback. */
.view-section.active { animation: pos-view-enter .2s cubic-bezier(.2,.65,.3,1) both; }
.product-tile { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.product-tile:hover:not(:disabled),.product-tile:focus-visible:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,36,48,.09); }
.pay-btn,.checkout-btn,.btn { transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; }
.pay-btn:hover:not(:disabled),.btn:hover:not(:disabled) { transform: translateY(-1px); }
.pay-btn:active:not(:disabled),.btn:active:not(:disabled) { transform: scale(.985); }
.modal-backdrop.active .modal { animation: pos-modal-enter .18s cubic-bezier(.2,.65,.3,1) both; }
.toast.success::before { content: "✓"; display: inline-block; margin-right: .45rem; font-weight: 800; }
@keyframes pos-view-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pos-modal-enter { from { opacity: 0; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .view-section.active,.modal-backdrop.active .modal { animation: none !important; }
  .product-tile,.pay-btn,.checkout-btn,.btn { transition: none !important; }
  .product-tile:hover:not(:disabled),.product-tile:focus-visible:not(:disabled),.pay-btn:hover:not(:disabled),.btn:hover:not(:disabled),.pay-btn:active:not(:disabled),.btn:active:not(:disabled) { transform: none !important; }
}
@media (max-width: 1000px) { .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  nav.sidebar { background: #f5faf7; }
  main.view { height: auto; min-height: calc(100vh - 6rem); padding: 1rem; }
  .dashboard-content-grid { grid-template-columns: 1fr; }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-sales-chart { height: 180px; }
  #view-cashflow > .toolbar { align-items: stretch; flex-direction: column; }
}

/* POS day/night themes. The login screen remains unchanged. */
#app-screen[data-theme="night"] {
  --ink: #e4ece7;
  --paper: #111815;
  --paper-raised: #1b2520;
  --line: #35433c;
  --stamp: #cb7568;
  --stamp-dark: #b45c51;
  --brand-red: #ee777c;
  --brand-red-dark: #dc626a;
  --muted: #a9b5ad;
  color: var(--ink);
  color-scheme: dark;
  background: var(--paper);
}
#app-screen[data-theme="night"] nav.sidebar { background: #18221d; border-color: #303d36; }
#app-screen[data-theme="night"] .brand { color: #dce9e0; }
#app-screen[data-theme="night"] .nav-group-toggle { color: #a1afa6; }
#app-screen[data-theme="night"] .nav-group-toggle:hover,
#app-screen[data-theme="night"] .nav-group-toggle:focus-visible,
#app-screen[data-theme="night"] .nav-btn:hover,
#app-screen[data-theme="night"] .theme-toggle:hover,
#app-screen[data-theme="night"] .theme-toggle:focus-visible { background: #263b30; color: #c2e2cc; }
#app-screen[data-theme="night"] .nav-group-items { border-color: #394a40; }
#app-screen[data-theme="night"] .nav-btn.active { background: #294432; color: #d4eedb; box-shadow: inset 3px 0 #79bd91; }
#app-screen[data-theme="night"] .theme-toggle { border-color: #3a4a40; color: #d5e2d9; }
#app-screen[data-theme="night"] #logout-btn { background: #202c26; color: #e4ece7; border-color: #3a4a40; }
#app-screen[data-theme="night"] main.view,
#app-screen[data-theme="night"] #app-screen.active { background: #111815; }
#app-screen[data-theme="night"] .dashboard-heading p,
#app-screen[data-theme="night"] .dashboard-stat-card > span,
#app-screen[data-theme="night"] .dashboard-stat-card small,
#app-screen[data-theme="night"] .dashboard-panel-heading p,
#app-screen[data-theme="night"] .dashboard-chart-column,
#app-screen[data-theme="night"] .dashboard-list-row small,
#app-screen[data-theme="night"] .dashboard-empty { color: #aab7ae; }
#app-screen[data-theme="night"] .dashboard-eyebrow,
#app-screen[data-theme="night"] .dashboard-text-link { color: #9bd0aa; }
#app-screen[data-theme="night"] .dashboard-stat-card,
#app-screen[data-theme="night"] .dashboard-panel { background: #1a241f; border-color: #34423a; color: #e4ece7; box-shadow: 0 2px 12px #0004; }
#app-screen[data-theme="night"] .dashboard-heading .btn { background: #202c26; color: #e4ece7; border-color: #3a4a40; }
#app-screen[data-theme="night"] .dashboard-chart-track { border-color: #3a4940; background: repeating-linear-gradient(to bottom, transparent 0, transparent 24%, #27332c 25%); }
#app-screen[data-theme="night"] .dashboard-list-row,
#app-screen[data-theme="night"] .dashboard-shortcuts button { border-color: #34423a; }
#app-screen[data-theme="night"] .dashboard-list-row b,
#app-screen[data-theme="night"] .dashboard-shortcuts button { color: #c9dfd0; }
#app-screen[data-theme="night"] .dashboard-list-row i { background: #293d30; color: #c3e2cc; }
#app-screen[data-theme="night"] .dashboard-shortcuts button span { color: #9bd0aa; }
#app-screen[data-theme="night"] input:not([type="checkbox"]):not([type="radio"]),
#app-screen[data-theme="night"] select,
#app-screen[data-theme="night"] textarea { background-color: #1b2520; color: #e4ece7; border-color: #3a4940; }
#app-screen[data-theme="night"] .settings-block,
#app-screen[data-theme="night"] .cashflow-column,
#app-screen[data-theme="night"] .cashflow-summary,
#app-screen[data-theme="night"] .cashflow-balance-summary,
#app-screen[data-theme="night"] .modal { background-color: #1a241f; color: #e4ece7; border-color: #34423a; }
#app-screen[data-theme="night"] .cashflow-carry-toggle { background: #1b2520; color: #e4ece7; border-color: #3a4940; }
#app-screen[data-theme="night"] .warranty-status.is-valid { background: #234330; color: #bfe6ca; }
#app-screen[data-theme="night"] .warranty-status.is-invalid { background: #4a2928; color: #f0bfba; }
#app-screen[data-theme="night"] #printable-receipt { background: #fff !important; color: #1c2430 !important; }
#app-screen[data-theme="night"] #printable-receipt * { color: inherit; }
@media (max-width: 460px) {
  .dashboard-stat-grid { gap: .6rem; }
  .dashboard-stat-card { padding: .85rem; }
  .dashboard-heading .btn { padding: .45rem .6rem; font-size: .78rem; }
  .dashboard-panel { padding: .9rem; }
}

/* Keep the app shell inside the viewport so the sidebar cannot spill below it. */
#app-screen.active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}
nav.sidebar {
  flex: 0 0 250px;
  width: 250px;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
main.view {
  flex: 1 1 0;
  width: 0;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-spacer { flex: 1 0 .5rem; }
@media (max-width: 760px) {
  #app-screen.active { flex-direction: column; }
  nav.sidebar {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 42dvh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: .35rem;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
  }
  nav.sidebar .brand,
  nav.sidebar .nav-spacer,
  nav.sidebar .theme-toggle,
  nav.sidebar .who-am-i,
  nav.sidebar #logout-btn { grid-column: 1 / -1; }
  nav.sidebar .nav-group { display: flex; width: 100%; min-width: 0; }
  nav.sidebar .nav-group-toggle { min-height: 2.4rem; padding: .5rem .55rem; font-size: .61rem; }
  nav.sidebar .nav-group-items { min-width: 0; }
  nav.sidebar .nav-btn { width: 100%; min-width: 0; white-space: normal; }
  main.view {
    flex: 1 1 0;
    width: 100%;
    height: 0;
    min-height: 0;
    overflow-y: auto;
  }
}

.setup-currency-row { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.setup-logo-label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; }
.setup-logo-label select { width: 100%; min-width: 0; }
.timezone-help { display: block; margin-top: .35rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* Keep the theme accents and hover colors; use black/white for core actions and selection. */
:root {
  --stamp: #111111;
}
.btn-primary { background: #111111; border-color: #111111; color: #ffffff; }
#login-screen .login-card .btn-primary { background: #111111; border-color: #111111; color: #ffffff; }
#login-screen .login-card .btn-primary:hover { background: #b91520; border-color: #b91520; }
nav.sidebar { background: #f3f3f3; border-color: #d8d8d8; }
.brand { color: #171717; }
.nav-btn.active { background: #111111; color: #ffffff; box-shadow: inset 3px 0 #111111; }

#app-screen[data-theme="night"] {
  --ink: #f2f2f2;
  --paper: #101010;
  --paper-raised: #1b1b1b;
  --line: #383838;
  --stamp: #f2f2f2;
  --muted: #aaaaaa;
  color-scheme: dark;
}
#app-screen[data-theme="night"] nav.sidebar { background: #191919; border-color: #383838; }
#app-screen[data-theme="night"] .brand { color: #f2f2f2; }
#app-screen[data-theme="night"] .nav-btn.active { background: #f2f2f2; color: #111111; box-shadow: inset 3px 0 #ffffff; }
#app-screen[data-theme="night"] main.view,
#app-screen[data-theme="night"] #app-screen.active { background: #101010; }
#app-screen[data-theme="night"] .dashboard-stat-card,
#app-screen[data-theme="night"] .dashboard-panel,
#app-screen[data-theme="night"] .settings-block,
#app-screen[data-theme="night"] .cashflow-column,
#app-screen[data-theme="night"] .cashflow-summary,
#app-screen[data-theme="night"] .cashflow-balance-summary,
#app-screen[data-theme="night"] .modal { background-color: #191919; border-color: #383838; }
#app-screen[data-theme="night"] input:not([type="checkbox"]):not([type="radio"]),
#app-screen[data-theme="night"] select,
#app-screen[data-theme="night"] textarea { background-color: #1b1b1b; color: #f2f2f2; border-color: #444444; }
#app-screen[data-theme="night"] .btn-primary { background: #f2f2f2; color: #111111; border-color: #f2f2f2; }
#app-screen[data-theme="night"] .btn-primary:hover { background: #b45c51; color: #ffffff; border-color: #b45c51; }
#app-screen[data-theme="night"] .bug-report-block { background: transparent; border: 0; }
#app-screen[data-theme="night"] .bug-report-header { background: #202020; }
#app-screen[data-theme="night"] .bug-report-mark,
#app-screen[data-theme="night"] .bug-report-upload-icon { background: #292929; }

/* Monochrome hover feedback; retain the existing transitions and motion. */
:root { --stamp-dark: #333333; }
.btn-primary:hover { background: #333333; border-color: #333333; color: #ffffff; }
#login-screen .login-card .btn-primary:hover { background: #333333; border-color: #333333; color: #ffffff; }
.nav-group-toggle:hover, .nav-group-toggle:focus-visible,
.nav-btn:hover:not(.active), .theme-toggle:hover, .theme-toggle:focus-visible {
  background: #e5e5e5;
  color: #111111;
}
.dashboard-shortcuts button:hover,
.dashboard-shortcuts button:hover span { color: #111111; }
.dashboard-stat-card:hover { box-shadow: 0 7px 18px #00000017; }
.user-pick:hover { border-color: #111111; box-shadow: 0 8px 22px #00000012; }
#app-screen[data-theme="night"] { --stamp-dark: #d3d3d3; }
#app-screen[data-theme="night"] .btn-primary:hover { background: #d3d3d3; border-color: #d3d3d3; color: #111111; }
#app-screen[data-theme="night"] .nav-group-toggle:hover,
#app-screen[data-theme="night"] .nav-group-toggle:focus-visible,
#app-screen[data-theme="night"] .nav-btn:hover:not(.active),
#app-screen[data-theme="night"] .theme-toggle:hover,
#app-screen[data-theme="night"] .theme-toggle:focus-visible {
  background: #333333;
  color: #ffffff;
}
#app-screen[data-theme="night"] .dashboard-shortcuts button:hover,
#app-screen[data-theme="night"] .dashboard-shortcuts button:hover span { color: #ffffff; }
#app-screen[data-theme="night"] .dashboard-shortcuts button { background: #191919; }
#app-screen[data-theme="night"] .dashboard-shortcuts button:hover,
#app-screen[data-theme="night"] .dashboard-shortcuts button:focus-visible { background: #333333; }
#app-screen[data-theme="night"] .dashboard-stat-card:hover { box-shadow: 0 7px 18px #00000066; }

/* Collapsible navigation rail on wide screens, compact menu bar on phones. */
.sidebar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  min-width: 0;
  margin-bottom: .35rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.sidebar-topbar .brand { flex: 1 1 auto; min-width: 0; margin: 0; padding: .2rem .4rem; border: 0; }
.sidebar-collapse-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.sidebar-collapse-toggle .rail-svg { width: 1.3rem; height: 1.3rem; }
.rail-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav-rail-icon { display: grid; place-items: center; flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; }
.nav-label { min-width: 0; }
.rail-action-icon { display: none; }
.sidebar-collapse-toggle:hover, .sidebar-collapse-toggle:focus-visible { background: #e5e5e5; color: #111; outline: 2px solid transparent; }
nav.sidebar.sidebar-collapsed {
  flex: 0 0 76px;
  width: 76px;
  padding: .8rem .4rem;
  align-items: center;
}
nav.sidebar.sidebar-collapsed .sidebar-topbar { width: 100%; justify-content: center; }
nav.sidebar.sidebar-collapsed .sidebar-collapse-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 2.55rem;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0 auto;
  padding: 0;
}
nav.sidebar.sidebar-collapsed .sidebar-topbar .brand,
nav.sidebar.sidebar-collapsed .nav-group-toggle,
nav.sidebar.sidebar-collapsed .who-am-i { display: none; }
nav.sidebar.sidebar-collapsed .nav-group { width: 100%; margin: 0; }
nav.sidebar.sidebar-collapsed .nav-group-items { display: flex; flex-direction: column; align-items: center; gap: .22rem; width: 100%; margin: 0; padding: 0; border: 0; }
nav.sidebar.sidebar-collapsed .nav-btn {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.55rem;
  min-height: 2.55rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  text-align: center;
}
nav.sidebar.sidebar-collapsed .nav-rail-icon,
nav.sidebar.sidebar-collapsed .rail-action-icon {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  justify-self: center;
}
nav.sidebar.sidebar-collapsed .nav-btn::before,
nav.sidebar.sidebar-collapsed #theme-toggle::before,
nav.sidebar.sidebar-collapsed #logout-btn::before { content: none !important; }
nav.sidebar.sidebar-collapsed .nav-label { display: none !important; }
nav.sidebar.sidebar-collapsed .nav-rail-icon .rail-svg,
nav.sidebar.sidebar-collapsed .rail-action-icon .rail-svg { width: 1.4rem; height: 1.4rem; }
.sidebar-hover-label {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: calc(100vw - 1rem);
  padding: .42rem .62rem;
  border: 1px solid #454545;
  border-radius: 7px;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 5px 16px #00000030;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}
.sidebar-hover-label.visible { display: block; }
nav.sidebar.sidebar-collapsed #theme-toggle,
nav.sidebar.sidebar-collapsed #logout-btn {
  display: grid;
  place-items: center;
  flex: 0 0 2.55rem;
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.55rem;
  min-height: 2.55rem;
  margin: .2rem auto;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}
nav.sidebar.sidebar-collapsed .rail-action-label { display: none; }
#app-screen[data-theme="night"] .sidebar-collapse-toggle:hover,
#app-screen[data-theme="night"] .sidebar-collapse-toggle:focus-visible { background: #333333; color: #ffffff; }

/* Polished shared controls and responsive report filters. */
:root { --control-radius: 9px; --control-height: 2.65rem; }
.btn,
.login-card .btn,
.user-pick,
.nav-group-toggle,
.nav-btn,
.theme-toggle,
#logout-btn,
.pay-methods button,
.checkout-btn,
.pay-btn,
.cart-line .cl-qty-ctrl button,
.dashboard-stat-card,
.dashboard-shortcuts button,
.sidebar-collapse-toggle {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn {
  min-height: var(--control-height);
  padding: .58rem .95rem;
  border-radius: var(--control-radius);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px #1111110a;
}
.btn-sm { min-height: 2.15rem; padding: .38rem .7rem; border-radius: 7px; }
.btn:hover:not(:disabled) { box-shadow: 0 4px 12px #11111112; }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: none; }
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.login-restore-picker:focus-within {
  outline: 3px solid rgba(28, 36, 48, .28);
  outline-offset: 2px;
}
#app-screen[data-theme="night"] .btn:focus-visible,
#app-screen[data-theme="night"] button:focus-visible,
#app-screen[data-theme="night"] input:focus-visible,
#app-screen[data-theme="night"] select:focus-visible,
#app-screen[data-theme="night"] textarea:focus-visible { outline-color: rgba(242, 242, 242, .45); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-width: 0;
  min-height: var(--control-height);
  padding: .58rem .75rem;
  border-radius: 8px;
}
.report-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: .85rem;
  margin: 0 0 1.1rem;
}
.report-filters > label { display: grid; min-width: 0; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 650; }
.report-filters select, .report-filters input { width: 100%; min-width: 0; }
.report-filters [hidden] { display: none !important; }
.report-range-field { grid-column: span 1; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.stat-card { min-width: 0; border-radius: 10px; padding: 1rem 1.1rem; }
.stat-card .value { overflow-wrap: anywhere; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.modal { width: min(42rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 70px #1111112b; }

.product-measurement-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem .8rem; margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft,var(--surface)); }
.product-measurement-fields h4,.product-measurement-fields .muted { grid-column:1/-1; margin:.15rem 0 .45rem; }
.product-measurement-fields .settings-toggle { align-self:center; }
.p-unit-price { display:block; color:var(--muted); font-size:.72rem; margin-top:.12rem; }
.expiry-batch-row,.expiry-unassigned { display:block; white-space:nowrap; font-size:.76rem; padding:.1rem 0; }
.expiry-batch-row[data-expired="true"] { color:var(--danger,#9f2929); font-weight:700; }
.expiry-batch-row[data-soon="true"] { color:var(--warning,#805d19); font-weight:650; }
.expiry-unassigned { color:var(--muted); }
.purchase-line .purchase-expiry-date { min-width:10rem; }
@media (max-width:760px) {
  .product-measurement-fields { grid-template-columns:minmax(0,1fr); }
  .product-measurement-fields h4,.product-measurement-fields .muted { grid-column:1; }
  .purchase-line { grid-template-columns:minmax(0,1fr) minmax(6rem,.6fr) minmax(6rem,.6fr) minmax(7rem,.7fr) minmax(10rem,1fr) auto !important; overflow-x:auto; }
}
.dashboard-stat-card, .dashboard-panel { border-radius: 14px; }
.activation-card, .login-card { border-radius: 12px; }
.view-section { min-width: 0; }
.toolbar { justify-content: flex-start; flex-wrap: wrap; align-items: end; gap: .7rem; }
.toolbar > input[type="text"] { flex: 1 1 14rem; width: auto !important; }
.toolbar > select { flex: 1 1 11rem; max-width: 100%; }
.toolbar > .btn { flex: 0 0 auto; white-space: nowrap; }
.data-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.modal-actions { flex-wrap: wrap; }
.modal-actions .btn { min-width: 7rem; }
.dashboard-text-link { display: inline-flex; align-items: center; min-height: 2.4rem; }
.dashboard-shortcuts button { min-height: 2.8rem; }
.theme-toggle { min-height: var(--control-height); border-radius: var(--control-radius); }
#logout-btn { min-height: var(--control-height); padding: .58rem .95rem; border-radius: var(--control-radius); font-weight: 600; }
.cashflow-carry-toggle { min-height: var(--control-height); border-radius: var(--control-radius); }
.cart-line .cl-qty-ctrl button { width: 2rem; min-width: 2rem; height: 2rem; padding: 0; border-radius: 7px; font-size: 1rem; font-weight: 700; }
.pay-methods button:hover:not(:disabled) { border-color: var(--ink); box-shadow: 0 4px 12px #11111116; transform: translateY(-1px); }
#app-screen[data-theme="night"] .pay-methods button:hover:not(:disabled) { background: #303030; border-color: #f2f2f2; }
.history-filters label, #view-returns .toolbar label { display: grid; gap: .35rem; min-width: min(100%, 13rem); color: var(--muted); font-size: .78rem; font-weight: 650; }
.history-filters select, #view-returns .toolbar select { min-width: 0; width: 100%; }
#purchase-lines .purchase-line { min-width: 0; }
@media (max-width: 1100px) {
  .report-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-range-field { grid-column: auto; }
  .cashflow-columns, .cashflow-summary-grid { grid-template-columns: minmax(0, 1fr); }
  #purchase-lines .purchase-line { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #purchase-lines .purchase-line .purchase-product { grid-column: 1 / -1; }
  #purchase-lines .purchase-line .purchase-remove-line { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .report-filters > label { font-size: .75rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .stat-card { padding: .85rem; }
  .modal { width: min(38rem, calc(100vw - 1.25rem)); max-height: calc(100dvh - 1.25rem); padding: 1.1rem; }
  .toolbar { align-items: stretch; }
  #view-inventory .toolbar > input { flex-basis: 100%; }
  #view-inventory .toolbar > select { flex: 1 1 12rem; }
  #purchase-lines .purchase-line { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #purchase-lines .purchase-line .purchase-product { grid-column: 1 / -1; }
  #purchase-lines .purchase-line .purchase-remove-line { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .report-filters { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .btn { padding-inline: .75rem; }
  .setup-currency-row { grid-template-columns: minmax(0, 1fr); }
  #setup-entry input { min-height: 2.8rem; padding-inline: .75rem; font-size: 16px; }
}
@media (max-width: 900px) { .warranty-sale-item { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .login-card .btn, .user-pick, .nav-group-toggle, .nav-btn, .theme-toggle,
  #logout-btn, .pay-methods button, .checkout-btn, .pay-btn, .cart-line .cl-qty-ctrl button,
  .dashboard-stat-card, .dashboard-shortcuts button, .sidebar-collapse-toggle { transition: none !important; }
}

@media (max-width: 760px) {
  nav.sidebar .sidebar-topbar { grid-column: 1 / -1; width: 100%; }
  nav.sidebar.sidebar-collapsed {
    flex: 0 0 3.5rem;
    width: 100%;
    height: 3.5rem;
    max-height: 3.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .25rem .55rem;
    overflow: hidden;
  }
  nav.sidebar.sidebar-collapsed .sidebar-topbar {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }
  nav.sidebar.sidebar-collapsed .sidebar-topbar .brand {
    display: block;
    overflow: hidden;
    padding: .2rem .45rem;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  nav.sidebar.sidebar-collapsed .brand #store-brand-label { display: block; overflow: hidden; text-overflow: ellipsis; }
  nav.sidebar.sidebar-collapsed .nav-group,
  nav.sidebar.sidebar-collapsed .nav-spacer,
  nav.sidebar.sidebar-collapsed .theme-toggle,
  nav.sidebar.sidebar-collapsed .who-am-i,
  nav.sidebar.sidebar-collapsed #logout-btn { display: none !important; }
  nav.sidebar.sidebar-collapsed .sidebar-collapse-toggle { flex-basis: 2.6rem; width: 2.6rem; height: 2.6rem; }
  .sidebar-hover-label { display: none !important; }
}

/* Mobile-first app shell and install guidance */
.install-guide-block { max-width: 54rem; }
.install-guide-block h3 { margin-top: 0; }
.install-guide-block p { max-width: 68ch; line-height: 1.55; }
.install-platform-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.install-platform-guide > div { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); line-height: 1.5; }
.install-platform-guide p { margin: .35rem 0 0; }
.install-secure-note { padding: .75rem .9rem; border-left: 3px solid var(--amber); background: var(--paper); }
.install-prelogin-help { font-size: .78rem !important; line-height: 1.45; color: var(--muted); }
.mobile-nav-backdrop { display: none; }
.mobile-tab-bar { display: none; }

@media (max-width: 820px) {
  .login-showcase { display: none !important; }
  .login-shell { display: block; width: min(100%, 34rem); min-height: 0; margin: 1rem; border-radius: 20px; }
  .login-card { min-height: min(100%, 42rem); padding: clamp(1.35rem, 6vw, 2.1rem); padding-top: 4.2rem; }
  #login-screen { min-height: 100vh; min-height: 100dvh; overflow-y: auto; padding: env(safe-area-inset-top) .25rem env(safe-area-inset-bottom); align-items: center; }
}

@media (max-width: 760px) {
  html, body { width: 100%; min-width: 320px; height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
  body.mobile-menu-visible { overflow: hidden; }
  #app-screen.active { position: fixed; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; }
  nav.sidebar, nav.sidebar.sidebar-collapsed {
    position: relative; z-index: 40; inset: auto; flex: 0 0 auto; display: flex; flex-direction: row;
    align-items: center; width: 100%; height: calc(3.65rem + env(safe-area-inset-top)); max-height: none;
    min-height: calc(3.65rem + env(safe-area-inset-top)); padding: calc(.35rem + env(safe-area-inset-top)) .75rem .35rem;
    overflow: visible; border: 0; border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px #1111110a;
  }
  nav.sidebar .sidebar-topbar, nav.sidebar.sidebar-collapsed .sidebar-topbar {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: auto; min-width: 0; margin: 0; padding: 0; border: 0;
  }
  nav.sidebar .brand, nav.sidebar.sidebar-collapsed .sidebar-topbar .brand {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: .15rem .25rem;
    font-size: 1rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
  }
  nav.sidebar .brand small { display: block; overflow: hidden; font-size: .63rem; text-overflow: ellipsis; }
  nav.sidebar .sidebar-product-mark { width: 1rem; height: 1rem; vertical-align: -.2rem; }
  .sidebar-collapse-toggle, nav.sidebar.sidebar-collapsed .sidebar-collapse-toggle {
    flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0;
    display: grid; place-items: center; border-radius: 11px; font-size: 1rem; touch-action: manipulation;
  }
  .sidebar-collapse-toggle .rail-svg { width: 1.35rem; height: 1.35rem; }
  nav.sidebar > .nav-group, nav.sidebar.sidebar-collapsed > .nav-group,
  nav.sidebar > .nav-spacer, nav.sidebar.sidebar-collapsed > .nav-spacer,
  nav.sidebar > .theme-toggle, nav.sidebar.sidebar-collapsed > .theme-toggle,
  nav.sidebar > .who-am-i, nav.sidebar.sidebar-collapsed > .who-am-i,
  nav.sidebar > #logout-btn, nav.sidebar.sidebar-collapsed > #logout-btn { display: none !important; }
  nav.sidebar.mobile-menu-open {
    position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; left: auto; display: flex; flex-direction: column;
    align-items: stretch; width: min(21rem, 86vw); height: 100dvh; max-height: none; min-height: 0;
    padding: calc(.75rem + env(safe-area-inset-top)) .85rem calc(.85rem + env(safe-area-inset-bottom));
    overflow-x: hidden; overflow-y: auto; border: 0; border-left: 1px solid var(--line); box-shadow: -15px 0 45px #0002;
    overscroll-behavior: contain; animation: mobile-drawer-in .24s cubic-bezier(.2,.75,.25,1) both;
  }
  nav.sidebar.mobile-menu-open .sidebar-topbar { flex: 0 0 auto; width: 100%; margin-bottom: .75rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
  nav.sidebar.mobile-menu-open .sidebar-collapse-toggle { order: 2; }
  nav.sidebar.mobile-menu-open .brand { flex: 1; }
  nav.sidebar.mobile-menu-open > .nav-group { display: block !important; width: 100%; margin: .1rem 0; }
  nav.sidebar.mobile-menu-open .nav-group-toggle { min-height: 2.6rem; padding-inline: .55rem; }
  nav.sidebar.mobile-menu-open .nav-group-items { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; width: 100%; margin: 0; padding: .1rem 0 .4rem .45rem; border-left: 2px solid var(--line); }
  nav.sidebar.mobile-menu-open .nav-btn { display: flex; width: 100%; min-height: 2.8rem; justify-content: flex-start; text-align: left; }
  nav.sidebar.mobile-menu-open .nav-btn .nav-label { display: inline; }
  nav.sidebar.mobile-menu-open > .nav-spacer { display: block !important; flex: 1 0 1rem; }
  nav.sidebar.mobile-menu-open > .theme-toggle, nav.sidebar.mobile-menu-open > .who-am-i,
  nav.sidebar.mobile-menu-open > #logout-btn { display: flex !important; width: 100%; margin-top: .45rem; }
  .mobile-nav-backdrop:not([hidden]) { position: fixed; z-index: 50; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: #10182080; backdrop-filter: blur(2px); }
  main.view { flex: 1 1 auto; width: 100%; min-width: 0; height: auto; min-height: 0; padding: .85rem .8rem 1rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .view-section { width: 100%; min-width: 0; }
  .view-section h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .dashboard-heading { align-items: flex-start; gap: .7rem; }
  .dashboard-heading .btn { min-height: 2.7rem; }
  .dashboard-content-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .dashboard-stat-card { min-width: 0; padding: .75rem; }
  .dashboard-stat-card .value { font-size: clamp(1rem, 4vw, 1.35rem); overflow-wrap: anywhere; }
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: .55rem; }
  .toolbar > input[type="text"] { grid-column: 1 / -1; width: 100% !important; }
  .toolbar > select { width: 100%; min-width: 0; }
  .toolbar > .btn { min-height: 2.75rem; white-space: normal; }
  #view-inventory .toolbar > .btn { grid-column: 1 / -1; width: 100%; }
  #view-customers .toolbar > #add-customer-btn,
  #view-users .toolbar > #add-user-btn { grid-column: 1 / -1; width: 100%; }
  #view-users .toolbar > div { display: none; }
  .search-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-items: stretch; }
  .search-row > input { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .search-row > select { width: 100%; min-width: 0; }
  .search-row > .btn { grid-column: 1 / -1; min-height: 2.75rem; }
  input, select, textarea, button { max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 2.75rem; font-size: 16px; }
  .btn, .nav-btn, .theme-toggle, #logout-btn { min-height: 2.75rem; touch-action: manipulation; }
  .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .report-filters > * { min-width: 0; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: none; max-height: min(90dvh, 52rem); padding: 1rem; border-radius: 18px 18px 0 0; overflow-x: hidden; overflow-y: auto; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .modal-actions { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); margin: .75rem -1rem calc(-1rem - env(safe-area-inset-bottom)); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--paper-raised); border-top: 1px solid var(--line); }
  #sales-layout { display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
  #sales-layout > * { min-width: 0; }
  #product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  #view-sales .product-card { min-height: 7rem; padding: .7rem; }
  #receipt-panel { position: sticky; bottom: 0; z-index: 4; max-height: 46dvh; overflow-y: auto; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px #00000012; }
  .install-platform-guide { grid-template-columns: minmax(0, 1fr); }
  .install-guide-block { padding: .9rem; }
  .login-shell { width: calc(100% - 1rem); margin: .5rem; }
  .login-card { padding-inline: 1.1rem; }
  .login-language-picker { top: .75rem; right: .75rem; }
  .setup-currency-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  #setup-entry { gap: .7rem; }
  .login-restore-box { margin-top: 1rem; }
  .install-prelogin-help { margin-top: .5rem !important; }
  .sidebar-hover-label { display: none !important; }
}

/* Mobile POS navigation: persistent high-frequency tabs plus the full right drawer. */
@media (max-width: 760px) {
  .mobile-tab-bar {
    position: relative; z-index: 20; display: grid; flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem;
    width: 100%; min-height: calc(4.15rem + env(safe-area-inset-bottom));
    padding: .4rem .55rem calc(.4rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--paper-raised);
    box-shadow: 0 -5px 20px #1111110a;
  }
  .mobile-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    min-width: 0; min-height: 3.15rem; padding: .25rem .15rem; border: 0; border-radius: 12px;
    background: transparent; color: var(--muted); font: inherit; font-size: .68rem; font-weight: 600;
    line-height: 1.1; cursor: pointer; touch-action: manipulation;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
  }
  .mobile-tab-icon { display: grid; place-items: center; width: 2.4rem; height: 1.7rem; border-radius: 999px; }
  .mobile-tab-icon .rail-svg { display: block; width: 1.28rem; height: 1.28rem; }
  .mobile-tab.active { color: var(--ink); }
  .mobile-tab.active .mobile-tab-icon { background: var(--paper); }
  .mobile-tab:active { transform: scale(.96); }
  .mobile-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  #app-screen[data-theme="night"] .mobile-tab-bar { background: #191919; border-color: #383838; box-shadow: 0 -5px 20px #0003; }
  #app-screen[data-theme="night"] .mobile-tab { color: #bcbcbc; }
  #app-screen[data-theme="night"] .mobile-tab.active { color: #fff; }
  #app-screen[data-theme="night"] .mobile-tab.active .mobile-tab-icon { background: #333; }
}

@media (max-width: 420px) {
  main.view { padding-inline: .65rem; }
  .dashboard-heading { flex-direction: column; }
  .dashboard-heading .btn { width: 100%; }
  .dashboard-stat-grid, .report-filters, .stat-row { grid-template-columns: minmax(0, 1fr); }
  .setup-currency-row { grid-template-columns: minmax(0, 1fr); }
  #product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid, .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .product-tile { min-height: 7.25rem; }
}

@keyframes mobile-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { nav.sidebar.mobile-menu-open { animation: none; } }


/* CounterNest neutral gray details and compact tablet sales layout. */
#app-screen[data-theme="night"] { --amber: #b8b8b8; }
.priority-medium .priority-dot { background: #777777; }
.sidebar-product-mark { width: 1.2rem; height: 1.2rem; object-fit: contain; border-radius: 4px; vertical-align: middle; }

@media (min-width: 761px) and (max-width: 1000px) {
  nav.sidebar { flex-basis: 210px; width: 210px; }
  main.view { padding: 1rem; }
  #view-inventory > .toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  #view-inventory > .toolbar > input { grid-column: 1 / -1; width: 100% !important; }
  #view-inventory > .toolbar > select { width: 100%; min-width: 0; }
  #view-inventory > .toolbar > .btn { grid-column: 1 / -1; width: 100%; }
  .search-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    align-items: stretch;
  }
  .search-row > input,
  .search-row > .btn { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .search-row > select { width: 100%; min-width: 0; }
}

/* User permissions remain readable on phones and wide forms. */
.user-role-permissions { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:12px 16px; }
.user-role-permissions label { display:flex; align-items:center; gap:8px; font-size:.875rem; min-height:36px; }
.field[hidden] { display:none !important; }

.edit-sale-split-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }

/* Support terms: comfortable reading on phone and desktop. */
#support-terms details { margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; overflow-wrap: anywhere; }
#support-terms summary { cursor: pointer; font-weight: 600; min-height: 44px; display: list-item; line-height: 1.7; }
#support-terms details h3 { margin: 1.2rem 0 .5rem; }
#support-terms details p { line-height: 1.9; max-width: 75ch; }

/* Align multi-control forms and keep compact summaries readable on phones. */
.purchase-supplier-row { display:flex; align-items:center; gap:.4rem; }
.purchase-supplier-row > select,
.purchase-supplier-row > input { flex:1 1 0; width:auto !important; min-width:0; }
.purchase-supplier-row > .btn { flex:0 0 auto; }

@media (max-width: 760px) {
  .purchase-supplier-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: .55rem;
  }
  .purchase-supplier-row #purchase-supplier { grid-column: 1 / -1; width: 100%; }
  .purchase-supplier-row #new-supplier { width: 100%; min-width: 0; }
  .purchase-supplier-row #add-supplier-btn { width: 100%; min-height: 2.75rem; }
  #view-sales .product-tile { min-height: 7rem; }
}

@media (min-width: 361px) and (max-width: 420px) {
  .dashboard-stat-grid,
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-stat-card { gap: .38rem; padding: .7rem; }
  .dashboard-stat-card > span { min-height: 2em; font-size: .75rem; line-height: 1.3; }
  .dashboard-stat-card strong { font-size: clamp(.95rem, 4vw, 1.2rem); line-height: 1.2; overflow-wrap: anywhere; }
  .dashboard-stat-card small { font-size: .66rem; line-height: 1.35; }
}

/* Consistent responsive finishing pass for the local review edition. */
.view-section { min-width: 0; }
.view-section > .toolbar { align-items: stretch; }
.view-section > .toolbar > input,
.view-section > .toolbar > select,
.view-section > .toolbar > .btn { min-height: 2.75rem; }
.settings-block { width: min(100%, 48rem); max-width: 48rem; }
.bug-report-block { width: min(100%, 48rem); max-width: 48rem; }
table.data-table th, table.data-table td { vertical-align: middle; }

@media (max-width: 760px) {
  .view-section > .toolbar { gap: .55rem; }
  .view-section > .toolbar > .btn { min-height: 2.75rem; }
  #view-customers .toolbar > #add-customer-btn,
  #view-users .toolbar > #add-user-btn { grid-column: 1 / -1; width: 100%; }
  #view-users .toolbar > div { display: none; }
  .settings-block, .bug-report-block { width: 100%; max-width: none; }
  table.data-table th, table.data-table td { white-space: nowrap; }
  table.data-table { scrollbar-width: thin; }
  .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-actions > .btn { width: 100%; min-width: 0; }
}

@media (max-width: 420px) {
  .view-section > .toolbar { gap: .5rem; }
  .modal-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Keep the activation language control in its own row instead of overlaying the logo. */
#activation-screen .login-language-picker { position: static; justify-self: end; max-width: 100%; margin: 0 0 .15rem; }
#activation-screen .activation-logo { margin-bottom: .35rem; }
@media (max-width: 480px) {
  #activation-screen .activation-card { padding-top: 1.25rem; }
}

/* Setup must retain its own scroll area above the fixed application shell. */
#login-screen {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: flex-start;
  overscroll-behavior-y: contain;
  padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
}
#login-screen .login-shell { flex-shrink: 0; margin-block: auto; }

/* Finance and employee panels share the full content width. */
#view-cashflow > .cn-panel, #view-users > .cn-panel { width: 100%; max-width: none; }
#view-cashflow > .cn-panel > .cn-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem) max-content;
  align-items: end;
}
#view-cashflow .cn-toolbar > label { display: grid; gap: .35rem; }
#view-cashflow .cn-toolbar > h3 { margin: 0; align-self: center; }
#cashflow-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
#view-cashflow > .toolbar > div { min-width: 0; }
#view-cashflow > .toolbar > div:first-child { align-items: end !important; flex: 1 1 30rem; }
#view-cashflow > .toolbar > div:first-child > label:not(.cashflow-carry-toggle) { display: grid; gap: .35rem; min-width: 0; }
#view-cashflow > .toolbar > div:last-child { align-items: end; }
@media (max-width: 760px) {
  #view-cashflow > .cn-panel > .cn-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #view-cashflow > .cn-panel > .cn-toolbar > h3 { grid-column: 1 / -1; }
  #view-cashflow > .cn-panel > .cn-toolbar > .btn { align-self: end; }
  #view-cashflow > .toolbar { grid-template-columns: minmax(0, 1fr); }
  #view-cashflow > .toolbar > div:first-child { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; flex-basis: auto; }
  #view-cashflow .cashflow-carry-toggle { grid-column: 1 / -1; }
  #view-cashflow > .toolbar > div:last-child { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  #view-cashflow > .toolbar > div:last-child > .btn:last-child { grid-column: 1 / -1; }
  #view-cashflow > .toolbar > div:last-child > .btn { flex: 1 1 8rem; }
  #view-cashflow input[type="month"], #view-cashflow select { width: 100%; min-width: 0; }
  #cashflow-stats .stat-card .value { font-size: clamp(1rem, 4.4vw, 1.35rem); }
}