/* ============================================================
   GOODMAN QS — Design System v2
   ============================================================ */
/* hook-test: verify atomic cache-bust commit (round 2) */

/* ===== Design Tokens ===== */
:root {
  --bg: #f0f2f5;
  --card: #ffffff;
  --accent: #00aa55;
  --accent-hover: #009948;
  --danger: #d63031;
  --danger-hover: #b52626;
  --ink: #1c1e2e;
  --ink-strong: #0d0f1a;
  --muted: #6b7280;
  --text: #1c1e2e;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --border-soft: #f3f4f6;
  --row-alt: #f8fafc;
  --row-hover: #ecfdf5;
  --header-bg: #f8f9fa;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --button-bg: #f8f9fa;
  --button-bg-alt: #f1f3f5;
  --button-bg-hover: #e9ecef;
  --pill-bg: #f1f3f5;
  --pill-bg-alt: #e2e8f0;
  --divider: #e5e7eb;
  --overlay-bg: rgba(0,0,0,0.5);
  --overlay-bg-strong: rgba(0,0,0,0.88);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-strong: 0 16px 40px rgba(0,0,0,0.14), 0 6px 14px rgba(0,0,0,0.08);
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --warning-border: #fcd34d;
  --warning-soft: #fef9c3;
  --warning-accent: #f59e0b;
  --info-bg: #eff6ff;
  --info-text: #1d4ed8;
  --info-border: #bfdbfe;
  --success-bg: #ecfdf5;
  --success-text: #065f46;
  --success-border: #a7f3d0;
  --error-bg: #fef2f2;
  --error-text: #991b1b;
  --error-border: #fecaca;
  --error-soft: #fff5f5;
  --link: #2563eb;
  --focus-ring: rgba(0,170,85,0.25);
}

/* ===== Dark Mode ===== */
:root[data-theme="dark"] {
  --bg: #0f1117;
  --card: #1c1f28;
  --accent: #00cc66;
  --accent-hover: #00b85c;
  --danger: #ff4f4f;
  --danger-hover: #e63e3e;
  --ink: #e8eaf0;
  --ink-strong: #f5f7ff;
  --muted: #9ca3af;
  --text: #e8eaf0;
  --text-muted: #9ca3af;
  --border: #2d3141;
  --border-strong: #3d4258;
  --border-soft: #232737;
  --row-alt: #252930;
  --row-hover: #1a2e24;
  --header-bg: #181b24;
  --input-bg: #252930;
  --input-border: #3d4258;
  --button-bg: #252930;
  --button-bg-alt: #2d3141;
  --button-bg-hover: #353a50;
  --pill-bg: #2d3141;
  --pill-bg-alt: #353a50;
  --divider: #2d3141;
  --overlay-bg: rgba(0,0,0,0.72);
  --overlay-bg-strong: rgba(0,0,0,0.93);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-strong: 0 16px 40px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.4);
  --warning-bg: #2d2406;
  --warning-text: #fbbf24;
  --warning-border: #78520a;
  --warning-soft: #1f1a03;
  --warning-accent: #f59e0b;
  --info-bg: #1e2a4a;
  --info-text: #93c5fd;
  --info-border: #2d4a8a;
  --success-bg: #1a2e24;
  --success-text: #6ee7b7;
  --success-border: #1f4a30;
  --error-bg: #2d1515;
  --error-text: #fca5a5;
  --error-border: #5c1515;
  --error-soft: #1f0e0e;
  --link: #60a5fa;
  --focus-ring: rgba(0,204,102,0.35);
}

/* ===== Base Reset ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  margin: 0;
  padding: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.auth-only {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

h1, h2, h3 { margin: 0 0 12px 0; font-weight: 700; line-height: 1.2; }

/* ===== Layout ===== */
.container {
  max-width: 980px;
  margin: auto;
}

.card {
  background: var(--card);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.pad-small {
  padding: 0 !important;
  border-radius: 0 !important;
}

.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--divider); margin: 6px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { margin-left: auto; }

@media (max-width:900px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* ===== Form Controls ===== */
input, button, select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input, select {
  min-width: 140px;
  border-color: var(--input-border);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--button-bg);
  color: var(--ink);
  font-weight: 500;
  user-select: none;
}

button:hover { background: var(--button-bg-hover); }
button:active { transform: translateY(1px); }

button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  font-weight: 600;
}
button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

button.link {
  background: transparent;
  border: none;
  color: var(--link);
  padding-left: 0;
  font-weight: 500;
}
button.link:hover { text-decoration: underline; background: transparent; }

button.tiny {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Shared .btn / .btn-primary classes */
button.btn, .btn {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--button-bg);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
button.btn-primary, .btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ===== Utility ===== */
.muted { color: var(--muted); font-size: 13px; }

.pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: 12px;
  color: var(--ink);
  border: 1px solid var(--border);
}

.pill.inline { display: inline-block; }

.kbd {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  font-family: monospace;
  font-size: 12px;
  background: var(--card);
  color: var(--ink);
}

/* ===== Status States ===== */
.error {
  background: var(--error-bg);
  color: var(--error-text);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--error-border);
  font-size: 13px;
}

.success {
  background: var(--success-bg);
  color: var(--success-text);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--success-border);
  font-size: 13px;
}

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; margin-top: 6px; }
th, td { border: 1px solid var(--border); padding: 5px 8px; text-align: center; }
th { background: var(--header-bg); font-weight: 600; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
tfoot td { font-weight: 700; }

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* ===== Auth View ===== */
.auth-card {
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
}

/* PIN mode: expand the auth card to fill the available screen */
.auth-card.auth-card-wide {
  max-width: none;
  width: 100%;
  padding: 28px clamp(20px, 4vw, 56px);
  align-self: flex-start; /* anchor to top so a tall card never hides its header above the viewport */
}
/* When the wide card is in play, override the global tablet "no scroll" rules
   so a tall login card (with keypad) is still reachable on short viewports. */
body.auth-only:has(.auth-card.auth-card-wide) {
  align-items: flex-start;
  min-height: auto;
  padding: 16px;
  overflow: auto !important;
  height: auto !important;
}
html:has(body.auth-only .auth-card.auth-card-wide) {
  overflow: auto !important;
  height: auto !important;
}
body.auth-only:has(.auth-card.auth-card-wide) .container {
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
  transform: none !important;
}
.pin-tile {
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-radius: 14px;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.pin-tile:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.pin-tile-avatar {
  font-size: 1.6rem;
  font-weight: 700;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent, #0b5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-tile-name {
  font-weight: 600;
  font-size: 1.05rem;
}

/* PIN dots — visual indicator of how many digits are entered */
.pin-dots-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px 0 6px; }
.pin-dots { display: flex; gap: 14px; align-items: center; }
.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.pin-dot.is-filled {
  background: var(--accent, #0b5);
  border-color: var(--accent, #0b5);
  transform: scale(1.05);
}
.pin-dots.is-error .pin-dot {
  border-color: #d33;
  background: #d33;
  animation: pin-shake 0.3s ease;
}
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Lockout banner shown when too many wrong attempts */
.pin-lockout-banner {
  background: #fff1f1;
  color: #a0212c;
  border: 1px solid #f3c0c4;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
}
[data-theme="dark"] .pin-lockout-banner {
  background: #3a1a1d;
  color: #ffb3b9;
  border-color: #6a2a30;
}

/* On-screen number pad */
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 420px;
  margin: 8px auto 0;
  width: 100%;
}
.pin-key {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 18px 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text, inherit);
  cursor: pointer;
  transition: transform 0.06s ease, background 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 64px;
}
.pin-key:hover { background: var(--hover, rgba(0,0,0,0.04)); }
.pin-key:active { transform: scale(0.96); }
.pin-key.pin-key-ghost {
  font-size: 1rem;
  color: var(--muted, #777);
}
.pin-key:disabled,
.pin-keypad.is-disabled .pin-key {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Password entry step inherits the wide-card layout (parallel to PIN) */
#passEntryStep .input-stack { max-width: 460px; margin: 0 auto; width: 100%; }
#passEntryStep .auth-controls { max-width: 460px; margin: 0 auto; width: 100%; justify-content: flex-start; }

.auth-hero { text-align: center; margin-bottom: 4px; }
.auth-hero h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 4px;
}
.auth-hero .muted { margin-top: -4px; font-size: 13px; }

.input-stack input {
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
  border-radius: 8px;
  border: 1.5px solid var(--input-border);
}

.input-stack input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.password-wrap { position: relative; display: grid; }
.password-wrap input { padding-right: 72px; }
.pass-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; }

.auth-controls { justify-content: space-between; }
.auth-controls .primary { padding: 10px 24px; font-size: 15px; border-radius: 8px; }

/* Auth sync card */
.auth-card .card.stack.pad-small {
  border-radius: 8px !important;
  padding: 12px 14px !important;
  background: var(--header-bg) !important;
  border: 1px solid var(--border) !important;
}

/* ===== 2-Column Auth Layout ===== */
.auth-card.auth-2col {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  padding: 18px;
  align-items: stretch;
  align-self: flex-start;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
}
.auth-card.auth-2col.auth-card-wide {
  padding: 18px;
}
.auth-2col .auth-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

/* Main column: cap input width for a tidy form on wide screens */
.auth-2col .auth-col-main {
  align-items: stretch;
}
.auth-2col .auth-col-main .auth-mode-toggle,
.auth-2col .auth-col-main .input-stack,
.auth-2col .auth-col-main #authMsg,
.auth-2col .auth-col-main #passEntryStep,
.auth-2col .auth-col-main #pinEntryStep {
  max-width: 460px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* PIN keypad sized for the main column */
.auth-2col .pin-keypad {
  max-width: 320px;
  margin: 8px auto 0;
}
.auth-2col .pin-key {
  min-height: 56px;
  font-size: 1.4rem;
  padding: 14px 0;
}

/* Right column: title smaller, store/sync stretched full width */
.auth-2col .auth-hero { margin-bottom: 4px; }
.auth-2col .auth-hero h1 { font-size: 22px; margin-bottom: 0; }
.auth-2col .auth-store-selector { width: 100%; }
.auth-2col .auth-store-selector .store-selector { width: 100%; position: relative; }
.auth-2col .auth-store-selector .store-badge {
  width: 100%;
  justify-content: space-between;
}
.auth-2col .auth-store-selector .store-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
}

/* Override the global wide-card body scroll behavior — 2-col handles its own scrolling per column */
body.auth-only:has(.auth-card.auth-2col) {
  align-items: stretch;
  min-height: 100vh;
  padding: 16px;
  overflow: hidden !important;
  height: 100vh !important;
}
html:has(body.auth-only .auth-card.auth-2col) {
  overflow: hidden !important;
  height: 100vh !important;
}
body.auth-only:has(.auth-card.auth-2col) .container {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none;
  transform: none !important;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 900px) {
  .auth-card.auth-2col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "right"
      "main";
  }
  .auth-2col .auth-col-main  { grid-area: main; }
  .auth-2col .auth-col-right { grid-area: right; }
  .auth-2col .auth-col {
    max-height: none;
  }
  body.auth-only:has(.auth-card.auth-2col),
  html:has(body.auth-only .auth-card.auth-2col) {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
  }
  body.auth-only:has(.auth-card.auth-2col) .container {
    overflow: visible !important;
    height: auto !important;
  }
}

/* ===== One-Line Topbar (full-screen views) ===== */
.topbar.one-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 6px 12px;
  margin-bottom: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 48px;
}

.topbar.one-line > * {
  flex-shrink: 1;
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.topbar-actions button {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 7px;
  height: 34px;
  white-space: nowrap;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 160px;
}

.header-search input {
  width: 100%;
  min-width: 80px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 7px;
  height: 34px;
}

/* ===== POS Workspace ===== */
.workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
}

.list-wrap {
  display: grid;
  grid-template-rows: 1fr min-content;
  min-height: 0;
  overflow: hidden;
}

.cart-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.table-wrap {
  overflow: auto;
  min-height: 0;
  max-height: 100%;
}

/* ===== Cart Grand Total Header ===== */
.cart-grand-total-footer {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  background: var(--card);
  color: var(--ink);
  border-bottom: 2px solid var(--border);
}

.cart-grand-total-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cart-grand-total-footer .grand-total-value {
  font-size: 2.2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.cart-grand-total-sub {
  display: grid;
  gap: 1px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

.cart-grand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Search row */
.search-row { display: flex; align-items: center; gap: 10px; }
.search-row .grow { flex: 1 1 auto; min-width: 200px; }

/* ===== Search Table ===== */
#searchTable tbody tr { cursor: pointer; }
#searchTable tbody td {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
#searchTable tbody tr { line-height: 1.6 !important; }
#searchTable tbody tr:nth-child(odd) td { background: var(--card) !important; }
#searchTable tbody tr:nth-child(even) td { background: var(--row-alt) !important; }
#searchTable tbody td { background-clip: padding-box; }
#searchTable tbody tr:hover td { background: var(--row-hover) !important; }

.generic-name {
  font-size: 0.7em;
  line-height: 1;
  color: var(--muted);
  opacity: 0.85;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.generic-name.placeholder {
  visibility: hidden;
}

/* Column order: 1-Barcode, 2-Name, 3-Price, 4-Stock */
#searchTable th:nth-child(1), #searchTable td:nth-child(1),
#searchTable th:nth-child(4), #searchTable td:nth-child(4) { display: none; }

#searchTable thead th:nth-child(3), #searchTable tbody td:nth-child(3),
#searchTable thead th:nth-child(4), #searchTable tbody td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ===== POS Cart Table ===== */
#posTable { table-layout: auto; }

#posTable thead th:nth-child(1), #posTable tbody td:nth-child(1) {
  width: auto;
  text-align: left;
}
#posTable thead th:nth-child(2), #posTable tbody td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
#posTable thead th:nth-child(3), #posTable tbody td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

#posTable tbody tr { cursor: pointer; }
#posTable tbody tr:hover td { background: var(--row-hover) !important; }
#posTable tbody tr:nth-child(odd) td { background: var(--card); }
#posTable tbody tr:nth-child(even) td { background: var(--row-alt); }
#posTable tbody td {
  background-clip: padding-box;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

#posTable tfoot tr:nth-child(1),
#posTable tfoot tr:nth-child(2) { display: none; }

#posTable tfoot { position: sticky; bottom: 0; background: var(--card); box-shadow: 0 -2px 4px rgba(0,0,0,0.05); }
#posTable tfoot td { vertical-align: middle; }
#posTable tfoot td:last-child { text-align: right; }

/* ===== Accessibility: Large Row Text ===== */
#searchTable tbody td, #posTable tbody td, #summaryTable tbody td {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width:420px) {
  #searchTable tbody td, #posTable tbody td, #summaryTable tbody td { font-size: 16px; }
}

/* Readable item name columns */
#searchTable thead th:nth-child(2), #searchTable tbody td:nth-child(2),
#posTable thead th:nth-child(1), #posTable tbody td:nth-child(1),
#summaryTable thead th:nth-child(1), #summaryTable tbody td:nth-child(1) {
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  color: var(--ink);
}

@media (max-width:420px) {
  #searchTable thead th:nth-child(2), #searchTable tbody td:nth-child(2),
  #posTable thead th:nth-child(1), #posTable tbody td:nth-child(1),
  #summaryTable thead th:nth-child(1), #summaryTable tbody td:nth-child(1) {
    font-size: 15px;
    line-height: 1;
  }
}

/* Grand Total on quoting page */
#grandTotal {
  font-size: 2em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* ===== Edit Mode Highlight ===== */
.edit-on {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ===== Featured Slot States ===== */
.slot-empty { color: var(--muted); font-style: italic; }
.slot-missing { background: var(--error-soft); color: var(--error-text); }

/* ===== Slot Picker Overlay ===== */
#slotPickerOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: grid;
  place-items: center;
  z-index: 9999;
}

#slotPickerPanel {
  background: var(--card);
  color: var(--ink);
  width: min(920px, 96vw);
  max-height: 90vh;
  max-height: 90dvh;
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  display: grid;
  grid-template-rows: min-content min-content 1fr min-content;
  gap: 14px;
  padding: 22px;
  overflow: hidden;
  min-height: 0;
}

#slotPickerList {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
#slotPickerList table { margin: 0; }

/* Hide barcode & stock columns in slot picker */
#slotPickerList table th:nth-child(1), #slotPickerList table td:nth-child(1),
#slotPickerList table th:nth-child(4), #slotPickerList table td:nth-child(4) { display: none; }

#slotPickerTitle { font-size: 28px; font-weight: 700; color: var(--ink-strong); margin: 0; }

#slotPickerClose {
  font-size: 18px;
  font-weight: 600;
  padding: 10px 22px;
  min-height: 44px;
  border-radius: 8px;
  background: var(--button-bg-alt);
  color: var(--ink-strong);
  border: 1px solid var(--border-strong);
}
#slotPickerClose:hover { background: var(--button-bg-hover); }

#slotPickerQuery {
  font-size: 18px !important;
  padding: 12px 14px !important;
  min-height: 48px;
  border: 1.5px solid var(--input-border);
  border-radius: 8px;
  color: var(--ink-strong);
  background: var(--input-bg);
}
#slotPickerQuery:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

#slotPickerList table thead th { font-size: 14px; font-weight: 700; padding: 10px 10px; }
#slotPickerList table tbody td {
  font-size: 18px;
  font-weight: 500;
  padding: 14px 10px !important;
  color: var(--ink-strong);
  line-height: 1.4;
}
#slotPickerList table tbody tr { cursor: pointer; }
#slotPickerList table tbody tr:nth-child(odd) td { background: var(--card); }
#slotPickerList table tbody tr:nth-child(even) td { background: var(--row-alt); }
#slotPickerList table tbody tr:hover td { background: var(--row-hover) !important; }

#slotPickerList table thead th:nth-child(2), #slotPickerList table tbody td:nth-child(2) { text-align: left; }
#slotPickerList table thead th:nth-child(3), #slotPickerList table tbody td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#slotPickerMeta { font-weight: 600; color: var(--text-muted); }

/* ===== Flash Toast ===== */
#flash {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  padding: 8px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0.97;
  font-size: 14px;
  font-weight: 500;
}

#flash.success, #flash.error { display: flex; }

#flash.warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}
#flash.info {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

/* ===== Offline Indicators ===== */
.offline-indicator {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.offline-badge { display: block; }

.offline-status-bar {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: 7px;
  padding: 7px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.offline-status-bar .status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--warning-text);
  color: var(--card);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

/* ===== Pending Sync ===== */
.pending-sync {
  background: var(--warning-soft) !important;
  border-left: 3px solid var(--warning-border);
}
.pending-sync td:first-child { padding-left: 8px; }
.pending-icon { color: var(--warning-accent); font-weight: 700; font-size: 15px; }

/* ===== Closing Row Ownership ===== */
.row-std.editable { cursor: pointer; }
.row-std.not-owner { cursor: not-allowed; }
.row-std.not-owner td { opacity: 0.6; background: var(--row-alt); }

/* ===== Saved Lists Overlay ===== */
#savedOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: grid;
  place-items: center;
  z-index: 10000;
}

#savedPanel {
  background: var(--card);
  color: var(--ink);
  width: min(880px, 92vw);
  max-height: 80vh;
  max-height: 80dvh;
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  display: grid;
  grid-template-rows: min-content min-content 1fr min-content;
  gap: 10px;
  padding: 18px;
  overflow: hidden;
  min-height: 0;
}

#savedList { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
#savedList table { margin: 0; }

/* ===== Confirmation Overlay ===== */
#confirmOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: grid;
  place-items: center;
  z-index: 10001;
}

#confirmPanel {
  background: var(--card);
  color: var(--ink);
  width: min(420px, 90vw);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

#confirmTitle { font-size: 20px; font-weight: 700; color: var(--ink-strong); }
#confirmMessage { font-size: 15px; color: var(--text-muted); line-height: 1.5; }
#confirmActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
#confirmActions button { font-size: 15px; font-weight: 600; padding: 10px 22px; border-radius: 8px; min-width: 96px; }
#btnConfirmCancel { background: var(--button-bg-alt); border: 1px solid var(--border-strong); color: var(--ink); }
#btnConfirmYes { background: var(--danger); border: 1px solid var(--danger); color: #fff; }
#btnConfirmYes:hover { background: var(--danger-hover); }

/* ===== Admin Overlay ===== */
#adminOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 11000;
  display: grid;
  place-items: center;
}

#adminPanel {
  background: var(--card);
  color: var(--ink);
  padding: 28px 24px;
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  width: min(400px, 90vw);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#adminPanel h2 { font-size: 20px; }
#adminPanel input {
  font-size: 16px;
  padding: 10px 12px;
  border: 1.5px solid var(--input-border);
  border-radius: 8px;
  width: 100%;
  background: var(--input-bg);
  color: var(--ink);
}

#adminActions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }

/* ===== Theme Toggle ===== */
.theme-toggle {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  cursor: pointer;
  line-height: 1;
  min-width: 0 !important;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: var(--button-bg-hover) !important; }

/* ===== Payment View ===== */
.pay-left-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 85vh;
  overflow: hidden;
}

.pay-table-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--card);
}

.pay-summary-footer {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--divider);
  border-radius: 8px 8px 0 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pay-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.3;
}

.pay-summary-row.grand {
  font-weight: 800;
  font-size: 24px;
  color: var(--accent);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 2px dashed var(--border-strong);
}

.pay-summary-row .val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-summary-row.grand .val { color: var(--accent); font-size: 28px; }

tr.discounted td { color: #fff !important; background: #c62828 !important; font-weight: 600; }

#payView .grid2 { align-items: start; min-height: 0; }
#payView .grid2 > .stack { min-height: 0; }
#payView .panel-left { display: grid; grid-template-rows: min-content 1fr; min-height: 0; }
#payView .panel-left .scroll-y { overflow: auto; min-height: 0; }
#payView .panel-right {
  align-content: start;
  min-height: 0;
  --pay-right-scale: 1.3;
  gap: calc(10px * var(--pay-right-scale));
}

.pay-methods { width: 100%; }

.segmented-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.seg-btn {
  width: 100%;
  padding: calc(9px * var(--pay-right-scale, 1)) calc(12px * var(--pay-right-scale, 1));
  border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  background: var(--button-bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}
.seg-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.seg-btn:hover:not(.is-active) { background: var(--button-bg-hover); }

.change-display { display: grid; gap: 4px; margin-top: 4px; margin-bottom: 10px; }

.change-amount {
  font-size: 4.5em;
  line-height: 1.05;
  font-weight: 900;
  color: #e03030;
  text-shadow: 0 0 10px rgba(220,50,50,0.35);
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}

.change-display .tiny.muted {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.amount-wrap { width: 100%; margin-bottom: 10px; }
.amount-wrap #payAmount {
  width: 100%;
  font-size: 22px;
  padding: calc(11px * var(--pay-right-scale, 1)) calc(14px * var(--pay-right-scale, 1));
}

#gcashContact {
  width: 100%;
  font-size: 22px;
  padding: calc(11px * var(--pay-right-scale, 1)) calc(14px * var(--pay-right-scale, 1));
}

.cash-quick-row { display: flex; gap: 6px; margin-bottom: 8px; }
.cash-btn {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  padding: calc(9px * var(--pay-right-scale, 1)) 0;
  border-radius: 8px;
  background: var(--button-bg);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
}
.cash-btn:hover { background: var(--button-bg-hover); }
.cash-btn:active { background: var(--button-bg-alt); transform: translateY(1px); }

.numpad-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 8px; }
.numpad-btn {
  font-size: 20px;
  font-weight: 700;
  padding: calc(13px * var(--pay-right-scale, 1)) 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--button-bg);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
}
.numpad-btn:hover { background: var(--button-bg-hover); }
.numpad-btn:active { background: var(--button-bg-alt); }
.numpad-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.numpad-btn.danger:hover { background: var(--danger-hover); }

.pay-actions { gap: 12px; margin-top: 4px; }
.pay-actions #btnBack,
.pay-actions #btnConfirmPay {
  font-size: 20px;
  padding: calc(13px * var(--pay-right-scale, 1)) calc(18px * var(--pay-right-scale, 1));
}

#gcashContact.invalid { border-color: #e66; background: var(--error-soft); }
#transferLocation { width: 100%; font-size: 20px; padding: 10px 12px; }
#transferLocation.invalid { border-color: #e66; background: var(--error-soft); }

#sumGrand { font-size: 1.8em; font-variant-numeric: tabular-nums; }
#payView .panel-right button {
  padding-top: calc(13px * var(--pay-right-scale, 1));
  padding-bottom: calc(13px * var(--pay-right-scale, 1));
  min-height: calc(48px * var(--pay-right-scale, 1));
  line-height: 1.2;
}

/* Payment summary table alignment */
#summaryTable thead th:nth-child(1), #summaryTable tbody td:nth-child(1) { text-align: left; }
#summaryTable thead th:nth-child(2), #summaryTable tbody td:nth-child(2),
#summaryTable thead th:nth-child(3), #summaryTable tbody td:nth-child(3) { text-align: right; }

@media (max-width: 420px) {
  .cash-btn { font-size: 15px; padding: 9px 12px; }
  .pay-actions #btnBack, .pay-actions #btnConfirmPay { font-size: 18px; padding: 12px 18px; }
}

@media (max-width: 900px) {
  #payView { overflow-y: auto; display: block; height: 100%; padding-bottom: 100px; }
  .pay-left-panel { max-height: none; height: auto; overflow: visible; }
  .pay-table-wrap { min-height: 150px; height: auto; overflow: visible; }
  .pay-actions { padding-bottom: 16px; }
}

/* ===== Qty Editor Overlay ===== */
#qtyEditorOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: grid;
  place-items: center;
  z-index: 10000;
}

#qtyEditorPanel {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  padding: 28px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  border: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#qtyEditorPanel .stack {
  gap: 22px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: 0 0 auto !important;
}

#qtyEditorPanel .row { gap: 12px; margin-bottom: 8px; }

#qtyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
#btnQtyToggleDiscount, #btnQtyRemove, #qtyEditorClose { flex: 0 0 auto; }
#qtyHeader button { white-space: nowrap; flex: 1; }

#qtyRowControls {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
}
#qtyRowControls button { min-width: 56px; justify-self: center; }

#qtyEditorPanel #qtyInput { width: 100%; min-width: 140px; max-width: 100%; text-align: center; }
#qtyEditorPanel input[type="number"]::-webkit-outer-spin-button,
#qtyEditorPanel input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
#qtyEditorPanel input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; }

#qtyEditorPanel .stack { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

#qtyRowActions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
#qtyRowActions .spacer { display: none !important; }
#btnQtyCancel { justify-self: start; min-width: 100px; }
#btnQtySave { justify-self: end; min-width: 100px; }

#qtyRowDiscount { justify-content: center; }
#qtyRowDiscount button { min-width: 180px; }

/* Qty editor: large accessible fonts */
#qtyEditorTitle { font-size: 32px !important; font-weight: 700 !important; color: var(--ink-strong); margin: 0; }
#qtyEditorPanel #qtyItemName { font-size: 30px !important; font-weight: 600 !important; color: var(--ink-strong); line-height: 1.3; }
#qtyEditorPanel .pill { font-size: 24px !important; padding: 10px 20px !important; background: var(--pill-bg-alt); color: var(--ink-strong); font-weight: 600; }
#qtyEditorPanel label.muted.tiny { font-size: 22px !important; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }

#qtyEditorPanel #qtyInput {
  font-size: 44px !important;
  font-weight: 700 !important;
  padding: 20px 14px !important;
  min-height: 82px !important;
  border: 2px solid var(--input-border) !important;
  border-radius: 10px !important;
  color: var(--ink-strong) !important;
  background: var(--input-bg) !important;
}
#qtyEditorPanel #qtyInput:focus {
  border-color: var(--accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

#qtyRowControls button {
  font-size: 28px !important;
  font-weight: 700 !important;
  min-width: 72px !important;
  min-height: 72px !important;
  padding: 18px 20px !important;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--header-bg);
  color: var(--ink-strong);
  cursor: pointer;
  transition: all 0.12s;
}
#qtyRowControls button:hover { background: var(--button-bg-hover); }
#qtyRowControls button:active { background: var(--button-bg-alt); transform: scale(0.97); }

#qtyHeader button {
  font-size: 22px !important;
  font-weight: 600;
  padding: 12px 20px !important;
  min-height: 50px !important;
  border-radius: 10px;
}

#btnQtyRemove { background: var(--danger); color: #fff; border: 2px solid var(--danger); }
#btnQtyRemove:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
#qtyEditorClose { background: var(--button-bg-alt); color: var(--ink-strong); border: 1.5px solid var(--input-border); }
#qtyEditorClose:hover { background: var(--button-bg-hover); }

#btnQtyToggleDiscount {
  font-size: 24px !important;
  font-weight: 700;
  padding: 16px 28px !important;
  min-height: 70px !important;
  min-width: 220px !important;
  border-radius: 10px;
  border: 2px solid var(--danger);
}
#btnQtyToggleDiscount:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

#qtyRowActions button {
  font-size: 28px !important;
  font-weight: 700;
  padding: 20px 40px !important;
  min-height: 80px !important;
  min-width: 160px !important;
  border-radius: 10px;
}

#btnQtyCancel { background: var(--button-bg-alt); color: var(--ink-strong); border: 1.5px solid var(--input-border); }
#btnQtyCancel:hover { background: var(--button-bg-hover); }
#btnQtySave { background: var(--accent); color: #fff; border: 2px solid var(--accent); }
#btnQtySave:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

#qtyEditorPanel #qtyRowDiscount { margin-top: auto !important; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
#qtyEditorPanel #btnQtySave { width: 100% !important; }

#qtyEditorPanel, #qtyEditorPanel * { -webkit-font-smoothing: antialiased; }

/* ===== Closing View ===== */
#closingView {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-rows: auto 1fr !important;
  z-index: 50;
}

#closingView .topbar.one-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex-shrink: 0 !important;
}

#closingView .topbar.one-line h2 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#closingView .topbar.one-line button {
  padding: 6px 14px !important;
  font-size: 1.1rem !important;
  min-height: 32px !important;
  border-radius: 7px !important;
}

.closing-page {
  --focus-outline: 3px;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink) !important;
}

@media (max-width: 991.98px) { .closing-page { font-size: 1.1rem; } }

.closing-page :focus-visible { outline: var(--focus-outline) solid var(--accent); outline-offset: 3px; }

.closing-page .card {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  border-radius: 0;
  overflow: hidden;
}

.closing-page .table { color: var(--ink) !important; margin-bottom: 0; }

.closing-page .table thead th {
  background-color: var(--header-bg) !important;
  border-bottom: 2px solid var(--border) !important;
  color: var(--text-muted) !important;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
  text-align: center;
}

.closing-page .table tbody td {
  border: 1px solid var(--border) !important;
  padding: 5px 8px !important;
  vertical-align: middle;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
}

.closing-page .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--card) !important; }
.closing-page .table-striped > tbody > tr:nth-of-type(even) > td { background-color: var(--row-alt) !important; }

.closing-page .text-muted { color: var(--text-muted) !important; }
.closing-page .text-success { color: var(--accent) !important; }
.closing-page .text-danger { color: var(--danger) !important; }

.closing-page .btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 1.1rem;
  min-height: 32px;
  transition: all 0.15s;
}
.closing-page .btn-primary:hover { background: var(--accent-hover) !important; }

.closing-page .btn-sm { padding: 5px 12px !important; font-size: 1.1rem !important; min-height: 28px !important; }

.closing-page .date-label { font-size: 1.1rem; color: var(--text-muted) !important; font-weight: 500; }

.closing-page .grid-table { table-layout: fixed; width: 100%; }
.closing-page .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.closing-page .nowrap { white-space: nowrap; }

.closing-page .row-std { height: 30px; min-height: 30px; }
.closing-page .row-std td { padding: 4px 8px !important; font-size: 1.1rem !important; }
.closing-page .list-wrap { grid-template-rows: auto 1fr !important; }
.closing-page .row-std.editable { cursor: pointer; transition: background-color 0.12s; }
.closing-page .row-std.editable:hover td { background-color: var(--row-hover) !important; }

.closing-page #cashTable { display: flex; flex-direction: column; height: 100%; width: 100%; }
.closing-page #cashTable thead, .closing-page #cashTable tbody { display: block; }
.closing-page #cashTable thead tr, .closing-page #cashTable tbody tr { display: table; width: 100%; table-layout: fixed; }
.closing-page #cashTable tbody { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: 16px; box-sizing: border-box; }
.closing-page #cashTable tbody tr { flex: 0.9 1 0; }
.closing-page #cashTable tbody td { font-size: 1.5125rem !important; }

.closing-page .num { font-variant-numeric: tabular-nums; }
.closing-page .pc-desc, .closing-page .ex-desc { width: 50%; }
.closing-page .pc-amt, .closing-page .ex-amt { width: 50%; }
.closing-page .amt { font-weight: 700; }

.closing-page #pendingStatus { padding: 5px 10px; border-radius: 6px; font-size: 1.1rem; }

/* ===== Closing Edit Modal ===== */
#closingEditOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-strong);
  z-index: 12000;
  display: grid;
  place-items: stretch !important;
  backdrop-filter: blur(3px);
}

.closing-edit-modal {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: var(--card) !important;
  color: var(--ink) !important;
  display: flex !important;
  flex-direction: column !important;
}

.closing-edit-modal-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 20px !important;
  flex: 0 0 auto;
}

.closing-edit-modal-header h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0;
}

.closing-edit-modal-body {
  flex: 1 1 auto !important;
  padding: 18px 20px !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.closing-edit-modal-body .stack { max-width: 560px; width: 100%; margin: 0 auto; }

.closing-edit-modal-body .form-label {
  color: var(--ink) !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  font-size: 18px !important;
}

.closing-edit-modal-body .form-control {
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  color: var(--ink) !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
}

.closing-edit-modal-body .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none;
}

#cDenomText {
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-align: center !important;
  margin-bottom: 14px !important;
  line-height: 1.1 !important;
}

.closing-edit-modal-footer {
  background-color: var(--card) !important;
  border-top: 1.5px solid var(--border) !important;
  padding: 12px 20px !important;
  flex: 0 0 auto;
}

.closing-btn-save {
  background: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  color: #fff !important;
  min-height: 44px !important;
}
.closing-btn-cancel {
  background: var(--button-bg-alt) !important;
  border: 1.5px solid var(--input-border) !important;
  color: var(--ink) !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  min-height: 44px !important;
}
.closing-btn-delete {
  background: var(--danger) !important;
  border: 2px solid var(--danger) !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #fff !important;
  min-height: 44px !important;
}

/* ===== Inventory Views ===== */
#inventoryListView .row-diff { background: var(--warning-soft); }
#inventoryItemView input[readonly], #inventoryItemView .ro { opacity: .6; }

/* ===== Management Menu Overlay ===== */
#managementMenuOverlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg-strong);
  z-index: 12000;
  display: grid;
  place-items: center;
  backdrop-filter: blur(3px);
}

#managementMenuOverlay .mgmt-menu-modal {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
}

#managementMenuOverlay .mgmt-menu-modal-header {
  padding: 20px 28px !important;
  flex: 0 0 auto;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

#managementMenuOverlay .mgmt-menu-modal-header h3 {
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0;
}

#managementMenuOverlay .mgmt-menu-modal-body {
  flex: 1 1 auto !important;
  padding: 28px !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#managementMenuOverlay .mgmt-menu-modal-body .stack { max-width: 560px; width: 100%; margin: 0 auto; }

#managementMenuOverlay .mgmt-menu-btn {
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 20px 28px !important;
  min-height: 72px !important;
  border-radius: 10px !important;
  width: 100%;
  text-align: left;
  letter-spacing: 0.2px;
}

#managementMenuOverlay .mgmt-menu-modal-footer {
  flex: 0 0 auto;
  padding: 20px 28px !important;
  border-top: 1px solid var(--border) !important;
}

#managementMenuOverlay .mgmt-menu-modal-footer button {
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  min-height: 52px !important;
  border-radius: 10px !important;
}

/* ===== Change Password View ===== */
#changePasswordView #changePasswordStatus { padding: 10px 14px; border-radius: 8px; font-weight: 600; }
#changePasswordView #changePasswordStatus.success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
#changePasswordView #changePasswordStatus.error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); }

/* ===== Declaration / Inventory Pro / Transfer / Rankings / Change Password — Layout ===== */
.form-control {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }

.form-label { font-size: 13px; font-weight: 600; color: var(--muted); }

#declarationView .form-control,
#inventoryProListView .form-control,
#inventoryProItemView .form-control,
#transferView .form-control,
#rankingsView .form-control {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#declarationView .form-label,
#inventoryProListView .form-label,
#inventoryProItemView .form-label,
#transferView .form-label,
#rankingsView .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Status messages */
#declarationStatus, #declarationEditStatus,
#invProListStatus, #invProNewStatus, #invProItemSaveStatus,
#transferSubmitStatus, #transferLogStatus,
#rankingsStatus {
  padding: 9px 13px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
}

#declarationStatus.success, #declarationEditStatus.success,
#invProListStatus.success, #invProNewStatus.success, #invProItemSaveStatus.success,
#transferSubmitStatus.success, #transferLogStatus.success,
#rankingsStatus.success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

#declarationStatus.error, #declarationEditStatus.error,
#invProListStatus.error, #invProNewStatus.error, #invProItemSaveStatus.error,
#transferSubmitStatus.error, #transferLogStatus.error,
#rankingsStatus.error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

#declarationView, #inventoryProListView, #inventoryProItemView,
#transferView, #rankingsView, #changePasswordView, #profileView {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
}

#declarationView .topbar,
#inventoryProListView .topbar,
#inventoryProItemView .topbar,
#transferView .topbar,
#rankingsView .topbar,
#changePasswordView .topbar,
#profileView .topbar {
  padding: 10px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

#declarationView .workspace,
#inventoryProListView .workspace,
#inventoryProItemView .workspace,
#transferView .workspace,
#rankingsView .workspace,
#changePasswordView .workspace,
#profileView .workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.invpro-generic-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invpro-generic-stats-text {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.invpro-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.invpro-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  width: 0%;
  transition: width 0.25s ease;
}

#invProListResults tr.invpro-row-selected td {
  background: #e7f1ff !important;
}
#invProListResults tr.invpro-row-selected td:first-child {
  border-left: 3px solid #2563eb;
}
:root[data-theme="dark"] #invProListResults tr.invpro-row-selected td {
  background: #1e3a5f !important;
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 600px) {
  .topbar.one-line { flex-wrap: wrap; height: auto; padding-bottom: 8px; gap: 6px; }
  .store-selector .store-badge { padding: 5px 9px; font-size: 13px; }
  .header-search { order: 3; flex: 1 1 100%; min-width: 100%; margin-top: 4px; }
  .topbar-user { margin-left: auto; }
  #btnSyncAllPOS { min-width: auto; padding: 5px 8px; }
  .topbar-actions { order: 4; flex: 1 1 100%; justify-content: space-between; margin-top: 6px; gap: 4px; }
  .topbar-actions button { flex: 1; padding: 8px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #posView .topbar-actions button { flex: 0 0 auto; width: auto; }
}

/* ===== Tutorial Overlay ===== */
#tutorialOverlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
}

#tutorialSpotlight {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  border-radius: 10px;
  pointer-events: none;
  transition: top 0.28s ease, left 0.28s ease, width 0.28s ease, height 0.28s ease;
  z-index: 99998;
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

#tutorialTooltip {
  position: fixed;
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  padding: 22px 20px 18px;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
  z-index: 99999;
  pointer-events: all;
  transition: top 0.28s ease, left 0.28s ease;
}

#tutorialCounter {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#tutorialTitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 6px;
  line-height: 1.3;
}

#tutorialText {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}

#tutorialDots {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}

.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.2s;
}

.tutorial-dot.active { background: var(--accent); }

#tutorialActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#tutorialSkip {
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  pointer-events: all;
  font-family: inherit;
}

#tutorialSkip:hover { color: var(--ink); }

#tutorialBtns { display: flex; gap: 7px; }

#tutorialNext {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  pointer-events: all;
  font-family: inherit;
  transition: background 0.12s;
}
#tutorialNext:hover { background: var(--accent-hover); }

#tutorialPrev {
  background: var(--button-bg-alt);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  border-radius: 7px;
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
  pointer-events: all;
  font-family: inherit;
  transition: background 0.12s;
}
#tutorialPrev:hover { background: var(--button-bg-hover); }

/* Help button */
.tutorial-help-btn {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  flex-shrink: 0;
}
.tutorial-help-btn:hover { background: var(--button-bg-hover) !important; color: var(--ink) !important; }


/* ============================================================
   UNIFORMITY & DARK-MODE LEGIBILITY PASS  (v3)
   Lives at the end on purpose so it overrides earlier rules.
   Tokens-only — works in both light and dark themes.
   Higher-specificity per-page rules (e.g. .closing-page .btn-*)
   are intentionally left to win where they encode tablet sizing.
   ============================================================ */

/* --- Token nudges so dark-mode borders and muted text don't vanish --- */
:root[data-theme="dark"] {
  --border: #3a4055;
  --border-strong: #5a6178;
  --muted: #b0b6c4;
  --text-muted: #b0b6c4;
  --pill-bg: #2f3445;
  --pill-bg-alt: #3a4058;
  --button-bg: #2a2f3c;
  --button-bg-hover: #353b4d;
  --row-alt: #232733;
  --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-strong: 0 18px 44px rgba(0,0,0,0.6), 0 8px 18px rgba(0,0,0,0.45);
}

/* --- One consistent button base for every button-like class --- */
button,
.btn,
button.btn,
button.primary,
button.danger,
.btn-primary,
button.btn-primary,
.btn-outline-secondary,
button.btn-outline-secondary,
.btn-danger,
button.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 16px;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--button-bg);
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  user-select: none;
  text-decoration: none;
}

button:hover,
.btn:hover,
button.btn:hover {
  background: var(--button-bg-hover);
}
button:active,
.btn:active { transform: translateY(1px); }

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* PRIMARY */
button.primary,
.btn-primary,
button.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.primary:hover,
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* OUTLINE / SECONDARY — visible in both themes (was previously invisible) */
.btn-outline-secondary,
button.btn-outline-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-outline-secondary:hover,
button.btn-outline-secondary:hover {
  background: var(--button-bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}

/* DANGER */
button.danger,
.btn-danger,
button.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
button.danger:hover,
.btn-danger:hover,
button.btn-danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
}

/* COMPACT */
button.tiny,
.btn-sm,
button.btn-sm {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
}

/* LINK button stays text-like and never grabs touch height */
button.link {
  background: transparent;
  border: none;
  color: var(--link);
  padding: 4px 0;
  min-height: 0;
  font-weight: 500;
  display: inline;
}
button.link:hover {
  background: transparent;
  text-decoration: underline;
  color: var(--link);
}

/* Disabled state legible in both themes */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

/* Theme toggle: uniform across the auth and profile views */
.theme-toggle {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 !important;
  border-radius: 8px !important;
}
.theme-toggle:hover {
  background: var(--button-bg-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* --- Inputs: one shape, one focus ring, both themes --- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Form labels readable in both themes (was --muted, near-invisible in dark) */
.form-label {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1px;
}

/* Helper / muted text stays subdued but never disappears */
.tiny.muted,
.muted {
  color: var(--text-muted);
}

/* --- Pills / badges: visible border, readable text in both themes --- */
.pill {
  background: var(--pill-bg);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.pill.tiny { font-size: 11px; padding: 2px 8px; }
.pill.success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}
.pill.error {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

/* --- Status messages legible in both themes --- */
.success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

/* --- Cards & modals: subtle uniform shadow + dark-mode-correct surfaces --- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Modal cards (the centered popups) get a stronger shadow */
#managementMenuOverlay > .card,
#profileCpModal > .card,
#profilePinModal > .card,
.mgmt-menu-modal,
#confirmPanel,
#adminPanel,
#qtyEditorPanel {
  box-shadow: var(--shadow-strong);
  border: 1px solid var(--border);
}

/* --- Topbar uniform across all views --- */
.topbar.one-line {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

/* --- Tables: dark-mode legible body, headers, striping --- */
table th {
  background: var(--header-bg);
  color: var(--text-muted);
  border-color: var(--border);
}
table tbody td {
  color: var(--ink);
  border-color: var(--border);
}
table tbody tr:hover td {
  background: var(--row-hover);
}

/* --- Hyperlinks --- */
a, button.link {
  color: var(--link);
}
a:hover { color: var(--link); text-decoration: underline; }

/* --- Profile page big-button polish --- */
#btnProfileOpenCp,
#btnProfileOpenPin {
  min-height: 64px;
  border-radius: 12px;
  font-size: 15px;
  text-align: left;
  box-shadow: var(--shadow);
}
#btnProfileOpenCp:hover,
#btnProfileOpenPin:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
}

/* --- Closing page: compact buttons matching the quoting topbar ---
   Closing previously used 20px font / 32px-min buttons across the
   whole page. The topbar and column "Add" buttons are utility actions
   and should match the quoting POS topbar dimensions. The data rows
   (petty cash, cash on hand, expenses) stay full-size for thumb taps. */
.closing-page .topbar.one-line button,
.closing-page .topbar.one-line .btn,
.closing-page .topbar.one-line .btn-primary {
  font-size: 1.1rem !important;
  height: 32px;
  min-height: 32px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.closing-page .cart-grand-total-footer .btn-sm,
.closing-page #pettyAddBtn,
.closing-page #expAddBtn {
  font-size: 1.1rem !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
  border-radius: 7px !important;
  font-weight: 600;
}

/* Tighten the closing topbar's vertical padding so it matches the trimmer feel */
.closing-page .topbar.one-line {
  min-height: 42px;
  padding: 4px 12px;
}

/* Section header bars (Petty cash / Cash on hand / Expenses) are flex rows
   so the title sits left and the Add button hugs the right on the same line. */
.closing-page .closing-section-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Cash-on-hand rows trimmed ~30% — turn off flex stretch and use a
   compact fixed row height so 9–11 denomination rows fit comfortably. */
.closing-page #cashTable tbody tr {
  flex: 0 0 auto !important;
  height: 44px !important;
  min-height: 44px !important;
}
.closing-page #cashTable tbody td {
  font-size: 1.5125rem !important;
  padding: 3px 8px !important;
  line-height: 1.15 !important;
}
.closing-page #cashTable thead th {
  padding: 4px 8px !important;
}

/* Closing page table fonts trimmed by ~30% across the board.
   Headers: 14 -> 10. Body cells: 20 -> 14. Row-std cells: 20 -> 14. */
.closing-page .table thead th {
  font-size: 1.1rem !important;
  padding: 5px 8px !important;
  letter-spacing: 0.35px !important;
}
.closing-page .table tbody td {
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}
.closing-page .row-std td {
  font-size: 1.1rem !important;
  padding: 3px 8px !important;
}
.closing-page .row-std {
  height: 26px !important;
  min-height: 26px !important;
}

/* ===== Universal popup safety net =====
   Any dialog overlay's direct child gets capped to the viewport with internal
   scrolling, so future popups stay contained even if their styles forget.
   Uses 100dvh so mobile browser chrome (URL bar) doesn't push content off-screen.
   Existing fullscreen modals (qty editor, closing edit, mgmt menu) override
   this via higher-specificity ID rules with !important. */
[role="dialog"] > .card,
[role="dialog"] > div {
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

/* ===== Transmitting indicator ===== */
.transmit-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2.5px solid rgba(11, 187, 85, 0.25);
  border-top-color: var(--accent, #0b5);
  border-radius: 50%;
  animation: transmitSpin 0.7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(11, 187, 85, 0.35);
}

@keyframes transmitSpin {
  to { transform: rotate(360deg); }
}