/* =========================================================================
   POS — shadcn-inspired custom stylesheet (no framework dependency)
   Design tokens follow the shadcn/ui "new-york" neutral palette, expressed
   as HSL custom properties so light/dark are a single variable swap.
   ========================================================================= */

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;

  --sidebar-width: 16rem;
  --sidebar-mini: 4rem;
  --header-height: 3.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout primitives ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
}

.sidebar__brand {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 600;
  font-size: 1rem;
}

.sidebar__brand .logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: grid;
  place-items: center;
  font-weight: 700;
}

.sidebar__nav {
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
}
.sidebar__section {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  padding: 0.75rem 0.5rem 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  font-size: 0.875rem;
  transition:
    background 0.12s,
    color 0.12s;
}
.nav-link:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.nav-link.active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Nav groups (sub-dropdowns) ---- */
.nav-group {
  display: flex;
  flex-direction: column;
}
.nav-group__toggle {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.nav-group__toggle.active-group {
  color: hsl(var(--foreground));
}
.nav-group__chevron {
  margin-left: auto;
  display: inline-flex;
  transition: transform 0.15s;
  opacity: 0.7;
}
.nav-group.is-open > .nav-group__toggle .nav-group__chevron {
  transform: rotate(180deg);
}
.nav-group__items {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin: 1px 0 2px 0;
}
.nav-group.is-open > .nav-group__items {
  display: flex;
}
.nav-sublink {
  padding-left: 2.25rem;
  font-size: 0.84rem;
}
.nav-sublink .icon {
  width: 15px;
  height: 15px;
}
.nav-sublink.active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-weight: 600;
  box-shadow: inset 2px 0 0 hsl(var(--primary));
}

.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--header-height);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  gap: 1rem;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.topbar__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.content {
  padding: 1.5rem;
  flex: 1;
}

/* ---------- Cards ---------- */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.card__header {
  padding: 1.25rem 1.25rem 0.5rem;
}
.card__title {
  font-weight: 600;
  font-size: 1rem;
}
.card__desc {
  color: hsl(var(--muted-foreground));
  font-size: 0.825rem;
  margin-top: 0.125rem;
}
.card__body {
  padding: 1.25rem;
}
.card__footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid hsl(var(--border));
}

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 1.5rem;
}
.stat {
  padding: 1.25rem;
}
a.dash-stat {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.06s;
}
a.dash-stat:hover {
  border-color: hsl(var(--primary));
  box-shadow: 0 2px 10px hsl(0 0% 0% / 0.06);
}
a.dash-stat:active {
  transform: translateY(1px);
}
.stat__label {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.stat__value {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 0.375rem;
  letter-spacing: -0.02em;
}
.stat__hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* stat-card: bordered surface variant used across reports & analytics */
.stat-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.stat-card__label {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stat-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.stat-card__hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.stat-card--accent {
  border-left: 3px solid hsl(var(--primary));
}
.table--kv th {
  width: 38%;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  vertical-align: top;
}
.table--kv td {
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.12s,
    opacity 0.12s,
    border-color 0.12s;
  white-space: nowrap;
  line-height: 1.25rem;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn--primary:hover {
  background: hsl(var(--primary) / 0.9);
}
.btn--secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn--secondary:hover {
  background: hsl(var(--secondary) / 0.8);
}
.btn--outline {
  border-color: hsl(var(--border));
  background: transparent;
  color: hsl(var(--foreground));
}
.btn--outline:hover {
  background: hsl(var(--accent));
}
.btn--ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.btn--ghost:hover {
  background: hsl(var(--accent));
}
.btn--destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn--sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.8rem;
}
.btn--icon {
  padding: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
}
.btn--block {
  width: 100%;
}

/* ---------- Forms ---------- */
.field {
  margin-bottom: 1rem;
}
.label {
  display: block;
  font-size: 0.825rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}
.input,
.select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.input:focus,
.select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}
.input::placeholder {
  color: hsl(var(--muted-foreground));
}
.field__error {
  color: hsl(var(--destructive));
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

/* File / browse inputs ----------------------------------------------------- */
.input[type="file"] {
  padding: 0;
  height: auto;
  line-height: 1.2;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.input[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0 0.75rem 0 0;
  padding: 0 0.9rem;
  height: 2.5rem;
  border: none;
  border-right: 1px solid hsl(var(--input));
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground, var(--foreground)));
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.input[type="file"]::file-selector-button:hover {
  background: hsl(var(--muted));
}
.input[type="file"]::-webkit-file-upload-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0 0.75rem 0 0;
  padding: 0 0.9rem;
  height: 2.5rem;
  border: none;
  border-right: 1px solid hsl(var(--input));
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-weight: 600;
  cursor: pointer;
}

/* Theme preset swatches ---------------------------------------------------- */
.theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}
.theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  cursor: pointer;
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.08s;
  text-align: left;
}
.theme-swatch:hover {
  border-color: hsl(var(--ring));
  transform: translateY(-1px);
}
.theme-swatch.is-selected {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
}
.theme-swatch__chip {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.08);
  flex: none;
}
.theme-swatch__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-left: 0.15rem;
}
.theme-swatch--custom {
  justify-content: center;
  border-style: dashed;
}
.theme-swatch[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
}
.badge--active,
.badge--completed {
  background: hsl(var(--success) / 0.12);
  color: hsl(var(--success));
}
.badge--suspended,
.badge--inactive {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.badge--closed,
.badge--cancelled {
  background: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
}

/* ---------- Alerts ---------- */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid hsl(var(--border));
}
.alert--success {
  background: hsl(var(--success) / 0.1);
  border-color: hsl(var(--success) / 0.3);
}
.alert--error {
  background: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.3);
  color: hsl(var(--destructive));
}

/* ---------- DataTable ---------- */
.dt {
  width: 100%;
}
.dt__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.dt__clear-all {
  border-color: hsl(0 72% 51% / 0.5);
  color: hsl(0 72% 45%);
}
.dt__clear-all:hover {
  background: hsl(0 72% 51% / 0.08);
  border-color: hsl(0 72% 51%);
}
.dt__search {
  position: relative;
  max-width: 18rem;
  flex: 1;
}
.dt__search .input {
  height: 2.25rem;
  padding-left: 2.25rem;
}
.dt__search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}
.dt__mode {
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
}
.dt__mode b {
  color: hsl(var(--foreground));
}

.table-wrap {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
table.table thead th {
  text-align: left;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
  white-space: nowrap;
  user-select: none;
}
table.table thead th.sortable {
  cursor: pointer;
}
table.table thead th.sortable:hover {
  color: hsl(var(--foreground));
}
table.table thead th .sort-ind {
  opacity: 0.4;
  font-size: 0.7rem;
  margin-left: 0.25rem;
}
table.table thead th.sorted .sort-ind {
  opacity: 1;
}

/* ---------- Excel-style column filters + multi-sort ---------- */
.dt__th {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.dt__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  opacity: 0.45;
  cursor: pointer;
  padding: 0.1rem;
  border-radius: 4px;
  line-height: 0;
}
.dt__filter:hover {
  opacity: 1;
  background: hsl(var(--muted));
}
.dt__filter.active {
  opacity: 1;
  color: hsl(var(--primary));
}
table.table thead th.filtered {
  background: hsl(var(--primary) / 0.06);
}
.dt__pop {
  width: 16rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.75rem;
  font-size: 0.85rem;
}
.dt__pop-title {
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}
.dt__pop .select,
.dt__pop .input {
  width: 100%;
}
.dt__checklist {
  max-height: 13rem;
  overflow-y: auto;
  margin-top: 0.4rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  padding: 0.25rem;
}
.dt__check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.35rem;
  border-radius: 4px;
  cursor: pointer;
}
.dt__check:hover {
  background: hsl(var(--muted));
}
.dt__check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chart-of-accounts group header rows */
tr.coa-group td {
  background: hsl(var(--muted) / 0.5);
}

/* ---------- Searchable single-select ---------- */
.ss {
  position: relative;
  display: block;
  width: 100%;
}
.ss__native {
  /* keep in DOM as source of truth, but visually hidden */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ss__btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ss__btn::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.5;
  flex-shrink: 0;
}
.ss__btn--placeholder {
  color: hsl(var(--muted-foreground, 220 9% 46%));
}
.ss__pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.12);
  padding: 0.4rem;
  max-height: 18rem;
  display: flex;
  flex-direction: column;
}
.ss__search {
  flex-shrink: 0;
  margin-bottom: 0.35rem;
}
.ss__input {
  width: 100%;
}
.ss__list {
  overflow-y: auto;
  flex: 1;
}
.ss__opt {
  padding: 0.4rem 0.55rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: 0.9rem;
}
.ss__opt.is-active {
  background: hsl(var(--accent, 130 45% 86%) / 0.6);
}
.ss__opt.is-selected {
  font-weight: 600;
}
.ss__opt:hover {
  background: hsl(var(--muted) / 0.7);
}
.ss__none {
  padding: 0.5rem 0.55rem;
  color: hsl(var(--muted-foreground, 220 9% 46%));
  font-size: 0.85rem;
}
table.table tbody td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
}
table.table tbody tr:last-child td {
  border-bottom: none;
}
table.table tbody tr:hover {
  background: hsl(var(--muted) / 0.3);
}
.table-empty {
  text-align: center;
  padding: 2.5rem;
  color: hsl(var(--muted-foreground));
}

.dt__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}
.dt__info {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}
.dt__pager {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(60rem 60rem at 110% -10%, hsl(var(--accent)), transparent),
    hsl(var(--background));
}
.auth-card {
  width: 100%;
  max-width: 24rem;
}
.auth-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}

/* ---------- Misc ---------- */
.muted {
  color: hsl(var(--muted-foreground));
}
.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.row--between {
  justify-content: space-between;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid hsl(var(--muted));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.select-inline {
  height: 2.25rem;
  width: auto;
  min-width: 9rem;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main {
    margin-left: 0;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- POS terminal ---------- */
.pos {
  display: grid;
  grid-template-columns: 1fr 24rem;
  gap: 1rem;
  align-items: start;
}
.pos__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem;
  max-height: 60vh;
  overflow-y: auto;
}
.pos-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
  background: hsl(var(--card));
}
.pos-card:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}
.pos-card__name {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.3;
}
.pos-card__sku {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.2rem;
}
.pos-card__price {
  font-weight: 700;
  margin-top: 0.4rem;
}
.pos-card__stock {
  font-size: 0.68rem;
  color: hsl(var(--muted-foreground));
}
.pos-card--out {
  opacity: 0.55;
}

.cart {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}
.cart__items {
  max-height: 42vh;
  overflow-y: auto;
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.cart-line__name {
  font-weight: 600;
  font-size: 0.82rem;
}
.cart-line__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.qty {
  width: 3.5rem;
  height: 1.875rem;
  text-align: center;
  border: 1px solid hsl(var(--input));
  border-radius: 6px;
  background: hsl(var(--background));
  color: inherit;
}
.cart-line__total {
  font-weight: 600;
  text-align: right;
}
.cart-line__rm {
  color: hsl(var(--destructive));
  cursor: pointer;
  font-size: 0.72rem;
  background: none;
  border: none;
  padding: 0;
}
.pos-lastrate {
  font-size: 0.68rem;
  color: hsl(var(--primary));
  margin-top: 0.2rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: underline dotted;
}
.pos-lastrate:hover {
  opacity: 0.8;
}
.pos-rate-wrap {
  display: inline-flex;
  align-items: center;
}
.pos-rate {
  font-variant-numeric: tabular-nums;
}
.totes {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.totes .row--between span:last-child {
  font-variant-numeric: tabular-nums;
}
.totes .grand {
  font-size: 1.25rem;
  font-weight: 800;
}
.cart-empty {
  text-align: center;
  color: hsl(var(--muted-foreground));
  padding: 2rem 0;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .pos {
    grid-template-columns: 1fr;
  }
  .cart {
    position: static;
  }
}

/* ---------- Command palette (Ctrl+K) ---------- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cmdk[hidden] {
  display: none;
}
.cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(240 10% 3.9% / 0.5);
  backdrop-filter: blur(2px);
}
.cmdk__panel {
  position: relative;
  margin-top: 12vh;
  width: 100%;
  max-width: 36rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 20px 50px -12px hsl(240 10% 3.9% / 0.45);
  overflow: hidden;
}
.cmdk__input-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}
.cmdk__icon {
  width: 18px;
  height: 18px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.cmdk__input {
  flex: 1;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  outline: none;
}
.cmdk__esc {
  font-size: 0.66rem;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}
.cmdk__dbtoggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.cmdk__dbtoggle input {
  accent-color: hsl(var(--primary));
}
.cmdk__dbhint {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.7;
}
.cmdk__results {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.375rem;
}
.cmdk__group {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  padding: 0.5rem 0.625rem 0.25rem;
}
.cmdk__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.625rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.cmdk__item svg {
  width: 17px;
  height: 17px;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.cmdk__item.active,
.cmdk__item:hover {
  background: hsl(var(--accent));
}
.cmdk__item-main {
  flex: 1;
  min-width: 0;
}
.cmdk__item-label {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmdk__item-sub {
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
}
.cmdk__item-type {
  font-size: 0.66rem;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 0.08rem 0.35rem;
}
.cmdk__empty {
  padding: 2rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
}
.cmdk__footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
}
.cmdk__footer kbd {
  border: 1px solid hsl(var(--border));
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-right: 0.15rem;
}

/* ---------- Chip checkboxes (role/branch pickers) ---------- */
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.83rem;
  user-select: none;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.chip-check:hover {
  background: hsl(var(--accent));
}
.chip-check input {
  accent-color: hsl(var(--primary));
  margin: 0;
}
.chip-check:has(input:checked) {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  font-weight: 600;
}

/* ---------- Thin scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Inline icons ---------- */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.btn .icon {
  margin-right: 0.4rem;
}
.btn--icon .icon,
.btn--sm.btn--icon .icon {
  margin: 0;
}

/* ---------- Table row actions ---------- */
.table-actions {
  display: inline-flex;
  gap: 0.25rem;
  justify-content: flex-end;
  align-items: center;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  padding: 0;
}
.action-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.action-btn--view:hover {
  color: hsl(var(--primary));
}
.action-btn--edit:hover {
  color: hsl(217 91% 60%);
}
.action-btn--danger:hover {
  color: hsl(0 72% 51%);
  background: hsl(0 72% 51% / 0.1);
}
.action-btn form {
  display: contents;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.filter-bar .field {
  margin: 0;
  min-width: 9rem;
}
.filter-bar .field--grow {
  flex: 1 1 14rem;
}

/* ---------- Stepper (multi-step import) ---------- */
.stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.stepper__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  font-weight: 500;
}
.stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  font-size: 0.8rem;
}
.stepper__step--active {
  color: hsl(var(--foreground));
}
.stepper__step--active .stepper__num {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}
.stepper__step--done .stepper__num {
  background: hsl(var(--primary) / 0.15);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.stepper__bar {
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
  min-width: 1.5rem;
}

/* ---------- Import validation summary ---------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.summary-stat {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.summary-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.summary-stat__label {
  font-size: 0.78rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.15rem;
}
.summary-stat--ok .summary-stat__value {
  color: hsl(142 71% 35%);
}
.summary-stat--warn .summary-stat__value {
  color: hsl(38 92% 45%);
}
.summary-stat--error .summary-stat__value {
  color: hsl(0 72% 51%);
}

/* ---------- Compact density ---------- */
[data-density="compact"] .table th,
[data-density="compact"] .table td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
[data-density="compact"] .card__body {
  padding: 0.85rem 1rem;
}
[data-density="compact"] .btn {
  padding: 0.4rem 0.7rem;
}
[data-density="compact"] .content {
  padding: 1rem;
}

/* ---------- Branding: logo in sidebar ---------- */
.brand-logo {
  max-height: 2rem;
  max-width: 100%;
  object-fit: contain;
}
.brand-logo--dark {
  display: none;
}
.dark .brand-logo--light {
  display: none;
}
.dark .brand-logo--dark {
  display: inline-block;
}

/* ============================ Stage B: UI polish ============================ */

/* ---------- Collapsible mini sidebar ---------- */
.app-shell.collapsed .sidebar {
  width: var(--sidebar-mini, 4rem);
  z-index: 60;
}
.app-shell.collapsed .main {
  margin-left: var(--sidebar-mini, 4rem);
}
.app-shell.collapsed .sidebar__brand span:not(.logo) {
  display: none;
}
.app-shell.collapsed .sidebar__section {
  text-align: center;
  padding: 0.6rem 0 0.2rem;
  font-size: 0;
}
.app-shell.collapsed .sidebar__section::after {
  content: "•";
  font-size: 0.7rem;
}
.app-shell.collapsed .nav-link {
  justify-content: center;
  padding: 0.55rem;
  position: relative;
}
.app-shell.collapsed .nav-link span.nav-label {
  display: none;
}
.app-shell.collapsed .nav-group__chevron {
  display: none;
}
.app-shell.collapsed .sidebar__foot-label {
  display: none;
}
.app-shell.collapsed .sidebar__kbd {
  display: none;
}
/* In collapsed mode, surface group children as icon rows (always visible). */
.app-shell.collapsed .nav-group__items {
  display: flex !important;
}
.app-shell.collapsed .nav-sublink {
  padding-left: 0.55rem;
}
/* Collapsed search button: icon only. */
.app-shell.collapsed .sidebar__search {
  padding: 0.45rem;
}
.app-shell.collapsed .sidebar__search .sidebar__foot-label {
  display: none;
}
.app-shell.collapsed .sidebar__collapse .sidebar__foot-label {
  display: none;
}

/* JS-positioned tooltip (position:fixed so it never clips against the rail). */
.nav-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px hsl(0 0% 0% / 0.18);
  opacity: 0;
  transform: translateY(-50%) scale(0.96);
  transition:
    opacity 0.1s ease,
    transform 0.1s ease;
}
.nav-tooltip.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.sidebar__footer {
  padding: 0.6rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar__search {
  justify-content: flex-start;
  gap: 0.5rem;
}
.sidebar__search .sidebar__foot-label {
  flex: 1;
  text-align: left;
}
.sidebar__kbd {
  font-size: 0.7rem;
  opacity: 0.7;
}
.sidebar__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: transparent;
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius);
  padding: 0.4rem;
}
.sidebar__collapse:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.app-shell.collapsed .sidebar__collapse .icon {
  transform: rotate(180deg);
}

/* ---------- Topbar groups, user menu, notifications ---------- */
.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar__divider {
  width: 1px;
  height: 1.5rem;
  background: hsl(var(--border));
  margin: 0 0.25rem;
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
}
.iconbtn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.iconbtn__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font-size: 0.62rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.menu {
  position: relative;
}
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 15rem;
  z-index: 60;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.14);
  padding: 0.4rem;
  display: none;
}
.menu__panel.open {
  display: block;
}
.menu__header {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.3rem;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground));
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}
.menu__item:hover {
  background: hsl(var(--accent));
}
.menu__item--danger {
  color: hsl(var(--destructive));
}
.menu__sep {
  height: 1px;
  background: hsl(var(--border));
  margin: 0.3rem 0;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: transparent;
  cursor: pointer;
}
.user-chip:hover {
  background: hsl(var(--accent));
}
.avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
}
.user-chip__name {
  font-size: 0.82rem;
  font-weight: 500;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif {
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.83rem;
}
.notif:hover {
  background: hsl(var(--accent));
}
.notif__title {
  font-weight: 600;
}
.notif__meta {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.notif--empty {
  color: hsl(var(--muted-foreground));
  text-align: center;
  padding: 1rem;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  pointer-events: none;
  max-width: min(92vw, 24rem);
}
.toast-stack[data-pos="top-right"] {
  top: 0;
  right: 0;
}
.toast-stack[data-pos="top-left"] {
  top: 0;
  left: 0;
}
.toast-stack[data-pos="top-center"] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toast-stack[data-pos="bottom-right"] {
  bottom: 0;
  right: 0;
}
.toast-stack[data-pos="bottom-left"] {
  bottom: 0;
  left: 0;
}
.toast-stack[data-pos="bottom-center"] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-left-width: 3px;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.14);
  padding: 0.7rem 0.85rem;
  font-size: 0.85rem;
  animation: toast-in 0.18s ease-out;
}
.toast--success {
  border-left-color: hsl(var(--success));
}
.toast--error {
  border-left-color: hsl(var(--destructive));
}
.toast--info {
  border-left-color: hsl(var(--primary));
}
.toast--warning {
  border-left-color: hsl(var(--warning));
}
.toast__body {
  flex: 1;
}
.toast__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.toast.hiding {
  animation: toast-out 0.18s ease-in forwards;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ============================ POS full-screen terminal ============================ */
body.pos-fullscreen {
  background: hsl(var(--background));
}
.pos-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.pos-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
  padding: 0 1rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  flex-shrink: 0;
}
.pos-top__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pos-net {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.pos-net--online {
  color: hsl(var(--success));
}
.pos-net--offline {
  color: hsl(var(--destructive));
}

.pos-body {
  display: grid;
  grid-template-columns: 1fr 25rem;
  gap: 1rem;
  flex: 1;
  overflow: hidden;
  padding: 1rem;
}
.pos-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pos-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
  align-items: center;
}
.pos-left .pos__results {
  overflow-y: auto;
  flex: 1;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Product card size variants (small fits more, large is easier to tap). */
.pos__results--small {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}
.pos__results--medium {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pos__results--large {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.pos__results--small .pos-card__name {
  font-size: 0.8rem;
}
.pos__results--large .pos-card__name {
  font-size: 1rem;
}
.pos-right {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
}
.pos-right .cart__items {
  flex: 1;
  max-height: none;
}

/* ---------- Resizable cart / product split ---------- */
.pos-body--split {
  position: relative;
  /* Three tracks: products | handle | cart. The inline style from
     pos-splitter.js sets the exact rem widths; this is the safe fallback so
     the cart never wraps below the products if JS is slow or disabled. */
  grid-template-columns: 1fr auto 25rem;
  column-gap: 0.5rem;
}
.pos-split-handle {
  align-self: stretch;
  width: 0.75rem;
  margin: 0 -0.125rem;
  cursor: col-resize;
  position: relative;
  border-radius: 999px;
  background: transparent;
  transition: background 0.12s ease;
  flex-shrink: 0;
  touch-action: none;
}
.pos-split-handle::before {
  /* the visible grip line, centred in the gutter */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 2.5rem;
  border-radius: 999px;
  background: hsl(var(--border));
  transition: background 0.12s ease, height 0.12s ease;
}
.pos-split-handle:hover::before,
.pos-split-handle:focus-visible::before {
  background: hsl(var(--primary));
  height: 3.5rem;
}
.pos-split-handle:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}
@media (max-width: 900px) {
  /* On stacked single-column layouts the handle is meaningless. */
  .pos-split-handle { display: none; }
}

.pos-card {
  display: flex;
  flex-direction: column;
}
.pos-card__img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: calc(var(--radius) - 2px);
  background-size: cover;
  background-position: center;
  margin-bottom: 0.4rem;
}
.pos-card__img--ph {
  background: hsl(var(--muted));
}

@media (max-width: 900px) {
  .pos-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .pos-left .pos__results {
    overflow: visible;
  }
}

/* ---------- Multi-step import ---------- */
.import-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.import-steps li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.import-steps li.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}

/* ---------- Dashboard widgets ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}
.dash-line {
  padding: 0.45rem 0;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.88rem;
}
.dash-line:last-child {
  border-bottom: none;
}
.card__action {
  font-size: 0.8rem;
  color: hsl(var(--primary));
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 140px;
  padding-top: 0.5rem;
}
.spark__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.spark__bar {
  width: 100%;
  max-width: 48px;
  background: hsl(var(--primary));
  border-radius: 4px 4px 0 0;
  transition: opacity 0.15s;
}
.spark__col:hover .spark__bar {
  opacity: 0.8;
}
.spark__lbl {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.35rem;
}

/* ============================ Audit pass: responsive, a11y & polish ======== */

/* Inline two-column layouts (purchase/sale create, ledgers) collapse on small
   screens. These pages set grid-template-columns inline, so override under the
   breakpoint to a single column. */
@media (max-width: 820px) {
  .grid-2,
  [class~="dash-grid"] {
    grid-template-columns: 1fr !important;
  }
  .card__body .row {
    flex-wrap: wrap;
  }
}

/* Tables never break the layout: allow horizontal scroll, keep headers legible. */
table.table th {
  white-space: nowrap;
}
.table-wrap table.table {
  min-width: max-content;
}
@media (min-width: 821px) {
  .table-wrap table.table {
    min-width: 100%;
  }
}

/* Filter bars wrap gracefully on narrow screens. */
.card__body > .row[style*="flex-wrap"] > * {
  min-width: 0;
}

/* Keyboard accessibility: a visible focus ring on interactive elements. */
.btn:focus-visible,
.nav-link:focus-visible,
.action-btn:focus-visible,
.theme-swatch:focus-visible,
.tab:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Long content (SKUs, references, emails) shouldn't overflow their cells. */
td,
.nav-label,
.stat-card__value {
  overflow-wrap: anywhere;
}

/* Disabled buttons read as disabled. */
.btn[disabled],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Print: hide chrome so invoices/statements/reports print clean. */
@media print {
  .sidebar,
  .topbar,
  .nav-link,
  .btn,
  .no-print,
  .toast-wrap,
  .cmdk {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
  }
  .card {
    border: none !important;
    box-shadow: none !important;
  }
  .table-wrap {
    overflow: visible !important;
    border: none !important;
  }
}
/* =============================================================================
   POS terminal enhancements — append to public/assets/css/app.css
   Compact totals, quick-pick chips, payment popup, live clock, responsive
   tuning for 720p (1280×720) and 1080p (1920×1080) monitors.
   ========================================================================== */

/* Live clock in the top bar */
.pos-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/* ---- Quick-pick chips (replace category/brand selects) ---- */
.pos-quickpick {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.pos-quickpick__lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  margin-right: 0.15rem;
  min-width: 3.6rem;
}
.pos-chip {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.pos-chip:hover {
  border-color: hsl(var(--ring));
  background: hsl(var(--accent));
}
.pos-chip.is-active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* ---- Filter chips: layout (rows | inline) + image variant ---- */
/* Default 'rows': each group keeps its own line (the .pos-quickpick margin). */
.pos-quickpick-wrap--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-bottom: 0.5rem;
}
.pos-quickpick-wrap--inline .pos-quickpick {
  margin-bottom: 0;
}
/* Image chips: small thumbnail above/in-line with the name. */
.pos-chip--img {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.25rem;
}
.pos-chip__img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: hsl(var(--muted));
  flex-shrink: 0;
}
.pos-chip--img.is-active .pos-chip__img {
  outline: 2px solid hsl(var(--primary-foreground) / 0.6);
}
.pos-chip__txt {
  white-space: nowrap;
}

/* ---- Customer row + quick add ---- */
.pos-custrow {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.pos-custrow .select {
  flex: 1;
}
.pos-custpanel {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.76rem;
  padding: 0.25rem 0.1rem 0.45rem;
}
.pos-sp {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* ---- Compact cart lines: name + meta on tight rows ---- */
.pos-right .cart-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.cart-line__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}
.cart-line__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cart-line__meta .qty {
  width: 3rem;
  text-align: center;
}
.cart-line__meta .pos-rate {
  width: 5rem;
  text-align: right;
}
.cart-line__meta .pos-rate-wrap {
  min-width: 5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cart-line__total {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-line__rm {
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.2rem;
}
.cart-line__rm:hover {
  color: hsl(var(--destructive, 0 72% 51%));
}
.pos-lastrate {
  cursor: pointer;
  color: hsl(var(--primary));
}

/* ---- Compact totals block ---- */
.totes--compact {
  margin-top: 0.5rem;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.totes__line {
  display: flex;
  justify-content: space-between;
  color: hsl(var(--muted-foreground));
}
.totes__line span:last-child {
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
}
.totes__line--adj span:last-child {
  color: hsl(var(--foreground));
}
.totes__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 0.2rem;
  padding-top: 0.3rem;
  border-top: 1px solid hsl(var(--border));
}
.totes__grand span:last-child {
  font-variant-numeric: tabular-nums;
}
.totes__margin {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.1rem;
}

/* ---- Adjustments (collapsible) ---- */
.pos-adjtoggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: hsl(var(--primary));
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.35rem 0;
}
.pos-adj {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem 0 0.1rem;
}
.pos-adj__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.pos-adj__row .qty {
  width: 6rem;
  text-align: right;
}
.pos-adj__row--full {
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}
.pos-adj__row--full .input {
  width: 100%;
}

/* ---- Big charge button ---- */
.pos-pay-btn {
  margin-top: 0.6rem;
  font-size: 1rem;
  padding: 0.7rem;
}
.pos-pay-btn span {
  font-variant-numeric: tabular-nums;
}

/* ---- Payment popup quick-cash buttons ---- */
.pos-cashquick {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.pos-cashquick .btn {
  flex: 1;
  min-width: 3.5rem;
}

/* ---- Dialog sizing safety on short screens ---- */
.pos-dialog {
  max-height: 92vh;
  overflow: auto;
}
.pos-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

/* ===========================================================================
   Responsive tuning
   =========================================================================== */

/* 1080p and up: a touch more room for the cart, denser product grid */
@media (min-width: 1600px) {
  .pos-body {
    grid-template-columns: 1fr 26rem;
  }
  .pos-left .pos__results {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* 720p laptops/monitors (≤1366 wide or ≤768 tall): shrink everything to fit
   without scrolling the cart off-screen */
@media (max-width: 1366px), (max-height: 800px) {
  .pos-body {
    grid-template-columns: 1fr 22rem;
    gap: 0.6rem;
    padding: 0.6rem;
  }
  .pos-left .pos__results {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 0.45rem;
  }
  .pos-card {
    padding: 0.5rem;
  }
  .pos-card__name {
    font-size: 0.78rem;
  }
  .pos-right {
    padding: 0.7rem;
  }
  .totes__grand {
    font-size: 1.05rem;
  }
  .pos-pay-btn {
    padding: 0.6rem;
    font-size: 0.95rem;
  }
}

/* Very short screens: keep the charge button + totals pinned, scroll items only */
@media (max-height: 720px) {
  .pos-right {
    overflow: hidden;
  }
  .pos-right .cart__items {
    overflow-y: auto;
  }
}

/* Narrow / tablet: stack the two columns (existing rule kept, chips wrap) */
@media (max-width: 900px) {
  .pos-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .pos-right {
    max-height: none;
  }
}

/* =============================================================================
   UI fixes — topbar hamburger, sidebar collapse icon, table row actions
   These apply app-wide (not just POS). Append to public/assets/css/app.css.
   ========================================================================== */

/* Hamburger (mobile drawer toggle) must NOT show on desktop. The sidebar is
   permanently visible >768px, so the toggle is only meaningful on small screens. */
.iconbtn--menu {
  display: none;
}
@media (max-width: 768px) {
  .iconbtn--menu {
    display: inline-flex;
  }
}

/* Sidebar collapse chevron: base points left (collapse). When the shell is
   collapsed, app.css already rotates the .icon 180deg so it points right
   (expand). We ship chevron_left as the base now, so REMOVE or keep the
   existing rotate rule — with chevron_left base + existing 180deg rotate, the
   collapsed state points right (correct). No extra CSS needed here; this note
   documents the intended behaviour. */

/* Table row action buttons (sales/returns index) */
.row-actions {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.iconbtn--sm {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
}
.iconbtn--sm:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.iconbtn--sm .icon {
  width: 16px;
  height: 16px;
}
.iconbtn--danger:hover {
  color: hsl(var(--destructive, 0 72% 51%));
  border-color: hsl(var(--destructive, 0 72% 51%));
}

/* On narrow screens, keep action icons tappable (min 40px target) */
@media (max-width: 768px) {
  .iconbtn--sm {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Mobile drawer backdrop (paired with the app.js patch) */
@media (max-width: 768px) {
  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.45);
  }
  .sidebar.open {
    z-index: 60;
  }
}

/* ── Advances: party toggle + typeahead (round 7) ───────────────────────── */
.seg {
  display: inline-flex;
  border: 1px solid hsl(var(--border, 220 13% 91%));
  border-radius: var(--radius, 0.5rem);
  overflow: hidden;
}
.seg__btn {
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground, 220 9% 46%));
}
.seg__btn + .seg__btn {
  border-left: 1px solid hsl(var(--border, 220 13% 91%));
}
.seg__btn.is-active {
  background: hsl(var(--primary, 222 47% 31%));
  color: hsl(var(--primary-foreground, 0 0% 100%));
  font-weight: 600;
}
.lookup-results {
  position: relative;
  margin-top: 0.25rem;
  border: 1px solid hsl(var(--border, 220 13% 91%));
  border-radius: var(--radius, 0.5rem);
  background: hsl(var(--card, 0 0% 100%));
  max-height: 12rem;
  overflow: auto;
  z-index: 5;
}
.lookup-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}
.lookup-item:hover {
  background: hsl(var(--accent, 220 14% 96%));
}

/* Permission-blocked action buttons (ActionButton helper) */
.btn.is-disabled,
.action-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.is-disabled:hover,
.action-btn.is-disabled:hover {
  opacity: 0.5;
}

/* ---------- Settings: full-width management tables ---------- */
/* The tender + return-disposition cards drop their max-width so wide mapping
   tables can use the full content area. Their selects/inputs fill the cell. */
.settings-wide .card { max-width: none; }
#disp-table .select,
#disp-table .input { width: 100%; }
@media (max-width: 720px) {
  /* On narrow screens let the mapping tables scroll horizontally rather than
     squashing the ledger-account selects to illegibility. */
  #disp-table,
  .tender-table { display: block; overflow-x: auto; white-space: nowrap; }
}