:root {
  --bg: #eef4f4;
  --surface: #ffffff;
  --surface-soft: #f7fbfb;
  --text: #102326;
  --muted: #63777b;
  --line: #dbe6e8;
  --primary: #124c55;
  --primary-2: #187c80;
  --accent: #e58a45;
  --success: #24785f;
  --danger: #b94d48;
  --warning: #b56b2f;
  --shadow: 0 18px 48px rgba(11, 34, 42, .12);
  --listing-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  font-family: var(--listing-font);
}

/* Fast sale settings: compact, responsive layout for desktop and mobile. */
.fast-setup-layout {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.fast-settings-top-grid {
  grid-template-columns: minmax(320px, .92fr) minmax(360px, 1.08fr);
  gap: 12px;
}

.fast-settings-card {
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}

.fast-settings-card .grid.two,
.fast-close-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fast-settings-card label,
.fast-print-option {
  min-width: 0;
}

.fast-settings-card input,
.fast-settings-card select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fast-pos-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.fast-pos-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.fast-pos-table th:nth-child(1),
.fast-pos-table td:nth-child(1) {
  width: 92px;
}

.fast-pos-table th:nth-child(4),
.fast-pos-table td:nth-child(4) {
  width: 78px;
}

.fast-pos-table th:last-child,
.fast-pos-table td:last-child {
  width: 132px;
}

.fast-pos-table td {
  vertical-align: middle;
}

.fast-pos-table .pos-row-actions {
  min-width: 0;
  justify-content: flex-end;
}

.fast-print-settings {
  grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
}

.fast-print-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .fast-settings-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-setup-layout {
    gap: 10px;
  }

  .fast-settings-card {
    padding: 9px;
    border-radius: 8px;
  }

  .fast-settings-section-title {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
  }

  .fast-settings-card .grid.two,
  .fast-close-grid,
  .fast-print-settings,
  .fast-print-options {
    grid-template-columns: 1fr;
  }

  .fast-settings-actions,
  .fast-settings-inline-actions {
    display: flex;
    justify-content: stretch;
  }

  .fast-settings-actions button,
  .fast-settings-inline-actions button {
    width: 100%;
  }

  .fast-pos-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .fast-pos-table table,
  .fast-pos-table thead,
  .fast-pos-table tbody,
  .fast-pos-table tr,
  .fast-pos-table th,
  .fast-pos-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .fast-pos-table thead {
    display: none;
  }

  .fast-pos-table tr {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }

  .fast-pos-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 4px 0;
    border: 0;
  }

  .fast-pos-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .fast-pos-table td:last-child {
    grid-template-columns: 1fr;
    width: 100%;
    padding-top: 8px;
  }

  .fast-pos-table td:last-child::before {
    display: none;
  }

  .fast-pos-table .pos-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
  }

  .fast-pos-table .pos-row-actions button {
    width: 100%;
    flex-basis: auto;
    min-height: 32px;
  }
}

.offline-sync-form {
  display: inline-flex;
  margin: 0;
}

.offline-sync-form button {
  white-space: nowrap;
}

.warn-button {
  background: var(--warning);
  color: #fff;
}

.offline-status-badge {
  min-height: 34px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ffffff;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: none;
}

.offline-status-badge strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.offline-status-badge small {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: #ffd34d;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .offline-status-badge {
  border-color: transparent;
  background: transparent;
  color: #ffffff;
}

html[data-theme="dark"] .offline-status-badge small {
  color: #ffd34d;
}

.movement-dialog {
  width: min(820px, calc(100vw - 40px));
  max-height: min(92vh, 820px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 22px 60px rgba(8, 24, 34, .28);
}

.movement-dialog::backdrop {
  background: rgba(3, 14, 25, .54);
}

body.dialog-open {
  width: 100%;
  overflow: hidden;
  position: fixed;
}

.movement-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.movement-form h2 {
  margin: 0;
  font-size: 22px;
}

.dialog-close-form,
.movement-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding: 14px 18px 0;
  background: var(--surface);
}

.movement-dialog-head {
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.movement-dialog-head h2 {
  margin: 0;
  font-size: 22px;
}

.movement-form input,
.movement-form select,
.movement-form textarea {
  min-height: 46px;
  font-size: 16px;
}

.movement-form textarea {
  min-height: 96px;
}

@media (max-width: 560px) {
  .movement-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100vh - 10px);
    border-radius: 8px;
  }

  .movement-form {
    padding: 14px;
    gap: 14px;
  }

  .movement-dialog-head {
    padding: 12px 14px 10px;
  }

  .movement-dialog-head h2 {
    font-size: 18px;
  }

  .movement-form .grid.two {
    grid-template-columns: 1fr;
  }

  .movement-form input,
  .movement-form select,
  .movement-form textarea,
  .movement-form button {
    min-height: 48px;
    font-size: 16px;
  }

  .movement-form .actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Fast sale module */
.fast-sale-shell {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: var(--fast-left, minmax(0, 1.45fr)) 6px var(--fast-mid, minmax(120px, 168px)) 6px var(--fast-right, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) 40px;
  gap: 4px;
  height: var(--fast-sale-height, 100%);
  min-height: 0;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  contain: layout paint;
  overflow-anchor: none;
}

.fast-sale-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  --fast-sale-height: 100vh;
  min-height: 100vh;
  padding: 4px;
  background: var(--bg);
  grid-template-rows: minmax(0, 1fr) 40px;
}

.fast-sale-done-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2000;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  transform: translate(-50%, -50%) scale(1);
  min-width: min(390px, calc(100vw - 36px));
  padding: 18px 20px;
  border: 1px solid rgba(22, 163, 74, .34);
  background: linear-gradient(135deg, #ffffff, #e9fbf1);
  color: #14532d;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .28);
  opacity: 1;
  animation: fastDoneIn .22s ease-out both;
  transition: opacity .22s ease, transform .22s ease;
}

.fast-sale-done-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 6px rgba(22, 163, 74, .12);
}

.fast-sale-done-icon::before {
  content: "";
  width: 22px;
  height: 12px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.fast-sale-done-toast strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 950;
}

.fast-sale-done-toast small {
  display: block;
  margin-top: 5px;
  color: #3f6f57;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

.fast-sale-done-toast.is-hiding {
  opacity: 0;
  transform: translate(-50%, -46%) scale(.98);
}

@keyframes fastDoneIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.fast-sale-left,
.fast-sale-actions,
.fast-sale-products {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  min-height: 0;
  grid-row: 1;
  contain: layout paint;
}

.fast-sale-left {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.fast-sale-products {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.fast-sale-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  background: linear-gradient(90deg, #175aa8, #628ee3);
  color: #fff;
}

.fast-sale-total span {
  margin-right: 10px;
  font-size: 13px;
  font-weight: 700;
}

.fast-sale-total strong {
  margin-left: auto;
  text-align: right;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1;
  letter-spacing: 0;
}

.fast-sale-total button {
  min-height: 28px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.fast-sale-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 7px;
  background: #0c4385;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.fast-sale-barcode {
  display: grid;
  grid-template-columns: 66px 1fr 72px;
  gap: 6px;
  align-items: end;
  padding: 4px;
  border-bottom: 1px solid var(--line);
}

.fast-sale-message {
  grid-column: 1 / -1;
  height: 15px;
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fast-sale-message.danger {
  color: var(--danger);
}

.fast-sale-barcode label,
.fast-payment-fields label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.fast-sale-barcode input,
.fast-payment-fields input,
.fast-payment-fields select,
.fast-sale-cart input {
  min-height: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 0;
  line-height: 20px;
}

.fast-sale-barcode .barcode-field input {
  height: 30px;
  font-size: 18px;
  font-weight: 800;
}

.fast-sale-barcode button {
  min-height: 30px;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.fast-sale-cart {
  overflow: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  scrollbar-gutter: stable;
  border: 1px solid #d6dee8;
  background: #fff;
}

.fast-sale-cart table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.fast-sale-cart th:nth-child(1),
.fast-sale-cart td:nth-child(1) {
  width: auto;
}

.fast-sale-cart th:nth-child(2),
.fast-sale-cart td:nth-child(2) {
  width: 76px;
}

.fast-sale-cart th:nth-child(3),
.fast-sale-cart td:nth-child(3) {
  width: 58px;
}

.fast-sale-cart th:nth-child(4),
.fast-sale-cart td:nth-child(4) {
  width: 96px;
}

.fast-sale-cart th:nth-child(5),
.fast-sale-cart td:nth-child(5) {
  width: 102px;
}

.fast-sale-cart th:nth-child(6),
.fast-sale-cart td:nth-child(6) {
  width: 48px;
}

.fast-sale-cart th,
.fast-sale-cart td {
  border-bottom: 1px solid #e4e9f0;
  padding: 4px 6px;
  vertical-align: middle;
  text-align: left;
  line-height: 1.1;
}

.fast-sale-cart th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(#f7f9fc, #edf1f6);
  color: #344052;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.fast-sale-cart td:nth-child(2),
.fast-sale-cart td:nth-child(4),
.fast-sale-cart td:nth-child(5),
.fast-sale-cart th:nth-child(2),
.fast-sale-cart th:nth-child(4),
.fast-sale-cart th:nth-child(5) {
  text-align: right;
}

.fast-sale-cart td:nth-child(3),
.fast-sale-cart th:nth-child(3),
.fast-sale-cart td:nth-child(6),
.fast-sale-cart th:nth-child(6) {
  text-align: center;
}

.fast-sale-cart tbody tr {
  cursor: pointer;
  background: #fff;
  transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}

.fast-sale-cart tbody tr:nth-child(even) {
  background: #f8fafc;
}

.fast-sale-cart tbody tr:hover {
  background: #eef6ff;
}

.fast-sale-cart tbody tr.selected {
  background: linear-gradient(90deg, #e6f5ee, #f7fcfa);
  box-shadow: inset 4px 0 0 #0f8f5c, inset 0 0 0 1px rgba(15, 143, 92, .2);
  outline: none;
}

.fast-sale-cart tbody tr.selected td {
  color: #09251a;
}

.fast-sale-cart td strong,
.fast-sale-cart td small {
  display: block;
}

.fast-sale-cart td small {
  color: #7a8696;
  font-size: 10px;
  margin-top: 1px;
}

.fast-sale-cart input {
  width: 58px;
  text-align: right;
  min-height: 21px;
  height: 21px;
  padding: 2px 4px;
  border-color: #c9d4e1;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.fast-line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  min-height: 22px;
  min-width: 24px;
  border: 1px solid #e3a4aa;
  border-radius: 3px;
  background: #fff4f5;
  color: #a31222;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.fast-line-remove:hover,
.fast-line-remove:focus-visible {
  background: #ffdfe3;
  box-shadow: 0 0 0 2px rgba(154,16,32,.12);
}

.fast-sale-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  position: relative;
}

.fast-vertical-resizer {
  flex: 0 0 10px;
  width: 100%;
  min-height: 10px;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  background:
    linear-gradient(180deg, transparent 0 3px, color-mix(in srgb, var(--primary) 55%, transparent) 3px 5px, transparent 5px 100%);
  cursor: row-resize;
  touch-action: none;
}

.fast-resizer {
  grid-row: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 35%, transparent), transparent);
  cursor: col-resize;
  min-width: 6px;
}

.fast-sale-hidden-close {
  display: none !important;
}

.fast-action-stack {
  display: grid;
  gap: 3px;
}

.fast-pay-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  max-height: none;
  overflow: hidden;
}

.fast-payment-summary {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  font-size: 11px;
  line-height: 1.2;
}

.fast-payment-summary strong {
  font-size: 12px;
}

.fast-payment-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fast-finish-credit,
.fast-hold-sale,
.fast-hold-list {
  min-height: clamp(30px, 5dvh, 38px);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: clamp(11px, 1.35dvh, 12px);
  line-height: 1.1;
  font-weight: 900;
}

.fast-finish-credit {
  background: #3456d1;
}

.fast-hold-sale {
  background: #a06a00;
}

.fast-hold-list {
  background: #394150;
}

.fast-sale-actions form {
  display: grid;
  gap: 6px;
}

.fast-pay,
.fast-close-sale {
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 900;
}

.fast-pay {
  aspect-ratio: 1 / 1;
  min-height: clamp(42px, 7.2dvh, 62px);
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 6px 4px;
  text-align: center;
}

.fast-pay span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

.fast-pay-icon {
  width: clamp(20px, 4dvh, 30px);
  height: clamp(20px, 4dvh, 30px);
  display: block;
  position: relative;
}

.fast-pay.cash .fast-pay-icon::before {
  content: "";
  position: absolute;
  inset: 6px 2px;
  border: 2px solid rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  box-shadow: 0 0 0 3px rgba(255,255,255,.16) inset;
}

.fast-pay.cash .fast-pay-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 4px;
  background: rgba(255,255,255,.85);
}

.fast-pay.pos .fast-pay-icon::before {
  content: "";
  position: absolute;
  inset: 2px 7px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 50% 22% / 12px 3px no-repeat,
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.12));
}

.fast-pay.pos .fast-pay-icon::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 9px;
  border-top: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
}

.fast-pay.cash {
  background: #10a178;
}

.fast-pay.pos {
  background: #2772c4;
}

.fast-pay.active {
  outline: 4px solid color-mix(in srgb, #fff 60%, var(--primary));
  outline-offset: -5px;
}

.fast-close-sale {
  background: #138a38;
}

.fast-payment-fields {
  display: grid;
  gap: 6px;
}

.fast-keypad {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin-top: 0;
  min-height: var(--fast-keypad-grow, 230px);
  flex: 0 0 var(--fast-keypad-grow, 230px);
}

.fast-keypad button {
  min-height: 0;
  border-radius: 0;
  background: #101010;
  color: #fff;
  border: 1px solid #333;
  font-size: 20px;
  font-weight: 800;
  padding: 0;
}

.fast-keypad .fast-num-key,
.fast-keypad .fast-side-key,
.fast-keypad .fast-comma-key {
  grid-column: span 3;
}

.fast-keypad .fast-zero-key {
  grid-column: span 6;
}

.fast-keypad .fast-enter-key {
  grid-column: span 3;
  grid-row: span 2;
  font-size: 18px;
}

.fast-keypad .fast-key-action {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 4px 2px;
  background: #35326f;
  color: #fff;
  font-size: 10px;
  line-height: 1.05;
}

.fast-keypad .fast-key-action span {
  font-size: 22px;
  line-height: 1;
}

.fast-keypad .fast-key-action b {
  font-size: 10px;
  line-height: 1.1;
}

.fast-keypad .fast-qty-plus,
.fast-keypad .fast-qty-minus {
  grid-column: span 4;
  min-height: 0;
  font-size: 30px;
  line-height: 1;
}

.fast-keypad .fast-qty-plus {
  background: #07930a;
}

.fast-keypad .fast-qty-minus {
  background: #f41616;
}

.fast-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(42px, 4.8vw, 62px), 1fr));
  grid-auto-rows: clamp(32px, 5.2dvh, 44px);
  gap: 2px;
  padding: 1px;
  background: #e6e8ee;
  align-content: start;
  min-height: 0;
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.fast-groups a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 1px 2px;
  --group-top: #f55;
  --group-bottom: #b91022;
  --group-border: #9f0d1c;
  background: linear-gradient(var(--group-top), var(--group-bottom));
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  text-align: center;
  font-size: clamp(7px, 1dvh, 9px);
  line-height: 1.05;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  border: 1px solid var(--group-border);
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.fast-groups a:nth-child(10n+1) { --group-top: #ff5656; --group-bottom: #b90f23; --group-border: #9f0d1c; }
.fast-groups a:nth-child(10n+2) { --group-top: #ff9f2f; --group-bottom: #b65f00; --group-border: #8f4d00; }
.fast-groups a:nth-child(10n+3) { --group-top: #f4d03f; --group-bottom: #a88700; --group-border: #816800; color: #1b1b12; text-shadow: none; }
.fast-groups a:nth-child(10n+4) { --group-top: #33c481; --group-bottom: #087c4c; --group-border: #05643d; }
.fast-groups a:nth-child(10n+5) { --group-top: #2fb7d8; --group-bottom: #087296; --group-border: #065a76; }
.fast-groups a:nth-child(10n+6) { --group-top: #4f8cff; --group-bottom: #1f4ead; --group-border: #163d87; }
.fast-groups a:nth-child(10n+7) { --group-top: #8b6cff; --group-bottom: #5235b8; --group-border: #412895; }
.fast-groups a:nth-child(10n+8) { --group-top: #d75adf; --group-bottom: #8d248f; --group-border: #701b72; }
.fast-groups a:nth-child(10n+9) { --group-top: #ef6c9c; --group-bottom: #a91752; --group-border: #861141; }
.fast-groups a:nth-child(10n+10) { --group-top: #6f7f8f; --group-bottom: #364453; --group-border: #283441; }

.fast-groups a.active {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 1px rgba(0,0,0,.18);
  filter: saturate(1.15) brightness(.92);
}

.fast-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(66px, 7vw, 102px), 1fr));
  grid-auto-rows: clamp(76px, 12dvh, 96px);
  gap: 3px;
  padding: 3px;
  align-content: start;
  overflow: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  scrollbar-gutter: stable;
}

.fast-product {
  position: relative;
  min-height: 0;
  height: 100%;
  border: 1px solid #9cb5d8;
  border-radius: 0;
  padding: 0;
  background: #eef5ff;
  color: #111827;
  display: grid;
  grid-template-rows: minmax(42px, 1fr) minmax(16px, auto) 14px;
  gap: 0;
  overflow: hidden;
}

.fast-product img,
.fast-product > span {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dce8f8;
  font-size: clamp(18px, 3.8dvh, 26px);
  font-weight: 900;
}

.fast-product strong {
  padding: 1px 3px 0;
  font-size: clamp(8px, 1.2dvh, 9px);
  line-height: 1;
  min-height: 0;
  max-height: 18px;
  overflow: hidden;
}

.fast-product em {
  padding: 0 3px 2px;
  font-style: normal;
  font-size: clamp(8px, 1.15dvh, 9px);
  line-height: 12px;
  color: #0f5132;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fast-sale-bottom {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  min-height: 40px;
  padding: 2px;
  border: 1px solid var(--line);
  background: linear-gradient(#ffffff, #d9dee8);
}

.fast-sale-bottom [hidden] {
  display: none !important;
}

.fast-sale-bottom button,
.fast-sale-bottom a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #bfccd8;
  border-radius: 0;
  background: linear-gradient(#ffffff, #edf1f6);
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fast-sale-bottom button:nth-child(4),
.fast-sale-bottom button:nth-child(5) {
  background: linear-gradient(#fffbfb, #ffd5d5);
  border-color: #d98b8b;
  color: #8a1020;
}

.fast-sale-bottom button:nth-child(6) {
  background: linear-gradient(#fff, #dff2ea);
  border-color: #8fcab0;
  color: #0f5d3d;
}

.fast-cari-dialog table tr[role="button"] {
  cursor: pointer;
}

.fast-cari-dialog table tr[role="button"]:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.fast-stock-dialog table tr[role="button"] {
  cursor: pointer;
}

.fast-stock-dialog table tr[role="button"]:hover,
.fast-stock-dialog table tr[role="button"]:focus {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.fast-collection-dialog .movement-form,
.fast-stock-dialog .movement-form,
.fast-cari-dialog .movement-form {
  gap: 12px;
}

.fast-collection-dialog .actions {
  display: flex;
  justify-content: flex-end;
}

.fast-setup-layout {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fast-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), var(--surface));
}

.fast-settings-head span,
.fast-print-settings span {
  display: block;
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fast-settings-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.fast-settings-head p,
.fast-settings-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fast-settings-card {
  padding: 10px;
  border-radius: 6px;
}

.fast-settings-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.fast-settings-pos-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.fast-settings-top-grid > .fast-settings-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.fast-settings-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.fast-settings-section-title > div {
  min-width: 0;
}

.fast-settings-section-title h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.fast-settings-grid {
  gap: 8px;
}

.fast-setup-form label,
.fast-settings-card label {
  gap: 4px;
  font-size: 12px;
}

.fast-setup-form input,
.fast-setup-form select,
.fast-settings-card input,
.fast-settings-card select {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
}

.fast-close-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fast-settings-actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.fast-settings-actions button,
.fast-settings-inline-actions button {
  min-height: 32px;
  padding: 7px 11px;
  font-size: 12px;
}

.fast-settings-top-grid > .fast-settings-card .fast-settings-actions {
  margin-top: auto;
}

.fast-settings-inline-actions {
  align-self: end;
  justify-content: flex-start;
}

.fast-setup-form .grid.three {
  align-items: end;
}

.fast-print-settings {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.fast-receipt-card .fast-print-settings {
  margin-top: 0;
}

.fast-print-settings h3 {
  margin: 0;
  font-size: 14px;
}

.fast-print-settings p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fast-print-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
}

.fast-print-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fast-print-option {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.fast-print-option input {
  width: auto;
  min-height: auto;
  margin-top: 2px;
}

.fast-print-option span,
.fast-print-option b,
.fast-print-option small {
  display: block;
  min-width: 0;
}

.fast-print-option b {
  font-size: 12px;
}

.fast-print-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.fast-setup-table th,
.fast-setup-table td {
  padding: 4px 6px;
  height: 30px;
  font-size: 12px;
}

.fast-setup-table input {
  min-height: 28px;
  padding: 4px 6px;
}

.fast-setup-table .row-actions {
  gap: 4px;
}

.fast-setup-table .row-actions button {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

.fast-pos-table table {
  min-width: 700px;
}

.fast-pos-table th:last-child,
.fast-pos-table td:last-child {
  width: 142px;
}

.fast-pos-table .pos-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: end;
  min-width: 118px;
}

.fast-pos-table .pos-row-actions form {
  display: none;
}

.fast-pos-table .pos-row-actions button {
  flex: 0 0 56px;
  width: 56px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.fast-pos-table .pos-save-button {
  background: #eaf5f0;
  border: 1px solid rgba(36, 120, 95, .28);
  color: #17604d;
}

.fast-pos-table .pos-save-button:hover {
  background: #dcefe7;
}

.fast-pos-table .pos-delete-button {
  border: 1px solid rgba(185, 77, 72, .32);
  background: #fff0ef;
  color: var(--danger);
}

.fast-pos-table .pos-delete-button:hover {
  background: #ffe2df;
}

.fast-print-option:has(input:checked) {
  border-color: #0f8f5c;
  background: linear-gradient(#f4fffa, #e0f7ed);
  box-shadow: inset 0 0 0 1px rgba(15,143,92,.24);
}

.fast-printer-select {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.fast-printer-select select,
.fast-printer-select input {
  min-height: 34px;
}

.fast-printer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fast-printer-actions button {
  min-height: 30px;
}

.fast-printer-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.fast-printer-actions span.danger {
  color: #b42318;
}

.fast-printer-select small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.fast-setup-table table {
  visibility: visible !important;
  min-width: 760px;
}

.fast-setup-table,
.fast-bulk-stock-form,
.fast-stock-manage-main {
  max-width: 100%;
  min-width: 0;
}

.fast-setup-table input,
.fast-setup-table select {
  width: 100%;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 4px 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.fast-setup-table .checkline,
.fast-setup-form .checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  white-space: nowrap;
}

.fast-setup-table .checkline input,
.fast-setup-form .checkline input {
  width: auto;
  min-height: auto;
}

.fast-setup-table .row-actions {
  flex-wrap: nowrap;
}

.fast-stock-manage-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.fast-stock-list-layout {
  align-items: start;
}

.fast-stock-filter {
  position: sticky;
  top: 84px;
  align-self: start;
  min-height: calc(100vh - 140px);
  max-height: calc(100dvh - 110px);
  overflow: auto;
}

.fast-stock-filter form {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.fast-stock-manage-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fast-sale-shell:fullscreen .fast-sale-barcode {
  grid-template-columns: 60px 1fr 66px;
}

.fast-sale-shell:fullscreen .fast-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 7vw, 110px), 1fr));
}

.fast-sale-shell:fullscreen .fast-product {
  min-height: 0;
}

.fast-sale-shell:fullscreen .fast-product-grid {
  grid-auto-rows: clamp(78px, 14dvh, 112px);
}

@media (max-width: 1100px) {
  .fast-sale-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(170px, .82fr) minmax(150px, .68fr) minmax(210px, .86fr) 42px;
    height: var(--fast-sale-height, 100%);
    min-height: 0;
    overflow: hidden;
    gap: 3px;
  }

  .fast-sale-bottom {
    order: 4;
    grid-row: auto;
    grid-column: 1;
    position: sticky;
    bottom: 0;
  z-index: 5;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 38px;
  }

  .fast-resizer {
    display: none;
  }

  .fast-sale-actions {
    order: 3;
    grid-row: auto;
    grid-column: 1;
    min-height: 0;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(128px, .72fr) minmax(210px, 1fr) minmax(132px, .74fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    gap: 4px;
  }

  .fast-sale-products {
    order: 2;
    grid-row: auto;
    grid-column: 1;
  }

  .fast-sale-left {
    order: 1;
    grid-row: auto;
    grid-column: 1;
  }

  .fast-groups {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    grid-auto-rows: 38px;
    max-height: 78px;
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .fast-sale-cart,
  .fast-product-grid {
    height: 100%;
    max-height: none;
  }

  .fast-pay-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    max-height: 100%;
    overflow: auto;
  }

  .fast-pay {
    aspect-ratio: auto;
    min-height: 36px;
  }

  .fast-keypad {
    min-height: 0;
    height: 100%;
    flex: none;
  }

  .fast-vertical-resizer {
    display: none;
  }

  .fast-setup-form .grid.three {
    grid-template-columns: 1fr;
  }

  .fast-print-settings {
    grid-template-columns: 1fr;
  }

  .fast-print-options {
    grid-template-columns: 1fr;
  }

  .fast-stock-manage-layout {
    grid-template-columns: 1fr;
  }

  .fast-stock-filter {
    position: static;
    min-height: auto;
    max-height: none;
  }

  .fast-setup-table,
  .fast-stock-manage-main .table-wrap,
  .fast-bulk-stock-form .table-wrap {
    overflow-x: auto;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .fast-sale-shell {
    grid-template-rows: minmax(176px, .9fr) minmax(132px, .64fr) minmax(224px, 1fr) 70px;
    height: var(--fast-sale-height, 100%);
    min-height: 0;
    gap: 3px;
  }

  .fast-sale-total {
    padding: 4px 6px;
  }

  .fast-sale-total span {
    font-size: 11px;
    margin-right: 4px;
  }

  .fast-sale-total strong {
    font-size: 24px;
  }

  .fast-sale-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 3px 5px;
    font-size: 10px;
  }

  .fast-sale-barcode {
    grid-template-columns: 52px minmax(0, 1fr) 54px;
    gap: 4px;
    padding: 3px;
  }

  .fast-sale-barcode label {
    font-size: 10px;
    gap: 2px;
  }

  .fast-sale-barcode input {
    min-height: 28px;
    height: 28px;
    padding: 3px 5px;
  }

  .fast-sale-barcode .barcode-field input {
    height: 28px;
    font-size: 15px;
  }

  .fast-sale-barcode button {
    min-height: 28px;
    height: 28px;
    padding: 2px 4px;
    font-size: 10px;
  }

  .fast-sale-message {
    height: 13px;
    line-height: 13px;
    font-size: 10px;
  }

  .fast-sale-cart table {
    min-width: 430px;
    font-size: 10px;
  }

  .fast-sale-cart th:nth-child(2),
  .fast-sale-cart td:nth-child(2) {
    width: 58px;
  }

  .fast-sale-cart th:nth-child(3),
  .fast-sale-cart td:nth-child(3) {
    width: 42px;
  }

  .fast-sale-cart th:nth-child(4),
  .fast-sale-cart td:nth-child(4) {
    width: 70px;
  }

  .fast-sale-cart th:nth-child(5),
  .fast-sale-cart td:nth-child(5) {
    width: 74px;
  }

  .fast-sale-cart th:nth-child(6),
  .fast-sale-cart td:nth-child(6) {
    width: 38px;
  }

  .fast-sale-cart th,
  .fast-sale-cart td {
    padding: 3px 4px;
  }

  .fast-sale-cart input {
    width: 48px;
    min-height: 20px;
    height: 20px;
    padding: 2px 3px;
    font-size: 10px;
  }

  .fast-line-remove {
    width: 22px;
    min-width: 22px;
    height: 20px;
    min-height: 20px;
    font-size: 14px;
  }

  .fast-sale-bottom {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 0;
    gap: 2px;
    padding: 2px;
  }

  .fast-sale-bottom button,
  .fast-sale-bottom a {
    min-height: 30px;
    font-size: 9px;
    line-height: 1.05;
    padding: 2px;
  }

  .fast-groups {
    display: flex;
    gap: 2px;
    max-height: 38px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    scrollbar-gutter: stable;
  }

  .fast-groups a {
    flex: 0 0 74px;
    width: 74px;
    min-height: 0;
    height: 32px;
    font-size: 8px;
  }

  .fast-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    grid-auto-rows: minmax(70px, 1fr);
    max-height: none;
    gap: 2px;
    padding: 2px;
  }

  .fast-product {
    min-height: 0;
    grid-template-rows: minmax(38px, 1fr) 17px 13px;
  }

  .fast-product img,
  .fast-product > span {
    height: 100%;
  }

  .fast-sale-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(126px, 1fr);
    gap: 3px;
    padding: 3px;
  }

  .fast-pay {
    min-height: 34px;
    padding: 2px;
    gap: 2px;
    font-size: 9px;
  }

  .fast-pay-icon {
    width: 16px;
    height: 16px;
  }

  .fast-finish-credit,
  .fast-hold-sale,
  .fast-hold-list {
    min-height: 26px;
    font-size: 10px;
  }

  .fast-pay-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .fast-action-stack {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .fast-keypad {
    grid-column: 1 / -1;
    height: 100%;
    min-height: 126px;
  }

  .fast-keypad button {
    font-size: 16px;
  }

  .fast-keypad .fast-enter-key {
    font-size: 14px;
  }

  .fast-keypad .fast-key-action span {
    font-size: 18px;
  }

  .fast-keypad .fast-key-action b {
    font-size: 9px;
  }

  .fast-keypad .fast-qty-plus,
  .fast-keypad .fast-qty-minus {
    font-size: 24px;
  }

  .workspace-title-action {
    min-height: 26px;
    padding: 0 9px;
    font-size: 11px;
  }

  .fast-settings-head,
  .fast-settings-section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .fast-settings-top-grid {
    grid-template-columns: 1fr;
  }

  .fast-settings-head h1 {
    font-size: 19px;
  }

  .fast-settings-head .btn,
  .fast-settings-actions button,
  .fast-settings-inline-actions button {
    width: 100%;
  }

  .fast-setup-layout .toolbar,
  .fast-bulk-stock-form .toolbar,
  .fast-stock-manage-main .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .fast-setup-table .row-actions,
  .fast-bulk-stock-form .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .fast-pos-table .pos-row-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
  }
}

@media (max-width: 420px) {
  .fast-sale-shell {
    grid-template-rows: minmax(166px, .86fr) minmax(118px, .56fr) minmax(214px, 1fr) 66px;
  }

  .fast-sale-total strong {
    font-size: 22px;
  }

  .fast-sale-cart table {
    min-width: 400px;
  }

  .fast-sale-cart th:nth-child(2),
  .fast-sale-cart td:nth-child(2) {
    width: 54px;
  }

  .fast-sale-cart th:nth-child(4),
  .fast-sale-cart td:nth-child(4),
  .fast-sale-cart th:nth-child(5),
  .fast-sale-cart td:nth-child(5) {
    width: 66px;
  }

  .fast-groups a {
    flex-basis: 66px;
    width: 66px;
  }

  .fast-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 72px;
  }

  .fast-product {
    grid-template-rows: minmax(43px, 1fr) 16px 12px;
  }

  .fast-product strong {
    font-size: 7.5px;
    line-height: 1;
    max-height: 16px;
  }

  .fast-product em {
    font-size: 7.5px;
    line-height: 11px;
  }

  .fast-sale-actions {
    grid-template-rows: auto minmax(118px, 1fr);
  }

  .fast-finish-credit,
  .fast-hold-sale,
  .fast-hold-list {
    min-height: 24px;
    font-size: 9px;
  }

  .fast-keypad {
    min-height: 118px;
  }
}

@media (max-width: 720px) {
  body .workbench-main:has(.fast-sale-shell) {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .fast-sale-shell {
    height: auto;
    min-height: calc(100dvh - 92px);
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
  }

  .fast-sale-left,
  .fast-sale-products,
  .fast-sale-actions,
  .fast-sale-bottom {
    grid-column: 1;
    grid-row: auto;
  }

  .fast-sale-left {
    min-height: 218px;
    max-height: 36dvh;
  }

  .fast-sale-products {
    min-height: 188px;
    max-height: 30dvh;
  }

  .fast-sale-actions {
    min-height: 318px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(210px, 1fr);
    gap: 6px;
    padding: 6px;
    overflow: visible;
  }

  .fast-pay-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .fast-pay {
    min-height: 54px;
    aspect-ratio: auto;
    padding: 6px 4px;
    font-size: 12px;
    gap: 4px;
  }

  .fast-pay-icon {
    width: 22px;
    height: 22px;
  }

  .fast-action-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .fast-finish-credit,
  .fast-hold-sale,
  .fast-hold-list {
    min-height: 42px;
    padding: 4px;
    font-size: 10px;
    line-height: 1.1;
  }

  .fast-keypad {
    grid-column: 1;
    min-height: 220px;
    height: auto;
    flex: none;
    gap: 4px;
  }

  .fast-keypad button {
    min-height: 34px;
    border-width: 1px;
    font-size: 20px;
  }

  .fast-keypad .fast-enter-key {
    font-size: 16px;
  }

  .fast-keypad .fast-key-action {
    gap: 3px;
    padding: 5px 2px;
  }

  .fast-keypad .fast-key-action span {
    font-size: 22px;
  }

  .fast-keypad .fast-key-action b {
    font-size: 10px;
  }

  .fast-keypad .fast-qty-plus,
  .fast-keypad .fast-qty-minus {
    font-size: 30px;
  }

  .fast-groups {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 3px;
  }

  .fast-groups a {
    flex: 0 0 86px;
    width: 86px;
    height: 38px;
    font-size: 9px;
  }

  .fast-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    grid-auto-rows: 86px;
    gap: 4px;
    padding: 4px;
  }

  .fast-product {
    grid-template-rows: minmax(48px, 1fr) 18px 14px;
  }

  .fast-product strong {
    font-size: 8.5px;
    line-height: 1;
    max-height: 18px;
  }

  .fast-product em {
    font-size: 8.5px;
    line-height: 12px;
  }

  .fast-sale-bottom {
    position: sticky;
    bottom: 0;
    z-index: 6;
    min-height: 60px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: linear-gradient(#ffffff, #dce3ef);
  }

  .fast-sale-bottom button,
  .fast-sale-bottom a {
    min-height: 26px;
    font-size: 9px;
    padding: 3px 2px;
  }
}

@media (max-width: 420px) {
  .fast-sale-left {
    min-height: 204px;
    max-height: 35dvh;
  }

  .fast-sale-products {
    min-height: 174px;
    max-height: 28dvh;
  }

  .fast-sale-actions {
    min-height: 300px;
    grid-template-rows: auto auto minmax(200px, 1fr);
  }

  .fast-pay {
    min-height: 50px;
    font-size: 11px;
  }

  .fast-action-stack {
    grid-template-columns: 1fr;
  }

  .fast-finish-credit,
  .fast-hold-sale,
  .fast-hold-list {
    min-height: 30px;
    font-size: 10px;
  }

  .fast-keypad {
    min-height: 204px;
  }

  .fast-keypad button {
    min-height: 32px;
    font-size: 18px;
  }

  .fast-groups a {
    flex-basis: 76px;
    width: 76px;
  }

  .fast-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    grid-auto-rows: 78px;
  }

  .fast-sale-bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 58px;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .workbench-main:has(.fast-sale-shell) {
    gap: 3px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
  }

  body .workbench-main:has(.fast-sale-shell) .workspace-title {
    min-height: 24px;
    margin: 0;
    gap: 6px;
  }

  body .workbench-main:has(.fast-sale-shell) .workspace-title h1 {
    font-size: 12px;
    line-height: 1;
  }

  body .workbench-main:has(.fast-sale-shell) .workspace-title-action {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  body .workbench-main:has(.fast-sale-shell) .window-tabs {
    min-height: 28px;
  }

  body .workbench-main:has(.fast-sale-shell) .window-tabs a {
    min-height: 28px;
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

/* Stock count final responsive pass: desktop table, mobile scanner/card flow. */
.barcode-camera-button,
.barcode-scanner {
  display: none;
}

.stock-count-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.count-mobile-head {
  position: static;
  top: auto;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.count-depo-bar {
  grid-template-columns: minmax(220px, 340px) 110px;
  justify-content: start;
}

.count-scan-panel {
  grid-template-columns: minmax(260px, 1fr) 240px;
  align-items: end;
}

.count-barcode-row {
  display: grid;
  grid-template-columns: 1fr;
}

.count-entry-row {
  grid-template-columns: minmax(0, 110px) 84px;
}

.stock-count-list {
  display: block;
  padding: 10px;
}

.stock-count-list .toolbar {
  margin-bottom: 8px;
}

.stock-count-table {
  min-width: 760px;
  table-layout: fixed;
}

.stock-count-table th,
.stock-count-table td {
  padding: 7px 8px;
  font-size: 12px;
  vertical-align: middle;
}

.stock-count-table th:nth-child(1),
.stock-count-table td:nth-child(1) { width: 105px; }
.stock-count-table th:nth-child(3),
.stock-count-table td:nth-child(3) { width: 105px; }
.stock-count-table th:nth-child(4),
.stock-count-table td:nth-child(4) { width: 90px; }
.stock-count-table th:nth-child(5),
.stock-count-table td:nth-child(5) { width: 92px; }
.stock-count-table th:nth-child(6),
.stock-count-table td:nth-child(6) { width: 70px; }
.stock-count-table th:nth-child(7),
.stock-count-table td:nth-child(7) { width: 136px; }
.stock-count-table th:nth-child(8),
.stock-count-table td:nth-child(8) { width: 64px; }

.stock-count-table td {
  overflow-wrap: anywhere;
}

.qty-input {
  width: 78px;
  min-height: 32px;
  height: 32px;
  padding: 5px 7px;
  font-size: 16px;
  text-align: right;
}

.count-commit-actions {
  position: static;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding: 0;
  background: transparent;
}

.count-commit-actions button {
  width: auto;
  min-width: 210px;
}

@media (max-width: 560px) {
  .stock-count-shell {
    --count-control-h: 42px;
    gap: 8px;
  }

  .count-mobile-head {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -2px;
    padding: 8px;
    border-radius: 8px;
  }

  .count-depo-bar {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .count-depo-bar button {
    min-width: 0;
    width: 64px;
  }

  .count-scan-panel {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .count-barcode-row {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
  }

  .barcode-camera-button {
    display: inline-flex;
    min-width: 0;
    width: 84px;
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 12px;
  }

  .count-entry-row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  .count-entry-row button {
    width: 84px;
    height: var(--count-control-h);
    min-height: var(--count-control-h);
  }

  .barcode-scanner[hidden] {
    display: none;
  }

  .barcode-scanner {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(4, 13, 22, .76);
  }

  .barcode-scanner-box {
    position: relative;
    width: min(100%, 420px);
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface);
  }

  .barcode-scanner video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: #000;
    object-fit: cover;
  }

  .barcode-scan-line {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 50%;
    height: 2px;
    background: #31d28b;
    box-shadow: 0 0 18px rgba(49, 210, 139, .7);
  }

  .barcode-scanner-box button {
    width: 100%;
  }

  .stock-count-list {
    padding: 8px;
    border-radius: 8px;
  }

  .stock-count-list .toolbar {
    display: flex;
    min-height: 36px;
    margin-bottom: 8px;
  }

  .stock-count-list .toolbar h2 {
    font-size: 15px;
  }

  .stock-count-list .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .stock-count-table {
    min-width: 0;
    width: 100%;
  }

  .stock-count-table,
  .stock-count-table thead,
  .stock-count-table tbody,
  .stock-count-table tr,
  .stock-count-table td {
    display: block;
  }

  .stock-count-table thead {
    display: none;
  }

  .stock-count-table tr {
    width: 100%;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(16, 35, 38, .05);
  }

  .stock-count-table td {
    width: 100% !important;
    min-height: 30px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border: 0;
    font-size: 12px;
    white-space: normal;
  }

  .stock-count-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .stock-count-table td[data-label="Stok Adı"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
  }

  .stock-count-table td[data-label="Stok Adı"]::before {
    display: none;
  }

  .stock-count-table td[data-label="Miktar"] {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .stock-count-table td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  .stock-count-table td[data-label=""]::before {
    display: none;
  }

  .qty-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    font-size: 18px;
  }

  .small-row-button {
    width: 74px;
    height: 34px;
    min-height: 34px;
  }

  .count-commit-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    margin: 0;
    padding: 8px 0 env(safe-area-inset-bottom);
    background: linear-gradient(to top, var(--bg) 74%, transparent);
  }

  .count-commit-actions button {
    width: 100%;
    min-width: 0;
    height: 44px;
  }
}

/* Final PDA stock count mobile pass. Keep desktop table, force mobile usability. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .workbench-main {
    min-width: 0;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }

  body .workspace-title {
    margin: 0;
  }

  body .stock-count-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 8px;
  }

  body .count-start {
    width: 100%;
    max-width: none;
    padding: 12px;
  }

  body .count-start-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  body .count-start-form .actions,
  body .count-start-form button {
    width: 100%;
  }

  body .count-start-form button {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .count-mobile-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(16, 35, 38, .08);
  }

  body .count-depo-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    padding: 0;
  }

  body .count-depo-bar button {
    width: 72px;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .count-scan-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
  }

  body .count-barcode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
  }

  body .count-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-shell label,
  body .stock-count-shell input,
  body .stock-count-shell select,
  body .stock-count-shell button {
    min-width: 0;
  }

  body .stock-count-shell input,
  body .stock-count-shell select {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .barcode-camera-button {
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  body .count-entry-row button {
    width: 84px;
    min-width: 84px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .stock-count-list {
    width: 100%;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .stock-count-list .toolbar {
    padding: 0 2px;
  }

  body .stock-count-list .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body .stock-count-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }

  body .stock-count-table thead {
    display: none;
  }

  body .stock-count-table tbody {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-table tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(16, 35, 38, .05);
  }

  body .stock-count-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    min-height: 32px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .stock-count-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"]::before,
  body .stock-count-table td[data-label=""]::before {
    display: none;
  }

  body .stock-count-table td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  body .qty-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 18px;
    text-align: right;
  }

  body .small-row-button {
    width: 76px;
    min-width: 76px;
    height: 36px;
    min-height: 36px;
  }

  body .count-commit-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    margin: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 74%, transparent);
  }

  body .count-commit-actions button {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    font-size: 16px;
  }
}

/* Desktop stock count start button sizing. */
@media (min-width: 821px) {
  .count-start {
    max-width: 620px;
  }

  .count-start-form {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
  }

  .count-start-form .actions {
    width: 190px;
  }

  .count-start-form button {
    width: 190px;
    min-width: 190px;
    height: 46px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 8px;
  }
}

.quantity-pad {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body.quantity-pad-open {
    overflow: hidden;
  }

  .quantity-pad[hidden] {
    display: none;
  }

  .quantity-pad {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    align-items: end;
    padding: 12px;
    background: rgba(4, 13, 22, .68);
  }

  .quantity-pad-box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 20px 44px rgba(8, 24, 34, .28);
  }

  .quantity-pad-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .quantity-pad-display {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
    overflow: hidden;
  }

  .quantity-pad-display.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(18, 76, 85, .14);
  }

  .quantity-pad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .quantity-pad-grid button,
  .quantity-pad-actions button {
    min-width: 0;
    min-height: 52px;
    height: 52px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 950;
    touch-action: manipulation;
  }

  .quantity-pad-grid button[data-qty-key="back"] {
    font-size: 15px;
  }

  .quantity-pad-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
  }

  .quantity-pad-actions button {
    font-size: 16px;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body label,
  body .filter-panel label,
  body .record-panel label,
  body .dash-filter-bar label,
  body .movement-form label,
  body .cari-cash-form label {
    min-width: 0;
  }

  body input[type="date"],
  body input[type="datetime-local"],
  body input[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 6px;
    font-size: 15px;
  }

  body input[type="date"]::-webkit-date-and-time-value,
  body input[type="datetime-local"]::-webkit-date-and-time-value,
  body input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }
}

/* Fast sale settings page: compact desktop, clean responsive mobile. */
.fast-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible;
}

.fast-settings-layout .fast-settings-top-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(380px, 1.14fr);
  gap: 10px;
  min-width: 0;
}

.fast-settings-layout .fast-settings-pos-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.fast-settings-layout .fast-settings-card {
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border-radius: 6px;
  box-shadow: none;
}

.fast-settings-layout .fast-settings-section-title {
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.fast-settings-layout .fast-settings-section-title h2 {
  font-size: 13px;
  line-height: 1.15;
}

.fast-settings-layout .fast-settings-grid,
.fast-settings-layout .fast-close-grid {
  gap: 8px;
}

.fast-settings-layout .fast-settings-card label {
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
}

.fast-settings-layout .fast-settings-card input,
.fast-settings-layout .fast-settings-card select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  height: 32px;
  padding: 5px 8px;
  font-size: 12px;
}

.fast-settings-layout .fast-settings-actions {
  margin-top: 8px;
  padding-top: 8px;
}

.fast-settings-layout .fast-settings-actions button,
.fast-settings-layout .fast-settings-inline-actions button {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 12px;
}

.fast-settings-layout .fast-print-settings {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.fast-settings-layout .fast-print-settings h3 {
  font-size: 13px;
}

.fast-settings-layout .fast-print-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fast-settings-layout .fast-print-option {
  gap: 6px;
  padding: 6px 7px;
}

.fast-settings-layout .fast-print-option b {
  font-size: 11px;
}

.fast-settings-layout .fast-print-option small,
.fast-settings-layout .fast-print-note,
.fast-settings-layout .fast-shortcut-note {
  font-size: 10.5px;
  line-height: 1.25;
}

.fast-settings-layout .fast-shortcut-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.fast-settings-layout .fast-pos-table {
  overflow-x: auto;
}

.fast-settings-layout .fast-pos-table table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
}

.fast-settings-layout .fast-pos-table th,
.fast-settings-layout .fast-pos-table td {
  padding: 4px 6px;
  font-size: 11px;
}

.fast-settings-layout .fast-pos-table input {
  min-height: 28px;
  height: 28px;
  padding: 4px 6px;
}

.fast-settings-layout .pos-row-actions {
  white-space: nowrap;
}

.fast-settings-layout .pos-row-actions button {
  min-height: 28px;
  height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .fast-settings-layout,
  .fast-settings-layout .fast-settings-top-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-settings-layout {
    gap: 8px;
    max-width: 100%;
  }

  .fast-settings-layout .fast-settings-card {
    padding: 9px;
    border-radius: 8px;
  }

  .fast-settings-layout .fast-settings-card .grid.two,
  .fast-settings-layout .fast-close-grid,
  .fast-settings-layout .fast-print-settings,
  .fast-settings-layout .fast-print-options {
    grid-template-columns: 1fr;
  }

  .fast-settings-layout .fast-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fast-settings-layout .fast-settings-card input,
  .fast-settings-layout .fast-settings-card select {
    min-height: 38px;
    height: 38px;
    font-size: 13px;
  }

  .fast-settings-layout .fast-settings-actions,
  .fast-settings-layout .fast-settings-inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fast-settings-layout .fast-settings-actions button,
  .fast-settings-layout .fast-settings-inline-actions button {
    width: 100%;
    min-height: 38px;
  }

  .fast-settings-layout .fast-pos-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .fast-settings-layout .fast-pos-table table,
  .fast-settings-layout .fast-pos-table thead,
  .fast-settings-layout .fast-pos-table tbody,
  .fast-settings-layout .fast-pos-table tr,
  .fast-settings-layout .fast-pos-table th,
  .fast-settings-layout .fast-pos-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .fast-settings-layout .fast-pos-table thead {
    display: none;
  }

  .fast-settings-layout .fast-pos-table tr {
    display: grid;
    gap: 7px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }

  .fast-settings-layout .fast-pos-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 0;
    border: 0;
  }

  .fast-settings-layout .fast-pos-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
  }

  .fast-settings-layout .fast-pos-table .pos-row-actions {
    grid-template-columns: 1fr 1fr;
  }

  .fast-settings-layout .fast-pos-table .pos-row-actions::before {
    display: none;
  }

  .fast-settings-layout .fast-pos-table .pos-row-actions button {
    width: 100%;
    min-height: 34px;
  }
}

/* Last fast sale dialog override: readable customer, stock and hold tables. */
.fast-cari-dialog,
.fast-stock-dialog,
.fast-hold-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.fast-cari-dialog .movement-form,
.fast-stock-dialog .movement-form,
.fast-hold-dialog .movement-form {
  padding: 16px;
  gap: 10px;
}

.fast-cari-dialog .compact-table,
.fast-stock-dialog .compact-table,
.fast-hold-dialog .compact-table {
  max-height: min(62vh, 560px);
  overflow: auto !important;
}

.fast-cari-dialog .compact-table > table,
.fast-stock-dialog .compact-table > table,
.fast-hold-dialog .compact-table > table {
  visibility: visible !important;
  width: 100%;
  table-layout: fixed;
}

.fast-cari-dialog .compact-table > table {
  min-width: 780px;
}

.fast-stock-dialog .compact-table > table {
  min-width: 940px;
}

.fast-hold-dialog .compact-table > table {
  min-width: 900px;
}

.fast-cari-dialog .compact-table th,
.fast-cari-dialog .compact-table td,
.fast-stock-dialog .compact-table th,
.fast-stock-dialog .compact-table td,
.fast-hold-dialog .compact-table th,
.fast-hold-dialog .compact-table td {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.fast-cari-dialog .compact-table th:nth-child(1),
.fast-cari-dialog .compact-table td:nth-child(1),
.fast-stock-dialog .compact-table th:nth-child(1),
.fast-stock-dialog .compact-table td:nth-child(1) {
  width: 150px;
}

.fast-cari-dialog .compact-table th:nth-child(2),
.fast-cari-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 360px;
  white-space: normal;
}

.fast-cari-dialog .compact-table th:nth-child(3),
.fast-cari-dialog .compact-table td:nth-child(3) {
  width: 180px;
  text-align: right;
}

.fast-stock-dialog .compact-table th:nth-child(2),
.fast-stock-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 340px;
  white-space: normal;
}

.fast-stock-dialog .compact-table th:nth-child(3),
.fast-stock-dialog .compact-table td:nth-child(3) {
  width: 180px;
}

.fast-stock-dialog .compact-table th:nth-child(4),
.fast-stock-dialog .compact-table td:nth-child(4) {
  width: 100px;
}

.fast-stock-dialog .compact-table th:nth-child(5),
.fast-stock-dialog .compact-table td:nth-child(5) {
  width: 130px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(1),
.fast-hold-dialog .compact-table td:nth-child(1) {
  width: 190px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(2),
.fast-hold-dialog .compact-table td:nth-child(2) {
  width: 170px;
}

.fast-hold-dialog .compact-table th:nth-child(3),
.fast-hold-dialog .compact-table td:nth-child(3) {
  width: auto;
  min-width: 250px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(4),
.fast-hold-dialog .compact-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.fast-hold-dialog .compact-table th:nth-child(5),
.fast-hold-dialog .compact-table td:nth-child(5) {
  width: 135px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(6),
.fast-hold-dialog .compact-table td:nth-child(6) {
  width: 150px;
  text-align: right;
}

.fast-hold-dialog .compact-table td:nth-child(6) {
  white-space: nowrap;
}

.fast-hold-dialog .compact-table td:nth-child(6) button + button {
  margin-left: 6px;
}

.fast-sale-shell [data-complete-payment].is-loading,
.fast-sale-shell [data-complete-credit].is-loading {
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-cari-dialog,
  .fast-stock-dialog,
  .fast-hold-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 10px);
  }

  .fast-cari-dialog .movement-form,
  .fast-stock-dialog .movement-form,
  .fast-hold-dialog .movement-form {
    padding: 10px;
  }

  .fast-cari-dialog .compact-table,
  .fast-stock-dialog .compact-table,
  .fast-hold-dialog .compact-table {
    max-height: calc(100dvh - 150px);
  }
}

.fast-shortcut-card {
  gap: 10px;
}

.fast-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fast-shortcut-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.fast-shortcut-grid input {
  min-height: 38px;
  height: 38px;
  text-transform: uppercase;
}

.fast-shortcut-note {
  display: block;
  margin-top: 2px;
  line-height: 1.35;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .fast-shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final fast sale dialog guard: readable customer, stock and hold tables. */
.fast-cari-dialog,
.fast-stock-dialog,
.fast-hold-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.fast-cari-dialog .movement-form,
.fast-stock-dialog .movement-form,
.fast-hold-dialog .movement-form {
  padding: 16px;
  gap: 10px;
}

.fast-cari-dialog .compact-table,
.fast-stock-dialog .compact-table,
.fast-hold-dialog .compact-table {
  max-height: min(62vh, 560px);
  overflow: auto !important;
}

.fast-cari-dialog .compact-table > table,
.fast-stock-dialog .compact-table > table,
.fast-hold-dialog .compact-table > table {
  visibility: visible !important;
  width: 100%;
  table-layout: fixed;
}

.fast-cari-dialog .compact-table > table {
  min-width: 780px;
}

.fast-stock-dialog .compact-table > table {
  min-width: 940px;
}

.fast-hold-dialog .compact-table > table {
  min-width: 900px;
}

.fast-cari-dialog .compact-table th,
.fast-cari-dialog .compact-table td,
.fast-stock-dialog .compact-table th,
.fast-stock-dialog .compact-table td,
.fast-hold-dialog .compact-table th,
.fast-hold-dialog .compact-table td {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.fast-cari-dialog .compact-table th:nth-child(1),
.fast-cari-dialog .compact-table td:nth-child(1),
.fast-stock-dialog .compact-table th:nth-child(1),
.fast-stock-dialog .compact-table td:nth-child(1) {
  width: 150px;
}

.fast-cari-dialog .compact-table th:nth-child(2),
.fast-cari-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 360px;
  white-space: normal;
}

.fast-cari-dialog .compact-table th:nth-child(3),
.fast-cari-dialog .compact-table td:nth-child(3) {
  width: 180px;
  text-align: right;
}

.fast-stock-dialog .compact-table th:nth-child(2),
.fast-stock-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 340px;
  white-space: normal;
}

.fast-stock-dialog .compact-table th:nth-child(3),
.fast-stock-dialog .compact-table td:nth-child(3) {
  width: 180px;
}

.fast-stock-dialog .compact-table th:nth-child(4),
.fast-stock-dialog .compact-table td:nth-child(4) {
  width: 100px;
}

.fast-stock-dialog .compact-table th:nth-child(5),
.fast-stock-dialog .compact-table td:nth-child(5) {
  width: 130px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(1),
.fast-hold-dialog .compact-table td:nth-child(1) {
  width: 190px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(2),
.fast-hold-dialog .compact-table td:nth-child(2) {
  width: 170px;
}

.fast-hold-dialog .compact-table th:nth-child(3),
.fast-hold-dialog .compact-table td:nth-child(3) {
  width: auto;
  min-width: 250px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(4),
.fast-hold-dialog .compact-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.fast-hold-dialog .compact-table th:nth-child(5),
.fast-hold-dialog .compact-table td:nth-child(5) {
  width: 135px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(6),
.fast-hold-dialog .compact-table td:nth-child(6) {
  width: 150px;
  text-align: right;
}

.fast-hold-dialog .compact-table td:nth-child(6) {
  white-space: nowrap;
}

.fast-hold-dialog .compact-table td:nth-child(6) button + button {
  margin-left: 6px;
}

.fast-sale-shell [data-complete-payment].is-loading,
.fast-sale-shell [data-complete-credit].is-loading {
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-cari-dialog,
  .fast-stock-dialog,
  .fast-hold-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 10px);
  }

  .fast-cari-dialog .movement-form,
  .fast-stock-dialog .movement-form,
  .fast-hold-dialog .movement-form {
    padding: 10px;
  }

  .fast-cari-dialog .compact-table,
  .fast-stock-dialog .compact-table,
  .fast-hold-dialog .compact-table {
    max-height: calc(100dvh - 150px);
  }
}

/* Fast sale dialogs: keep search and hold lists wide enough to read. */
.fast-cari-dialog,
.fast-stock-dialog,
.fast-hold-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.fast-cari-dialog .movement-form,
.fast-stock-dialog .movement-form,
.fast-hold-dialog .movement-form {
  padding: 16px;
  gap: 10px;
}

.fast-cari-dialog .compact-table,
.fast-stock-dialog .compact-table,
.fast-hold-dialog .compact-table {
  max-height: min(62vh, 560px);
  overflow: auto !important;
}

.fast-cari-dialog .compact-table > table,
.fast-stock-dialog .compact-table > table,
.fast-hold-dialog .compact-table > table {
  visibility: visible !important;
  width: 100%;
  table-layout: fixed;
}

.fast-cari-dialog .compact-table > table {
  min-width: 780px;
}

.fast-stock-dialog .compact-table > table {
  min-width: 940px;
}

.fast-hold-dialog .compact-table > table {
  min-width: 900px;
}

.fast-cari-dialog .compact-table th,
.fast-cari-dialog .compact-table td,
.fast-stock-dialog .compact-table th,
.fast-stock-dialog .compact-table td,
.fast-hold-dialog .compact-table th,
.fast-hold-dialog .compact-table td {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.fast-cari-dialog .compact-table th:nth-child(1),
.fast-cari-dialog .compact-table td:nth-child(1) {
  width: 150px;
}

.fast-cari-dialog .compact-table th:nth-child(2),
.fast-cari-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 360px;
  white-space: normal;
}

.fast-cari-dialog .compact-table th:nth-child(3),
.fast-cari-dialog .compact-table td:nth-child(3) {
  width: 180px;
  text-align: right;
}

.fast-stock-dialog .compact-table th:nth-child(1),
.fast-stock-dialog .compact-table td:nth-child(1) {
  width: 150px;
}

.fast-stock-dialog .compact-table th:nth-child(2),
.fast-stock-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 340px;
  white-space: normal;
}

.fast-stock-dialog .compact-table th:nth-child(3),
.fast-stock-dialog .compact-table td:nth-child(3) {
  width: 180px;
}

.fast-stock-dialog .compact-table th:nth-child(4),
.fast-stock-dialog .compact-table td:nth-child(4) {
  width: 100px;
}

.fast-stock-dialog .compact-table th:nth-child(5),
.fast-stock-dialog .compact-table td:nth-child(5) {
  width: 130px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(1),
.fast-hold-dialog .compact-table td:nth-child(1) {
  width: 190px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(2),
.fast-hold-dialog .compact-table td:nth-child(2) {
  width: 170px;
}

.fast-hold-dialog .compact-table th:nth-child(3),
.fast-hold-dialog .compact-table td:nth-child(3) {
  width: auto;
  min-width: 250px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(4),
.fast-hold-dialog .compact-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.fast-hold-dialog .compact-table th:nth-child(5),
.fast-hold-dialog .compact-table td:nth-child(5) {
  width: 135px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(6),
.fast-hold-dialog .compact-table td:nth-child(6) {
  width: 150px;
  text-align: right;
}

.fast-hold-dialog .compact-table td:nth-child(6) {
  white-space: nowrap;
}

.fast-hold-dialog .compact-table td:nth-child(6) button + button {
  margin-left: 6px;
}

.fast-sale-shell [data-complete-payment].is-loading,
.fast-sale-shell [data-complete-credit].is-loading {
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-cari-dialog,
  .fast-stock-dialog,
  .fast-hold-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 10px);
  }

  .fast-cari-dialog .movement-form,
  .fast-stock-dialog .movement-form,
  .fast-hold-dialog .movement-form {
    padding: 10px;
  }

  .fast-cari-dialog .compact-table,
  .fast-stock-dialog .compact-table,
  .fast-hold-dialog .compact-table {
    max-height: calc(100dvh - 150px);
  }
}

/* Final fast sale settings responsive overrides. Keep this at the end. */
.fast-setup-layout {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.fast-settings-top-grid {
  grid-template-columns: minmax(320px, .92fr) minmax(360px, 1.08fr);
  gap: 12px;
  min-width: 0;
}

.fast-settings-card {
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}

.fast-settings-card .grid.two,
.fast-close-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fast-settings-card label,
.fast-print-option {
  min-width: 0;
}

.fast-settings-card input,
.fast-settings-card select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fast-pos-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.fast-pos-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.fast-pos-table th:nth-child(1),
.fast-pos-table td:nth-child(1) {
  width: 92px;
}

.fast-pos-table th:nth-child(4),
.fast-pos-table td:nth-child(4) {
  width: 78px;
}

.fast-pos-table th:last-child,
.fast-pos-table td:last-child {
  width: 132px;
}

.fast-pos-table td {
  vertical-align: middle;
}

.fast-pos-table .pos-row-actions {
  min-width: 0;
  justify-content: flex-end;
}

.fast-print-settings {
  grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
}

.fast-print-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .fast-settings-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-setup-layout {
    gap: 10px;
  }

  .fast-settings-card {
    padding: 9px;
    border-radius: 8px;
  }

  .fast-settings-section-title {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
  }

  .fast-settings-card .grid.two,
  .fast-close-grid,
  .fast-print-settings,
  .fast-print-options {
    grid-template-columns: 1fr;
  }

  .fast-settings-actions,
  .fast-settings-inline-actions {
    display: flex;
    justify-content: stretch;
  }

  .fast-settings-actions button,
  .fast-settings-inline-actions button {
    width: 100%;
  }

  .fast-pos-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .fast-pos-table table,
  .fast-pos-table thead,
  .fast-pos-table tbody,
  .fast-pos-table tr,
  .fast-pos-table th,
  .fast-pos-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .fast-pos-table thead {
    display: none;
  }

  .fast-pos-table tr {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }

  .fast-pos-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 4px 0;
    border: 0;
  }

  .fast-pos-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
  }

  .fast-pos-table td:last-child {
    grid-template-columns: 1fr;
    width: 100%;
    padding-top: 8px;
  }

  .fast-pos-table td:last-child::before {
    display: none;
  }

  .fast-pos-table .pos-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    justify-content: stretch;
  }

  .fast-pos-table .pos-row-actions button {
    width: 100%;
    flex-basis: auto;
    min-height: 32px;
  }
}

/* Final restaurant mobile date inputs. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .restaurant-day-filter input[type="date"],
  body .restaurant-day-filter input[type="datetime-local"] {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 6px !important;
    font-size: 11px !important;
    line-height: 1.1;
  }

  body .restaurant-day-filter input[type="date"]::-webkit-date-and-time-value,
  body .restaurant-day-filter input[type="datetime-local"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  body .restaurant-day-filter input[type="date"]::-webkit-calendar-picker-indicator,
  body .restaurant-day-filter input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 16px;
    margin-left: 1px;
  }
}

/* Final print modal layout guard. */
.print-designer {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden;
}

.print-design-body {
  min-height: 0;
  overflow: hidden;
}

.print-design-grid {
  min-height: 0;
  overflow: auto;
}

.print-designer-actions {
  flex-direction: row !important;
  align-self: end;
  width: 100%;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .print-designer {
    max-height: calc(100dvh - 16px) !important;
  }

  .print-designer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final print modal layout guard. */
.print-designer {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden;
}

.print-design-body {
  min-height: 0;
  overflow: hidden;
}

.print-design-grid {
  min-height: 0;
  overflow: auto;
}

.print-designer-actions {
  flex-direction: row !important;
  align-self: end;
  width: 100%;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .print-designer {
    max-height: calc(100dvh - 16px) !important;
  }

  .print-designer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final print designer visibility guard. */
.print-designer-backdrop {
  z-index: 9999 !important;
  overflow: auto;
  isolation: isolate;
}

.print-designer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  color: var(--text) !important;
}

.print-title-field,
.print-design-options label,
.print-column-row {
  position: relative;
  z-index: 2;
  color: var(--text) !important;
}

.print-title-field input,
.print-title-field select,
.print-design-options input,
.print-width-input {
  position: relative;
  z-index: 3;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.print-title-field select option {
  background: #fff;
  color: #102027;
}

html[data-theme="dark"] .print-title-field select option {
  background: #0e1728;
  color: #f3f7f8;
}

.print-column-row span {
  position: relative;
  z-index: 2;
  color: var(--text) !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .print-designer-backdrop {
    align-items: start;
    justify-items: center;
    padding: 10px;
  }

  .print-designer {
    width: 100%;
    max-height: calc(100dvh - 20px);
  }
}

/* Final mobile list guard: keep data grids readable with horizontal scroll. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .record-panel,
  body .card,
  body .sub-report,
  body .table-wrap.compact-table,
  body .report-config-wrap {
    min-width: 0;
    max-width: 100%;
  }

  body .table-wrap.compact-table,
  body .report-config-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body .compact-table table.report-config-table {
    width: max-content;
    min-width: max-content;
  }

  body .compact-table th,
  body .compact-table td {
    min-width: 72px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* User list final mobile override: no horizontal table, each user becomes a compact row card. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-table-card,
  body .user-list-table-wrap,
  body .user-list-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body .user-list-table-card {
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .user-list-table,
  body .user-list-table colgroup,
  body .user-list-table col,
  body .user-list-table thead,
  body .user-list-table tbody,
  body .user-list-table tr,
  body .user-list-table th,
  body .user-list-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .user-list-table colgroup {
    display: none !important;
  }

  body .user-list-table thead {
    display: none !important;
  }

  body .user-list-table tbody {
    display: grid !important;
    gap: 10px;
  }

  body .user-list-table tr {
    display: grid !important;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 16px rgba(16, 35, 38, .06);
  }

  body .user-list-table td {
    display: grid !important;
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .user-list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
  }

  body .user-list-table td[data-label="Kullanıcı"] {
    grid-template-columns: 1fr;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body .user-list-table td[data-label="Kullanıcı"]::before {
    display: none;
  }

  body .user-table-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body .user-table-person strong,
  body .user-table-username {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }

  body .user-card-actions {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 7px;
  }

  body .user-card-actions .btn,
  body .user-card-actions button,
  body .user-card-actions form {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
  }

  body .user-card-actions .btn,
  body .user-card-actions button {
    min-height: 38px;
    padding: 0 6px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Final user list mobile layout: turn the table into readable rows without horizontal scroll. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-head.compact {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
  }

  body .user-list-head.compact h2 {
    font-size: 18px;
  }

  body .user-list-head.compact .btn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }

  body .user-list-table-card {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  body .user-list-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    border: 0;
    background: transparent;
  }

  body .user-list-table,
  body .user-list-table colgroup,
  body .user-list-table col,
  body .user-list-table thead,
  body .user-list-table tbody,
  body .user-list-table tr,
  body .user-list-table th,
  body .user-list-table td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  body .user-list-table {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  body .user-list-table thead {
    display: none;
  }

  body .user-list-table tbody {
    display: grid;
    gap: 10px;
  }

  body .user-list-table tr {
    display: grid;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 16px rgba(16, 35, 38, .06);
    overflow: hidden;
  }

  body .user-list-table td {
    display: grid;
    grid-template-columns: minmax(94px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 0;
    border: 0;
    color: var(--text);
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  body .user-list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    line-height: 1.15;
  }

  body .user-list-table td[data-label="Kullanıcı"] {
    grid-template-columns: 1fr;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }

  body .user-list-table td[data-label="Kullanıcı"]::before {
    display: none;
  }

  body .user-table-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body .user-table-person .user-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  body .user-table-person strong,
  body .user-table-username {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  body .user-list-table .pill {
    width: fit-content;
  }

  body .user-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body .user-card-actions .btn,
  body .user-card-actions button,
  body .user-card-actions form {
    width: 100%;
    min-width: 0;
  }
}

/* Final mobile date-field guard: prevent native date controls from overflowing cards/forms. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body label,
  body .filter-panel label,
  body .record-panel label,
  body .dash-filter-bar label,
  body .movement-form label,
  body .cari-cash-form label {
    min-width: 0;
  }

  body input[type="date"],
  body input[type="datetime-local"],
  body input[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 6px;
    font-size: 15px;
  }

  body input[type="date"]::-webkit-date-and-time-value,
  body input[type="datetime-local"]::-webkit-date-and-time-value,
  body input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }
}

/* User list final mobile override: no horizontal table, each user becomes a compact row card. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-table-card,
  body .user-list-table-wrap,
  body .user-list-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body .user-list-table-card {
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .user-list-table,
  body .user-list-table thead,
  body .user-list-table tbody,
  body .user-list-table tr,
  body .user-list-table th,
  body .user-list-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .user-list-table colgroup {
    display: none !important;
  }

  body .user-list-table thead {
    display: none !important;
  }

  body .user-list-table tbody {
    display: grid !important;
    gap: 10px;
  }

  body .user-list-table tr {
    display: grid !important;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 16px rgba(16, 35, 38, .06);
  }

  body .user-list-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .user-list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
  }

  body .user-list-table td[data-label="Kullanıcı"] {
    grid-template-columns: 1fr;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body .user-list-table td[data-label="Kullanıcı"]::before {
    display: none;
  }

  body .user-table-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body .user-table-person strong,
  body .user-table-username {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }

  body .user-card-actions {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 7px;
  }

  body .user-card-actions .btn,
  body .user-card-actions button,
  body .user-card-actions form {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
  }

  body .user-card-actions .btn,
  body .user-card-actions button {
    min-height: 38px;
    padding: 0 6px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Final dark theme pass. Keep every late-added screen readable in night mode. */
html[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111a2b;
  --surface-soft: #172238;
  --text: #e8eef7;
  --muted: #a7b4c8;
  --line: #2a3a55;
  --primary-2: #39a8a4;
  --success: #4fc39a;
  --danger: #f0716d;
  --warning: #f0a75d;
  --shadow: 0 18px 48px rgba(0, 0, 0, .38);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .workbench-shell,
html[data-theme="dark"] .main {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .workbench-main {
  background: var(--bg);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .record-panel,
html[data-theme="dark"] .analytics-board,
html[data-theme="dark"] .adjustment-box,
html[data-theme="dark"] .price-scan-panel,
html[data-theme="dark"] .price-result,
html[data-theme="dark"] .count-mobile-head,
html[data-theme="dark"] .stock-count-list,
html[data-theme="dark"] .quantity-pad-box,
html[data-theme="dark"] .movement-dialog,
html[data-theme="dark"] .dialog-close-form,
html[data-theme="dark"] .movement-dialog-head {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .company-card,
html[data-theme="dark"] .finance-metrics article,
html[data-theme="dark"] .product-image,
html[data-theme="dark"] .soft-note,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .check-line,
html[data-theme="dark"] .counter-box,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .window-tabs a,
html[data-theme="dark"] .report-column-menu summary {
  background: var(--surface-soft);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .window-tabs a.active,
html[data-theme="dark"] th,
html[data-theme="dark"] .report-column-options,
html[data-theme="dark"] .report-header-panel,
html[data-theme="dark"] .report-menu-action,
html[data-theme="dark"] .report-menu-section summary,
html[data-theme="dark"] .report-menu-list,
html[data-theme="dark"] .quantity-pad-display {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: var(--line);
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] .click-row:hover,
html[data-theme="dark"] .report-column-options label:hover {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .filter-panel h2,
html[data-theme="dark"] .panel-head h2,
html[data-theme="dark"] .price-result.empty strong,
html[data-theme="dark"] .product-info strong,
html[data-theme="dark"] .product-info h2,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .finance-metrics strong {
  color: var(--text);
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .brand span,
html[data-theme="dark"] .company-card span,
html[data-theme="dark"] .company-card p,
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .input-note,
html[data-theme="dark"] .product-info p,
html[data-theme="dark"] .product-info span,
html[data-theme="dark"] .price-box span,
html[data-theme="dark"] .price-box small,
html[data-theme="dark"] .count-list-head span,
html[data-theme="dark"] .stock-count-shell label,
html[data-theme="dark"] .window-tabs a,
html[data-theme="dark"] .window-tabs small,
html[data-theme="dark"] .finance-metrics span,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .soft-note,
html[data-theme="dark"] .no-product-image {
  color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0e1728;
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 70%, var(--line));
}

html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] button.secondary {
  background: #223149;
  color: var(--text);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] button.secondary:hover {
  background: #2a3b56;
}

html[data-theme="dark"] .pill {
  background: color-mix(in srgb, var(--success) 18%, var(--surface-soft));
  color: #8fe6c2;
}

html[data-theme="dark"] .pill.warn {
  background: color-mix(in srgb, var(--warning) 18%, var(--surface-soft));
  color: #ffc68a;
}

html[data-theme="dark"] .pill.danger {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface-soft));
  color: #ffaaa6;
}

html[data-theme="dark"] .flash {
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: #9be8c9;
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
}

html[data-theme="dark"] .price-box {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
}

html[data-theme="dark"] .price-box strong {
  color: color-mix(in srgb, var(--primary) 70%, #ffffff);
}

html[data-theme="dark"] .logo-preview {
  background: #0e1728;
  border: 1px solid var(--line);
}

html[data-theme="dark"] .report-config-table th.report-drop-target {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-soft));
}

html[data-theme="dark"] .report-col-resizer::after {
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}

html[data-theme="dark"] .mobile-scrim {
  background: rgba(0, 0, 0, .52);
}

html[data-theme="dark"] .dash-filter-bar,
html[data-theme="dark"] .dash-settings-head,
html[data-theme="dark"] .dashboard-stock-filter .filter-tabs {
  background: linear-gradient(#172238, #111a2b);
  border-color: var(--line);
}

html[data-theme="dark"] .dash-filter-bar input,
html[data-theme="dark"] .dash-filter-bar select,
html[data-theme="dark"] .dash-filter-bar button,
html[data-theme="dark"] .dash-card-tools button,
html[data-theme="dark"] .dash-widget-head .dash-card-tools button,
html[data-theme="dark"] .dash-settings-head button {
  background: #0e1728;
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .dash-kpi,
html[data-theme="dark"] .dash-widget,
html[data-theme="dark"] .dashboard-stock-report,
html[data-theme="dark"] .dashboard-stock-grid,
html[data-theme="dark"] .dash-settings-panel,
html[data-theme="dark"] .cari-cash-shell,
html[data-theme="dark"] .cari-section,
html[data-theme="dark"] .amount-panel {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] .dash-widget-head,
html[data-theme="dark"] .dashboard-grid-foot,
html[data-theme="dark"] .cari-cash-toolbar,
html[data-theme="dark"] .cari-tabs {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .dash-settings-options label:hover,
html[data-theme="dark"] .dash-payment-legend div,
html[data-theme="dark"] .dash-empty,
html[data-theme="dark"] .dashboard-stock-filter fieldset {
  background: var(--surface-soft);
  border-color: var(--line);
}

html[data-theme="dark"] .dash-donut::after {
  background: var(--surface);
}

html[data-theme="dark"] .dash-widget-head,
html[data-theme="dark"] .cari-section legend,
html[data-theme="dark"] .filter-tabs span.active {
  color: #8fb8ff;
}

html[data-theme="dark"] .cari-picker-dialog [data-cari-pick]:hover,
html[data-theme="dark"] .cari-picker-dialog [data-cari-pick]:focus {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  outline-color: color-mix(in srgb, var(--primary) 44%, transparent);
}

html[data-theme="dark"] .amount-panel input.credit {
  background: color-mix(in srgb, #ff8a65 24%, #0e1728);
}

html[data-theme="dark"] .amount-panel input.debit {
  background: color-mix(in srgb, #5bd18b 22%, #0e1728);
}

/* Stock count mobile hardening: desktop stays table, mobile becomes PDA-first. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .workbench-main {
    min-width: 0;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }

  body .workspace-title {
    margin: 0;
  }

  body .stock-count-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 8px;
  }

  body .count-start {
    width: 100%;
    max-width: none;
    padding: 12px;
  }

  body .count-start-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  body .count-start-form .actions,
  body .count-start-form button {
    width: 100%;
  }

  body .count-start-form button {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .count-mobile-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(16, 35, 38, .08);
  }

  body .count-depo-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    padding: 0;
  }

  body .count-depo-bar button {
    width: 72px;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .count-scan-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
  }

  body .count-barcode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
  }

  body .count-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-shell label,
  body .stock-count-shell input,
  body .stock-count-shell select,
  body .stock-count-shell button {
    min-width: 0;
  }

  body .stock-count-shell input,
  body .stock-count-shell select {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .barcode-camera-button {
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  body .count-entry-row button {
    width: 84px;
    min-width: 84px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .stock-count-list {
    width: 100%;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .stock-count-list .toolbar {
    padding: 0 2px;
  }

  body .stock-count-list .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body .stock-count-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }

  body .stock-count-table thead {
    display: none;
  }

  body .stock-count-table tbody {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-table tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(16, 35, 38, .05);
  }

  body .stock-count-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    min-height: 32px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .stock-count-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"]::before,
  body .stock-count-table td[data-label=""]::before {
    display: none;
  }

  body .stock-count-table td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  body .qty-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 18px;
    text-align: right;
  }

  body .small-row-button {
    width: 76px;
    min-width: 76px;
    height: 36px;
    min-height: 36px;
  }

  body .count-commit-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    margin: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 74%, transparent);
  }

  body .count-commit-actions button {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    font-size: 16px;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(24, 124, 128, .14), transparent 32rem),
    radial-gradient(circle at 100% 0, rgba(229, 138, 69, .12), transparent 30rem),
    var(--bg);
  color: var(--text);
}

html[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111a2b;
  --surface-soft: #172238;
  --text: #e8eef7;
  --muted: #95a3b8;
  --line: #26364f;
  --primary-2: #39a8a4;
  --shadow: 0 18px 48px rgba(0, 0, 0, .32);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: #0b1220;
}

html[data-theme="dark"] .license-warning-banner {
  border-bottom-color: rgba(245, 158, 11, .24);
  background: #3b2a0d;
  color: #ffe8a8;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .license-warning-banner span {
  color: #f6c867;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.workbench-sidebar,
.workbench-top,
.module-nav,
.nav-item,
.nav-group summary,
.nav-group a,
.window-tabs,
.window-tabs a,
.workspace-title,
.compact-table {
  font-family: var(--listing-font);
}

.workbench-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  background: var(--bg);
}

.workbench-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 14px 10px;
  background: #071d37;
  color: #eef6ff;
}

.brand.compact {
  gap: 10px;
  margin: 4px 8px 18px;
}

.brand.compact img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.brand.compact strong {
  font-size: 15px;
}

.brand.compact span {
  max-width: 150px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fast-product.is-added {
  border-color: #0f8f5c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(15,143,92,.22);
  transform: translateY(-1px);
  filter: saturate(1.12) brightness(1.03);
}

.fast-product.is-added::after {
  content: "Eklendi";
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 999px;
  background: #0f8f5c;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}

.workbench-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 10px 14px;
}

.workbench-top {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -10px;
  padding: 6px 12px;
  background: #071d37;
  color: #eef6ff;
}

.license-warning-banner {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(112, 71, 0, .18);
  background: #fff3cf;
  color: #5c3b00;
  box-shadow: 0 10px 24px rgba(86, 54, 0, .12);
}

.license-warning-banner strong,
.license-warning-banner span {
  display: block;
}

.license-warning-banner strong {
  font-size: 14px;
  font-weight: 850;
}

.license-warning-banner span {
  font-size: 12px;
  color: #7a5208;
  white-space: nowrap;
}

.license-expired-page {
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(229, 138, 69, .18), transparent 34%), var(--bg);
}

.license-expired-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.license-expired-card {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  text-align: center;
}

.license-expired-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
}

.license-expired-card span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(185, 77, 72, .12);
  color: var(--danger);
  font-weight: 850;
}

.license-expired-card h1 {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.15;
}

.license-expired-card p {
  margin: 0;
  color: var(--muted);
}

.license-expired-card > strong {
  font-size: 22px;
  color: var(--danger);
}

.license-expired-card small {
  color: var(--muted);
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .license-warning-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 9px 12px;
  }

  .license-warning-banner span {
    white-space: normal;
  }

  .license-expired-card {
    padding: 24px 18px;
  }

  .license-expired-card h1 {
    font-size: 24px;
  }
}

.workbench-top strong,
.workbench-top span {
  display: block;
  font-size: 12px;
}

.workbench-top span {
  margin-top: 2px;
  color: rgba(255,255,255,.64);
}

.workbench-top .offline-status-badge,
.workbench-top .offline-status-badge strong {
  color: #ffffff;
}

.workbench-top .offline-status-badge small {
  color: #ffd34d;
}

.mobile-top-logo,
.mobile-sidebar-footer,
.mobile-menu-close {
  display: none;
}

.top-company {
  justify-self: center;
  min-height: 34px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  color: #f4fbff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

.company-control-kicker,
.company-control-value {
  display: block;
  max-width: 100%;
}

.company-control-kicker {
  color: rgba(255,255,255,.66);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.company-control-value {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-select-button {
  cursor: pointer;
  font: inherit;
}

.company-select-button:hover,
.company-select-button:focus {
  background: rgba(255,255,255,.14);
}

.company-year-dialog .movement-dialog-head {
  align-items: flex-start;
}

.company-year-dialog {
  width: min(860px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
}

.company-year-dialog .dialog-close-form {
  position: absolute;
  top: 21px;
  right: 22px;
  z-index: 8;
  padding: 0;
  background: transparent;
}

.company-year-dialog .dialog-close-form button {
  min-height: 38px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(8, 24, 34, .12);
}

.company-year-dialog .movement-form {
  padding: 0;
  gap: 0;
}

.company-year-dialog .movement-dialog-head {
  padding: 20px 22px;
  padding-right: 118px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--surface-soft));
}

.company-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.company-dialog-head [data-company-load-form] {
  align-self: center;
}

.company-dialog-head [data-company-load-form] button {
  min-width: 150px;
  min-height: 38px;
}

.company-year-dialog .movement-dialog-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.company-dialog-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-dialog-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 28%, transparent);
}

.company-year-list {
  padding: 16px 20px 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 80%, transparent), var(--surface)),
    var(--surface);
}

.company-picker-grid {
  margin-top: 0;
  gap: 14px;
  align-items: stretch;
}

.company-select-card {
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: 16px;
  align-content: space-between;
  min-height: 132px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
    linear-gradient(180deg, var(--surface), var(--surface-soft));
  box-shadow: 0 10px 24px rgba(8, 24, 34, .06);
}

.company-select-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
}

.company-card-title {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-left: 2px;
}

.company-select-card strong {
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-size: 15px;
}

.company-select-card span {
  font-weight: 750;
}

.company-select-card .year-list button {
  min-width: 68px;
  min-height: 38px;
  border-radius: 6px;
  font-weight: 900;
}

.company-select-card .year-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 8px;
  width: 100%;
}

.company-select-card .year-list form,
.company-select-card .year-list button {
  width: 100%;
}

.theme-switch {
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-switch .btn,
.theme-switch button {
  min-height: 30px;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 12px;
}

.theme-toggle {
  width: 38px;
  min-width: 38px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.theme-toggle span {
  grid-area: 1 / 1;
  margin: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  transition: transform .18s ease, opacity .18s ease;
}

.theme-toggle .theme-moon {
  opacity: 0;
  transform: translateY(12px) rotate(-35deg);
}

html[data-theme="dark"] .theme-toggle .theme-sun {
  opacity: 0;
  transform: translateY(-12px) rotate(35deg);
}

html[data-theme="dark"] .theme-toggle .theme-moon {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

.module-nav {
  display: grid;
  gap: 4px;
}

.nav-item,
.nav-group summary,
.nav-group a {
  min-height: 32px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 800;
}

.nav-item,
.nav-group summary {
  padding: 0 10px;
  cursor: pointer;
}

.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "⌄";
  margin-left: auto;
  color: rgba(255,255,255,.46);
}

.nav-group[open] summary,
.nav-item.active,
.nav-item:hover,
.nav-group a.active,
.nav-group a:hover {
  background: rgba(255,255,255,.11);
  color: #fff;
}

.nav-group a {
  min-height: 29px;
  margin: 3px 0 3px 18px;
  padding: 0 10px;
  color: rgba(255,255,255,.68);
}

.window-tabs {
  min-height: 38px;
  display: flex;
  align-items: end;
  gap: 4px;
  overflow-x: auto;
  padding-top: 6px;
  border-bottom: 1px solid var(--line);
}

.window-tabs a {
  min-width: 132px;
  max-width: 210px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.window-tabs a.active {
  height: 36px;
  border-top: 3px solid var(--primary);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -1px 0 var(--primary), 0 1px 0 var(--surface);
}

.window-tabs span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.window-tabs small {
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px;
}

.window-tabs small:hover {
  color: var(--danger);
}

.workspace-title {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.workspace-title h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
}

.workspace-title-action {
  min-height: 28px;
  padding: 0 12px;
  white-space: nowrap;
}

.workbench-main:has(.fast-sale-shell) {
  height: 100dvh;
  overflow: hidden;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  padding-bottom: 6px;
}

.workbench-main:has(.fast-sale-shell) .flash {
  margin: 0;
  padding: 7px 10px;
}

.record-layout {
  min-height: calc(100vh - 140px);
  display: grid;
  grid-template-columns: 294px minmax(0, 1fr);
  gap: 8px;
}

.record-layout.filter-collapsed {
  grid-template-columns: 46px minmax(0, 1fr);
}

body.filters-default-collapsed .record-layout:not(.definition-layout) {
  grid-template-columns: 46px minmax(0, 1fr);
}

.record-layout.definition-layout {
  grid-template-columns: minmax(0, 1fr);
}

.filter-panel,
.record-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
}

.filter-panel {
  padding: 10px;
  position: relative;
  transition: width .18s ease, padding .18s ease;
}

.filter-panel > .filter-tabs {
  margin: -10px -10px 10px;
}

.filter-toggle {
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  margin: 0 0 8px;
}

.filter-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-panel.is-collapsed {
  padding: 8px;
  overflow: hidden;
}

body.filters-default-collapsed .filter-panel {
  min-height: 46px;
  padding: 8px;
  overflow: hidden;
}

.filter-panel.is-collapsed h2,
.filter-panel.is-collapsed form,
.filter-panel.is-collapsed .filter-tabs {
  display: none;
}

body.filters-default-collapsed .filter-panel h2,
body.filters-default-collapsed .filter-panel form,
body.filters-default-collapsed .filter-panel .filter-tabs {
  display: none;
}

.filter-panel.is-collapsed .filter-toggle {
  margin: 0;
}

.filter-panel h2,
.panel-head h2 {
  margin: 0;
  font-size: 13px;
}

.filter-panel form {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.record-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.panel-head {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.report-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.report-controls-host {
  position: relative;
}

.report-table-actions {
  position: static;
  z-index: 2;
  flex-wrap: nowrap;
  min-width: 86px;
  transform: none;
}

.report-print-button {
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.record-panel > .actions {
  padding: 0 12px 12px;
}

.soft-note,
.empty-state {
  margin-top: 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 12px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
}

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
}

.compact-table {
  border: 0;
  border-radius: 0;
}

.compact-table table {
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.compact-table > table:not(.stock-count-table):not(.report-config-table) {
  visibility: hidden;
}

.fast-sale-shell .compact-table > table,
.fast-sale-shell .compact-table > table:not(.stock-count-table):not(.report-config-table),
.fast-cari-dialog .compact-table > table,
.fast-stock-dialog .compact-table > table {
  visibility: visible !important;
}

.compact-table th,
.compact-table td {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.18;
  vertical-align: middle;
  white-space: nowrap;
}

.compact-table tbody tr {
  height: 25px;
}

.compact-table th {
  height: 27px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  color: #102326;
  font-size: 11px;
  font-weight: 850;
  text-transform: none;
}

.compact-table td {
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.compact-table tbody tr:nth-child(even) td {
  background: var(--surface-soft);
}

.compact-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.compact-table .btn,
.compact-table button,
.compact-table .row-open-button,
.compact-table .small-row-button {
  min-height: 22px;
  height: 22px;
}

.report-config-wrap {
  position: relative;
}

.report-config-table {
  table-layout: fixed;
  visibility: visible;
}

.report-column-menu {
  position: sticky;
  left: 0;
  z-index: 3;
  width: max-content;
  min-width: 128px;
  margin: 8px 8px 6px;
}

.panel-head .report-column-menu {
  position: relative;
  left: auto;
  z-index: 10;
  margin: 0;
}

.report-column-menu summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.panel-head .report-column-menu summary {
  min-height: 28px;
  padding: 5px 9px;
}

.report-column-menu summary::-webkit-details-marker {
  display: none;
}

.report-column-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-height: min(320px, 70vh);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel-head .report-column-options {
  left: auto;
  right: 0;
}

.report-column-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.report-column-options label:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.report-column-options input {
  width: auto;
  min-height: auto;
}

.report-column-reset {
  width: 100%;
  min-height: 32px;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 12px;
}

.report-config-table th,
.report-config-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-config-table th {
  overflow: visible;
}

.report-config-table th.report-draggable-th {
  position: relative;
  cursor: grab;
  user-select: none;
  padding-right: 34px;
}

.report-config-table.report-dragging th.report-draggable-th {
  cursor: grabbing;
}

.report-config-table th.report-drop-target {
  box-shadow: inset 3px 0 0 var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-soft));
}

.report-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.report-col-resizer::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 4px;
  width: 1px;
  height: 56%;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.report-col-resizing,
.report-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.report-header-menu {
  position: absolute;
  top: 0;
  right: 4px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
}

.report-header-dots {
  width: 24px;
  min-width: 24px;
  height: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.report-header-dots:hover,
.report-header-menu.open .report-header-dots {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.report-header-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  width: 230px;
  max-height: min(520px, 72vh);
  overflow: visible;
  display: none;
  padding: 0;
  border: 1px solid #d8dce3;
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 36px rgba(8, 24, 34, .22);
}

.report-header-menu.open .report-header-panel {
  display: block;
}

.print-designer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 18, 28, .52);
}

.print-designer {
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.print-designer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.print-designer-head strong,
.print-designer-head span {
  display: block;
}

.print-designer-head strong {
  font-size: 15px;
}

.print-designer-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.print-title-field {
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
}

.print-design-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.print-design-body[hidden] {
  display: none !important;
}

.print-title-field input,
.print-title-field select,
.print-design-options input,
.print-width-input {
  min-height: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 12px;
}

.print-design-grid {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.print-column-row {
  grid-template-columns: 22px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--surface);
  font-size: 12px;
}

.print-column-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.print-column-row input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
}

.print-design-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.print-designer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 160px));
  justify-content: end;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.print-designer-actions button,
.print-designer-head button {
  min-height: 34px;
  border-radius: 6px;
}

.print-designer-actions button {
  width: 100%;
  min-width: 0;
}

.print-designer-actions button[hidden] {
  display: none !important;
}

.report-menu-action,
.report-menu-section summary {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.report-menu-action:hover,
.report-menu-section summary:hover {
  background: var(--surface-soft);
}

.report-menu-section summary {
  cursor: pointer;
  list-style: none;
  justify-content: space-between;
}

.report-menu-section summary::after {
  content: "›";
  color: #2d5596;
  font-weight: 900;
}

.report-menu-section summary::-webkit-details-marker {
  display: none;
}

.report-menu-list {
  display: none;
  position: absolute;
  left: calc(100% - 1px);
  width: 255px;
  max-height: 280px;
  overflow: auto;
  padding: 6px 8px;
  border: 1px solid #d8dce3;
  background: var(--surface);
  box-shadow: 8px 16px 32px rgba(8, 24, 34, .16);
}

.report-menu-section[open] > .report-menu-list {
  display: block;
}

.report-menu-columns > .report-menu-list {
  top: 88px;
}

.report-menu-placement > .report-menu-list {
  top: 132px;
}

.report-menu-list label {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.report-menu-list input {
  width: 20px;
  min-height: 20px;
  accent-color: #315894;
}

.dashboard-stock-report {
  min-height: 560px;
  display: grid;
  grid-template-columns: 315px minmax(0, 1fr);
  gap: 12px;
}

.dashboard-stock-filter {
  padding: 0;
  overflow: hidden;
}

.filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.filter-tabs span {
  min-height: 42px;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.filter-tabs span.active {
  border-bottom: 3px solid var(--primary);
  color: var(--primary);
}

.filter-panel .filter-tabs span {
  min-height: 34px;
  font-size: 12px;
}

.filter-panel label {
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #0f2428;
  font-size: 11px;
  font-weight: 800;
}

.filter-panel input,
.filter-panel select {
  min-height: 24px;
  height: 24px;
  border-radius: 3px;
  padding: 3px 7px;
  font-size: 12px;
  background: #fff;
}

.filter-panel .filter-actions {
  position: sticky;
  bottom: 0;
  margin: 8px -6px -6px;
  padding: 6px;
  background: linear-gradient(to top, var(--surface) 82%, rgba(255,255,255,0));
}

.filter-panel .filter-actions button,
.filter-panel .filter-actions .btn {
  min-height: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 12px;
}

.dashboard-stock-filter form {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.dashboard-stock-filter fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.dashboard-stock-filter legend {
  padding: 0 4px;
  font-weight: 800;
}

.radio-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
}

.radio-line input {
  width: auto;
  min-height: auto;
}

.dashboard-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

.filter-actions button,
.filter-actions .btn {
  width: 100%;
  text-decoration: none;
}

.dashboard-stock-grid {
  min-width: 0;
}

.row-open-button {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
}

.row-open-head,
.row-open-cell {
  width: 36px;
  min-width: 36px;
  text-align: center;
}

.row-open-cell {
  padding-left: 6px;
  padding-right: 6px;
}

.dashboard-grid-foot {
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.dash-board-report {
  position: relative;
  display: grid;
  gap: 10px;
}

.dash-board-report[data-dashboard-board] {
  visibility: hidden;
}

.dash-board-report[data-dashboard-board].is-ready {
  visibility: visible;
}

.dash-filter-bar {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(170px, 230px) 160px 120px;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: linear-gradient(#edf2f7, #dfe6ef);
}

.dash-filter-bar label {
  display: grid;
  gap: 3px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.dash-filter-bar input,
.dash-filter-bar select,
.dash-filter-bar button,
.dash-filter-bar .btn {
  min-height: 32px;
  height: 32px;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  color: #1f2933;
}

.dash-filter-bar button,
.dash-filter-bar .btn {
  width: 100%;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dash-kpi {
  position: relative;
  min-height: 96px;
  display: grid;
  align-content: space-between;
  padding: 12px;
  border: 2px solid #0b8ed0;
  border-radius: 3px;
  background: var(--surface);
}

.dash-area {
  transition: opacity .16s ease, transform .16s ease;
}

.dash-area.is-dragging {
  opacity: .55;
}

.dash-kpi.blue { border-color: #008cff; }
.dash-kpi.cyan { border-color: #00b8e6; }
.dash-kpi.yellow { border-color: #f0bd00; }
.dash-kpi.green { border-color: #00885b; }
.dash-kpi.red { border-color: #ff2f3f; }

.dash-kpi strong {
  color: var(--text);
  font-size: 15px;
}

.dash-kpi span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.dash-kpi b {
  justify-self: end;
  color: var(--text);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
}

.dash-card-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 5px;
}

.dash-card-tools button,
.dash-widget-head .dash-card-tools button {
  min-width: 28px;
  min-height: 26px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: 4px;
  font-weight: 800;
}

.dash-drag-handle {
  cursor: grab;
  position: relative;
  color: transparent !important;
}

.dash-drag-handle::before {
  content: "⤢";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.dash-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-widget {
  position: relative;
  min-height: 270px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}

.dash-widget.is-collapsed {
  min-height: 42px;
}

.dash-widget.is-collapsed .dash-widget-body {
  display: none;
}

.dash-widget-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: #00449e;
  font-weight: 900;
}

.dash-widget-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 0 8px;
  color: var(--text);
  font-size: 14px;
}

.dash-widget-head .dash-card-tools {
  position: static;
}

.dash-widget-body {
  min-height: 228px;
}

.dash-chart {
  min-height: 230px;
  padding: 18px 16px;
}

.dash-bar-combo {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  border-bottom: 0;
}

.dash-bar-item {
  width: 100%;
  min-height: 26px;
  display: grid;
  grid-template-columns: minmax(115px, 210px) minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
}

.dash-bar-item i {
  min-width: 3%;
  height: 16px;
  display: block;
  background: #079bb8;
}

.dash-bar-item em {
  display: none;
}

.dash-bar-item span {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-bar-item b {
  color: var(--text);
  font-size: 11px;
  text-align: right;
}

.dash-payment-analysis {
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
}

.dash-donut-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.dash-donut {
  width: min(210px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
}

.dash-donut::after {
  content: "";
  position: absolute;
  inset: 58px;
  border-radius: 50%;
  background: var(--surface);
}

.dash-donut-wrap strong {
  position: absolute;
  max-width: 112px;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

.dash-payment-legend {
  display: grid;
  gap: 10px;
}

.dash-payment-legend div {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 112px 56px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.dash-payment-legend span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.dash-payment-legend i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #6b7280;
}

.dash-payment-legend .cash i { background: #f7b500; }
.dash-payment-legend .pos i { background: #0b8ed0; }
.dash-payment-legend .other i { background: #6b7280; }

.dash-payment-legend b,
.dash-payment-legend em {
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.dash-empty {
  min-height: 228px;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.dash-settings-panel {
  position: absolute;
  top: 54px;
  right: 12px;
  z-index: 35;
  width: min(360px, calc(100vw - 28px));
  max-height: min(470px, calc(100vh - 118px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid #cfdbe2;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(8, 24, 34, .18);
}

.dash-settings-panel[hidden] {
  display: none;
}

.dash-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#fbfdff, #eef4f7);
}

.dash-settings-head strong {
  color: var(--text);
  font-size: 13px;
}

.dash-settings-head button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
  background: #eef3f7;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.dash-settings-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 8px;
  overflow: auto;
}

.dash-settings-options label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.dash-settings-options label:hover {
  border-color: #d9e3ea;
  background: #f5f8fa;
}

.dash-settings-options input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  accent-color: var(--primary);
}

.cari-cash-shell {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cari-cash-toolbar {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.cari-cash-toolbar > div,
.cari-cash-search {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cari-cash-search input {
  width: 170px;
  min-height: 28px;
}

.cari-tabs {
  display: flex;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.cari-tabs button {
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 800;
}

.cari-tabs button.active {
  border-bottom-color: var(--primary);
}

.cari-cash-form {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.cari-section {
  min-width: 0;
  margin: 0;
  padding: 14px 12px 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.cari-section legend {
  padding: 0 8px;
  color: #00449e;
  font-weight: 900;
}

.cari-info-grid,
.cari-motion-grid {
  display: grid;
  gap: 12px 20px;
}

.cari-info-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cari-motion-grid {
  grid-template-columns: 1fr;
}

.cari-info-grid .wide {
  grid-column: span 1;
}

.cari-cash-form label {
  display: grid;
  gap: 4px;
  color: var(--text);
  font-size: 12px;
}

.cari-cash-form input,
.cari-cash-form select,
.cari-cash-form button {
  min-height: 28px;
  border-radius: 4px;
}

.cari-pick-field {
  position: relative;
}

.cari-pick-field input[type="text"],
.cari-pick-field input:not([type]) {
  min-height: 36px;
  padding-right: 50px;
}

.cari-pick-field .icon-button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  min-width: 46px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 0 4px 4px 0;
  font-size: 18px;
}

.cari-picker-dialog {
  width: min(900px, calc(100vw - 24px));
}

.cari-picker-dialog .movement-form {
  gap: 12px;
}

.cari-picker-dialog input[data-cari-picker-filter] {
  width: 100%;
  min-height: 34px;
}

.cari-picker-dialog [data-cari-pick] {
  cursor: pointer;
}

.cari-picker-dialog [data-cari-pick]:hover,
.cari-picker-dialog [data-cari-pick]:focus {
  background: #eef4ff;
  outline: 2px solid rgba(49, 88, 148, .28);
  outline-offset: -2px;
}

.movement-fields [hidden] {
  display: none !important;
}

.amount-panel {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.amount-panel strong {
  align-self: center;
}

.amount-mode,
.check-line {
  display: flex !important;
  align-items: center;
  gap: 14px;
}

.amount-panel input.credit {
  background: #ffd1c4;
}

.amount-panel input.debit {
  background: #dff1e3;
}

.movement-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
}

.movement-fields label {
  min-width: 0;
  grid-template-rows: auto 30px;
  align-items: end;
}

.movement-fields input,
.movement-fields select {
  width: 100%;
}

.movement-fields .wide {
  grid-column: 1 / -1;
}

.cari-cash-shell.is-cari-locked [data-cari-lock] {
  opacity: .62;
}

.cari-cash-shell.is-cari-locked [data-cari-lock] input,
.cari-cash-shell.is-cari-locked [data-cari-lock] select {
  cursor: not-allowed;
}

.cari-cash-toolbar button:disabled,
.cari-cash-form fieldset:disabled input,
.cari-cash-form fieldset:disabled select {
  opacity: .7;
}

.cari-cash-form {
  gap: 6px;
  padding: 8px;
}

.cari-section {
  padding: 8px 10px 10px;
}

.cari-info-grid,
.cari-motion-grid,
.movement-fields {
  gap: 6px 8px;
}

.amount-panel {
  padding: 8px;
  gap: 8px;
}

.cari-cash-form label {
  gap: 3px;
  font-size: 11px;
}

.cari-cash-form input,
.cari-cash-form select,
.cari-cash-form button {
  min-height: 30px;
  height: 30px;
  padding: 5px 8px;
}

.required {
  color: #d42432;
}

@media (max-width: 980px) {
  .dash-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-payment-analysis {
    grid-template-columns: 1fr;
  }

  .dash-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-widget-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stock-report {
    grid-template-columns: 1fr;
  }

  .dashboard-stock-filter form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-stock-filter fieldset,
  .dashboard-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  label,
  .cari-cash-form label,
  .filter-panel label,
  .dash-filter-bar label,
  .movement-form label {
    min-width: 0;
  }

  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    min-height: 42px;
    padding-left: 8px;
    padding-right: 6px;
    font-size: 15px;
  }

  .dash-filter-bar,
  .dash-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dash-filter-bar {
    padding: 8px;
  }

  .dash-settings-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 64px;
    width: auto;
    max-height: min(440px, calc(100vh - 84px));
  }

  .dash-settings-options {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .dash-settings-options label {
    min-height: 38px;
    font-size: 13px;
  }

  .dash-kpi {
    min-height: 88px;
    padding: 10px;
  }

  .dash-kpi b {
    font-size: 20px;
  }

  .dash-widget {
    min-height: 240px;
  }

  .dash-chart {
    padding: 14px 12px 42px;
    overflow-x: auto;
  }

  .dash-bar-combo {
    gap: 8px;
  }

  .dash-bar-item {
    width: 100%;
    grid-template-columns: minmax(90px, 1fr) minmax(70px, 1fr);
  }

  .dash-bar-item b {
    grid-column: 2;
    text-align: left;
  }

  .dash-donut {
    width: 170px;
  }

  .dash-donut::after {
    inset: 46px;
  }

  .dash-payment-analysis {
    min-height: auto;
    padding: 12px;
  }

  .dash-payment-legend div {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dash-payment-legend b,
  .dash-payment-legend em {
    text-align: left;
  }

  .dashboard-stock-filter form {
    grid-template-columns: 1fr;
  }

  .dashboard-stock-filter fieldset,
  .dashboard-filter-actions {
    grid-column: auto;
  }

  .dashboard-filter-actions {
    grid-template-columns: 1fr;
  }

  .report-header-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 84px;
    width: auto;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }

  .report-menu-list {
    position: static;
    width: auto;
    max-height: 260px;
    box-shadow: none;
  }

  .print-designer-backdrop {
    padding: 8px;
    align-items: stretch;
  }

  .print-designer {
    max-height: calc(100vh - 16px);
    padding: 10px;
  }

  .print-designer-head,
  .print-designer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .print-designer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .print-design-options {
    grid-template-columns: 1fr;
  }

  .print-column-row {
    grid-template-columns: 22px minmax(0, 1fr) 74px;
  }

  .cari-cash-toolbar,
  .cari-cash-toolbar > div,
  .cari-cash-search {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .cari-cash-toolbar > div {
    width: 100%;
  }

  .cari-cash-search,
  .cari-cash-search input {
    width: 100%;
  }

  .cari-info-grid,
  .cari-motion-grid {
    grid-template-columns: 1fr;
  }

  .amount-panel,
  .movement-fields {
    grid-template-columns: 1fr;
  }

  .cari-cash-form {
    padding: 8px;
  }
}

.click-row {
  cursor: pointer;
}

.click-row:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.restaurant-summary,
.restaurant-live-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 12px;
}

.restaurant-summary article,
.restaurant-live-head article {
  height: 78px;
  display: grid;
  align-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.restaurant-live-head .btn {
  height: 78px;
  border-radius: 6px;
}

.restaurant-live-head {
  grid-template-columns: repeat(4, minmax(132px, 180px));
  justify-content: start;
  align-items: stretch;
}

.restaurant-live-head article,
.restaurant-live-head .btn {
  height: 58px;
  padding: 8px 10px;
}

.restaurant-summary span,
.restaurant-live-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.restaurant-summary strong,
.restaurant-live-head strong {
  font-size: 20px;
}

.restaurant-live-head strong {
  font-size: 17px;
}

.report-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.report-split > div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: var(--surface);
}

.report-split h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.bar-chart {
  display: grid;
  gap: 8px;
}

.chart-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bar-row {
  display: grid;
  grid-template-columns: 96px minmax(80px, 1fr) 94px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.bar-row div {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.bar-row strong {
  text-align: right;
  font-size: 12px;
}

.table-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 420px));
  gap: 12px;
  padding: 0 12px 12px;
  align-items: start;
  justify-content: start;
}

.live-table-card {
  min-width: 0;
  width: 100%;
  height: 540px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
  overflow: hidden;
}

.table-card-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 48px 44px;
  align-items: center;
  gap: 10px;
}

.table-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
}

.table-mark span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.32);
}

.table-title {
  min-width: 0;
}

.table-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 950;
}

.table-title small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.table-card-top b {
  grid-column: 1 / -1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary);
  font-size: 20px;
  white-space: nowrap;
}

.table-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  min-height: 34px;
}

.table-card-stats span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.restaurant-live-actions {
  display: grid;
  gap: 7px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.restaurant-live-actions form,
.restaurant-line-action {
  display: grid;
  gap: 6px;
  margin: 0;
}

.restaurant-live-actions form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.restaurant-live-actions .restaurant-gift-form {
  grid-template-columns: 1fr;
}

.restaurant-live-actions .restaurant-gift-form button {
  width: 100%;
}

.restaurant-discount-form {
  grid-template-columns: 84px minmax(70px, .7fr) minmax(0, 1fr) auto !important;
}

.restaurant-live-actions input,
.restaurant-live-actions select,
.restaurant-live-actions button,
.restaurant-line-action input,
.restaurant-line-action button {
  min-height: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 12px;
}

.live-table-card ul {
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.live-table-card li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 12px;
}

.live-table-card li:has(.restaurant-line-action) {
  grid-template-columns: minmax(0, 1fr) 112px auto;
  align-items: center;
  min-height: 38px;
}

.restaurant-line-action {
  grid-template-columns: auto;
  justify-self: end;
}

.restaurant-line-action .small-row-button {
  width: auto;
  min-width: 62px;
  padding: 0 10px;
}

.live-table-card li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.live-table-card li span small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--warning);
  font-size: 10px;
  font-weight: 950;
}

.live-table-card li.gift-line {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.live-table-card em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
  font-weight: 850;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
}

.auth-visual {
  display: grid;
  align-content: center;
  gap: 28px;
  padding: clamp(28px, 7vw, 88px);
  background: linear-gradient(135deg, #07313a, #124c55 46%, #2f7d78);
  color: #fff;
}

.auth-visual h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .96;
  letter-spacing: 0;
}

.auth-visual p {
  max-width: 640px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.55;
}

.auth-panel {
  display: grid;
  align-content: center;
  padding: clamp(22px, 5vw, 52px);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px);
}

.auth-panel input {
  font-size: 16px;
}

.remember-login-line {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 76, 85, .06);
  color: var(--text);
}

.remember-login-line input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.remember-login-line span,
.remember-login-line strong,
.remember-login-line small {
  display: block;
}

.remember-login-line small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: contain;
}

.brand strong { display: block; font-size: 20px; }
.brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 800; }

.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  margin-bottom: 18px;
}

.tabs a {
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.tabs a.active { background: var(--primary); color: #fff; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px;
  background: #071d37;
  color: #fff;
}

.sidebar .brand { margin-bottom: 22px; }
.sidebar .brand span { color: rgba(255,255,255,.66); }

.admin-sidebar {
  box-shadow: 14px 0 38px rgba(3, 14, 25, .12);
}

.nav {
  display: grid;
  gap: 6px;
}

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 11px;
  border-radius: 6px;
  color: rgba(255,255,255,.82);
  font-weight: 850;
  font-size: 14px;
}

.nav a:hover,
.nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.main {
  min-width: 0;
  padding: 18px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}

.topbar h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.admin-permission-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.admin-module-check {
  margin-top: 10px;
}

.admin-page-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-page-list span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.admin-permission-grid .permission-card {
  align-content: start;
}

.admin-permission-grid .permission-card > div:first-child {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid .wide { grid-column: 1 / -1; }

.card {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.card h2, .card h3 { margin: 0 0 12px; letter-spacing: 0; }
.card p { color: var(--muted); line-height: 1.5; }

.metric {
  min-height: 110px;
  display: grid;
  align-content: space-between;
  border-left: 5px solid var(--primary);
}
.metric span { color: var(--muted); font-weight: 850; font-size: 12px; }
.metric strong { font-size: 28px; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.btn, button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.btn.secondary, button.secondary { background: #dfeaec; color: var(--text); }
.btn.danger, button.danger { background: var(--danger); color: #fff; }
.btn.success, button.success { background: var(--success); color: #fff; }

label {
  display: grid;
  gap: 5px;
  color: #243a3f;
  font-size: 12px;
  font-weight: 900;
}

.filter-panel label:has(select[name="ara_group"]:disabled),
.filter-panel label:has(select[name="alt_group"]:disabled),
.dashboard-stock-filter label:has(select[name="ara_group"]:disabled),
.dashboard-stock-filter label:has(select[name="alt_group"]:disabled) {
  display: none;
}

.input-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 11px;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  min-width: 0;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-variant-numeric: tabular-nums;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-left: 2px;
  padding: 0;
}

textarea { min-height: 90px; resize: vertical; }

/* Wolvox-style compact data entry surfaces. */
.record-panel .form-grid,
.cash-entry-form .grid.two,
.user-form .user-fields-grid {
  gap: 6px 8px;
}

.record-panel .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  padding: 8px;
}

.cash-entry-form .grid.two {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.record-panel .form-grid .wide {
  grid-column: span 2;
}

.cash-entry-form .grid.two .wide {
  grid-column: span 2;
}

.record-panel .form-grid label,
.cash-entry-form .grid.two label,
.movement-form .grid.two label,
.user-form .user-fields-grid label {
  gap: 3px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 850;
}

.record-panel .form-grid input,
.record-panel .form-grid select,
.record-panel .form-grid textarea,
.cash-entry-form input,
.cash-entry-form select,
.cash-entry-form textarea,
.movement-form .grid.two input,
.movement-form .grid.two select,
.movement-form .grid.two textarea,
.user-form .user-fields-grid input,
.user-form .user-fields-grid select {
  min-height: 30px;
  height: 30px;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
}

.record-panel .form-grid textarea,
.cash-entry-form textarea,
.movement-form .grid.two textarea {
  min-height: 54px;
  height: 54px;
}

.record-panel .form-grid .stock-depot-toggle {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}

.record-panel .form-grid .stock-depot-toggle input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
}

.record-panel > .actions,
.cash-entry-form .actions,
.user-form > .actions {
  padding-top: 6px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 13px;
}

.check-line input { width: auto; min-height: auto; }

.counter-list {
  display: grid;
  gap: 12px;
}

.counter-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
}

.counter-box legend {
  padding: 0 8px;
  font-weight: 800;
  color: var(--text);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.table-wrap.compact-table {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  border-color: var(--line);
  background: var(--surface);
}

.report-config-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

th, td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  z-index: 1;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
}

.report-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 950;
  border-top: 2px solid var(--line);
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #e9f4f2;
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
}

.pill.warn { background: #fff2e8; color: var(--warning); }
.pill.danger { background: #fff0ef; color: var(--danger); }

.flash {
  margin-bottom: 12px;
  border: 1px solid rgba(36,120,95,.24);
  background: #eef8f4;
  color: #1d654f;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 850;
}

.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: contain;
  background: #092b33;
  padding: 8px;
}

.perm-table { min-width: 980px; }
.perm-table td:not(:first-child), .perm-table th:not(:first-child) { text-align: center; }
.perm-table input { width: auto; min-height: auto; }

.footer-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.module-tile {
  min-height: 118px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #1f7f75 58%, var(--accent));
  box-shadow: var(--shadow);
}

.module-tile strong {
  font-size: 24px;
}

.module-tile span {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 800;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.company-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.company-card strong { font-size: 16px; }
.company-card span, .company-card p { margin: 0; color: var(--muted); font-size: 12px; }

.year-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.year-list form { margin: 0; }

.mobile-scrim,
.mobile-menu-button {
  display: none;
}

.analytics-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
  padding: 12px;
}

.finance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.bank-balance-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cash-report-summary {
  padding: 12px;
  margin-top: 0;
}

.finance-metrics article {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.finance-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.finance-metrics strong {
  font-size: 21px;
}

.dashboard-charts {
  padding: 12px 0 0;
}

.sub-report {
  padding: 12px;
}

.sub-report h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.restaurant-product-sales {
  padding-top: 0;
}

.restaurant-product-table {
  min-width: 980px;
}

.restaurant-product-table th:nth-child(1),
.restaurant-product-table td:nth-child(1),
.restaurant-product-table th:nth-child(5),
.restaurant-product-table td:nth-child(5),
.restaurant-product-table th:nth-child(7),
.restaurant-product-table td:nth-child(7),
.restaurant-product-table th:nth-child(10),
.restaurant-product-table td:nth-child(10) {
  text-align: right;
}

.restaurant-product-table th:nth-child(8),
.restaurant-product-table td:nth-child(8),
.restaurant-product-table th:nth-child(9),
.restaurant-product-table td:nth-child(9) {
  text-align: right;
  white-space: nowrap;
}

.adjustment-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.adjustment-box {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
}

.adjustment-box h3 {
  margin: 0;
  font-size: 14px;
}

.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.row-actions form {
  margin: 0;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.inline-form input {
  min-height: 38px;
}

.admin-users-layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-users-card h2,
.admin-create-card h2 {
  margin-top: 0;
}

.user-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
}

.user-hero span,
.user-dashboard-grid span,
.user-limit small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.user-hero h2 {
  margin: 4px 0 6px;
  font-size: 22px;
  letter-spacing: 0;
}

.user-hero p,
.user-list-head p,
.user-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.user-limit {
  display: grid;
  align-content: center;
  justify-items: end;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.user-limit strong {
  color: var(--primary);
  font-size: 28px;
  font-weight: 950;
}

.user-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.user-dashboard-grid article {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.user-dashboard-grid strong {
  color: var(--primary);
  font-size: 30px;
  font-weight: 950;
}

.user-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-list-head.compact {
  min-height: 58px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.user-list-head.compact h2 {
  margin: 0;
}

.user-list-head.compact .pill {
  margin-left: auto;
}

.user-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.user-list-table-card {
  padding: 0;
  overflow: hidden;
}

.user-list-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.user-list-table {
  min-width: 980px;
  table-layout: fixed;
}

.user-list-table th,
.user-list-table td {
  padding: 8px 9px;
  vertical-align: middle;
}

.user-list-table th:nth-child(1),
.user-list-table td:nth-child(1) { width: 190px; }
.user-list-table th:nth-child(2),
.user-list-table td:nth-child(2) { width: 130px; }
.user-list-table th:nth-child(3),
.user-list-table td:nth-child(3) { width: 170px; }
.user-list-table th:nth-child(4),
.user-list-table td:nth-child(4) { width: 170px; }
.user-list-table th:nth-child(5),
.user-list-table td:nth-child(5) { width: 96px; }
.user-list-table th:nth-child(6),
.user-list-table td:nth-child(6) { width: 88px; }
.user-list-table th:nth-child(7),
.user-list-table td:nth-child(7) { width: 116px; }
.user-list-table th:nth-child(8),
.user-list-table td:nth-child(8) { width: 210px; }

.user-table-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.user-table-person .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  font-size: 15px;
}

.user-table-person strong,
.user-table-username,
.user-list-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-table-person strong {
  display: block;
  font-weight: 950;
}

.user-table-username {
  display: block;
  color: var(--muted);
  font-weight: 900;
}

.user-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .05);
}

.user-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.user-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
  font-size: 18px;
  font-weight: 950;
}

.user-card-main strong,
.user-card-main span,
.user-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card-main strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
}

.user-card-main span,
.user-card-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.user-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-card-actions form {
  margin: 0;
}

.user-card-actions .btn,
.user-card-actions button {
  min-height: 36px;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12px;
}

.user-form {
  display: grid;
  gap: 14px;
}

.user-form .toolbar {
  align-items: center;
  gap: 14px;
}

.user-form .toolbar .actions {
  flex: 0 0 auto;
}

.user-form h3 {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}

.user-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.user-fields-grid label {
  min-width: 0;
  min-height: 76px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.user-fields-grid input,
.user-fields-grid select {
  height: 44px;
  min-height: 44px;
  border-radius: 8px;
}

.user-form .user-fields-grid {
  gap: 6px 8px;
  padding: 8px;
}

.user-form .user-fields-grid label {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 3px;
  font-size: 11px;
}

.user-form .user-fields-grid input,
.user-form .user-fields-grid select {
  height: 30px;
  min-height: 30px;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.permission-row-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.permission-quick-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(18, 76, 85, .18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 76, 85, .06), rgba(255, 255, 255, .62));
}

.permission-quick-panel strong,
.permission-quick-panel span {
  display: block;
}

.permission-quick-panel strong {
  font-size: 15px;
  font-weight: 950;
}

.permission-quick-panel span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.permission-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.permission-quick-actions button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}

.permission-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.permission-row-list .permission-card {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 10px;
}

.permission-row-list .permission-card > div:first-child {
  display: grid;
  align-content: center;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.permission-card-compact {
  padding: 14px;
}

.permission-card strong {
  display: block;
  font-weight: 950;
}

.permission-card > div:first-child span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.permission-scope {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.permission-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.permission-row-list .permission-checks {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-content: center;
}

.permission-action-list .permission-checks {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.permission-check {
  min-height: 36px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.permission-row-list .permission-check {
  min-height: 42px;
  align-items: center;
  padding: 7px 9px;
}

.permission-action-list .permission-check {
  min-height: 38px;
}

.permission-action-list .permission-check small {
  display: none;
}

.permission-action-list .permission-scope {
  display: none;
}

.permission-check:has(input:checked) {
  border-color: rgba(18, 76, 85, .34);
  background: rgba(18, 76, 85, .06);
}

.permission-check input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.permission-check span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.permission-check strong {
  font-size: 12px;
}

.permission-check small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.price-lookup-shell {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.price-scan-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
}

.price-scan-panel input {
  height: 54px;
  font-size: 22px;
  font-weight: 900;
}

.price-scan-panel button {
  height: 54px;
  border-radius: 8px;
}

.price-result {
  min-height: 310px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(16, 35, 38, .06);
}

.price-result.empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
}

.price-result.empty strong {
  display: block;
  color: var(--text);
  font-size: 24px;
}

.price-result.empty span {
  display: block;
  margin-top: 8px;
}

.product-image {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.product-image img,
.no-product-image {
  width: 100%;
  height: 100%;
  min-height: 276px;
  object-fit: contain;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.no-product-image.blank {
  background: transparent;
}

.product-info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.product-info span,
.price-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-info strong,
.product-info h2,
.product-info p {
  margin: 0;
  overflow-wrap: anywhere;
}

.product-info strong {
  font-size: 22px;
}

.product-info h2 {
  font-size: 30px;
  line-height: 1.15;
}

.product-info p {
  color: var(--muted);
  font-size: 18px;
  font-weight: 850;
}

.price-box {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.price-box strong {
  color: var(--primary);
  font-size: 36px;
  line-height: 1;
  text-align: right;
  overflow-wrap: anywhere;
}

.price-box small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.stock-count-shell {
  --count-control-h: 44px;
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.count-start {
  max-width: 520px;
}

.count-start h2,
.stock-count-list h2 {
  font-size: 17px;
  line-height: 1.2;
}

.count-start-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.count-start-form .actions {
  align-items: end;
}

.count-mobile-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow: 0 8px 22px rgba(16, 35, 38, .08);
}

.count-depo-bar,
.count-scan-panel {
  display: grid;
  gap: 8px;
}

.count-depo-bar {
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: end;
}

.count-scan-panel {
  grid-template-columns: 1fr;
}

.count-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: end;
  gap: 8px;
}

.stock-count-shell label {
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.stock-count-shell input,
.stock-count-shell select {
  min-height: var(--count-control-h);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 16px;
  background: var(--surface);
}

.count-barcode-field input {
  height: 48px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

.count-entry-row input {
  height: var(--count-control-h);
  font-size: 18px;
  font-weight: 950;
  text-align: right;
}

.count-depo-bar button,
.count-scan-panel button,
.count-start-form button,
.count-commit-actions button {
  min-height: var(--count-control-h);
  height: var(--count-control-h);
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

.stock-count-list {
  display: grid;
  gap: 8px;
}

.count-list-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.count-list-head h2 {
  margin: 0;
}

.count-list-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.count-list-head strong {
  min-width: 38px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 14px;
  font-weight: 950;
}

.stock-count-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.stock-count-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(16, 35, 38, .05);
}

.count-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.count-card-main strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.count-card-main span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.count-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.count-card-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.count-qty-control {
  color: var(--muted);
}

.count-qty-control > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.count-qty-control em {
  min-width: 44px;
  color: var(--text);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.qty-input {
  width: 100%;
  min-height: var(--count-control-h);
  height: var(--count-control-h);
  padding: 7px 10px;
  font-size: 18px;
  font-weight: 950;
  text-align: right;
}

.small-row-button {
  min-height: 34px;
  height: 34px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 12px;
}

.count-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.count-commit-actions {
  position: sticky;
  bottom: 0;
  z-index: 18;
  padding: 8px 0 env(safe-area-inset-bottom);
  background: linear-gradient(to top, var(--bg) 74%, transparent);
}

.count-commit-actions button {
  width: 100%;
}

.count-commit-actions button:disabled {
  opacity: .5;
  cursor: default;
}

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 38vh; }
  .workbench-shell { grid-template-columns: 1fr; }
  .workbench-sidebar,
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(82vw, 320px);
    height: 100vh;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 8px;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 20px 0 60px rgba(0, 0, 0, .26);
  }
  body.nav-open .workbench-sidebar,
  body.nav-open .sidebar {
    transform: translateX(0);
  }
  body.nav-open .mobile-scrim {
    display: block;
  }
  .mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(3, 14, 25, .48);
  }
  .mobile-menu-button {
    display: inline-flex;
    position: relative;
    z-index: 45;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
  }
  .mobile-menu-button span {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: #eef6ff;
    transition: transform .2s ease, opacity .2s ease;
  }
  body.nav-open .mobile-menu-button {
    display: none;
  }
  body.nav-open .mobile-menu-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #fff;
    flex: 0 0 auto;
  }
  .mobile-menu-close span {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }
  .mobile-menu-close span:nth-child(1) {
    transform: rotate(45deg);
  }
  .mobile-menu-close span:nth-child(2) {
    transform: rotate(-45deg);
  }
  .module-nav {
    min-height: 0;
    overflow-y: visible;
    align-content: start;
    gap: 3px;
    padding-bottom: 6px;
  }
  .nav-group {
    margin: 0;
  }
  .nav-item,
  .nav-group summary,
  .nav-group a {
    min-height: 34px;
    border-radius: 6px;
  }
  .nav-item,
  .nav-group summary {
    padding: 0 10px;
    font-size: 15px;
  }
  .nav-group a {
    min-height: 30px;
    margin: 1px 0 0 14px;
    padding: 0 10px;
    font-size: 13px;
  }
  .mobile-top-logo {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
  }
  .mobile-top-logo img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: contain;
  }
  .mobile-sidebar-footer {
    display: grid;
    gap: 8px;
    padding: 10px 8px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .mobile-sidebar-footer .btn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: #eef6ff;
  }
  .theme-switch .logout-link {
    display: none;
  }
  .theme-switch .offline-status-badge {
    min-height: 34px;
    padding: 4px 8px;
  }
  .theme-switch .offline-status-badge small {
    display: none;
  }
  .record-layout {
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .record-layout.filter-collapsed {
    grid-template-columns: 1fr;
  }
  .filter-panel.is-collapsed {
    min-height: 46px;
  }
  .workbench-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 22px rgba(3, 14, 25, .16);
  }
  .top-company {
    justify-self: start;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .record-panel .form-grid,
  .cash-entry-form .grid.two,
  .user-form .user-fields-grid {
    grid-template-columns: 1fr;
  }
  .record-panel .form-grid .wide,
  .cash-entry-form .grid.two .wide {
    grid-column: 1;
  }
  .restaurant-summary,
  .restaurant-live-head,
  .report-split,
  .adjustment-overview,
  .finance-metrics {
    grid-template-columns: 1fr;
  }
  .restaurant-live-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .user-hero,
  .user-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .user-limit {
    justify-items: start;
  }
  .user-list-head {
    display: grid;
  }
  .user-list-head.compact {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .user-list-head.compact .pill {
    margin-left: 0;
    justify-self: end;
  }
  .user-list-head.compact .btn {
    grid-column: 1 / -1;
  }
  .user-list-head .btn {
    width: 100%;
  }
  .user-fields-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }
  .user-fields-grid label {
    min-height: 72px;
    padding: 9px;
  }
  .user-form .toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .user-form .toolbar .actions,
  .user-form .toolbar .btn {
    width: 100%;
  }
  .user-list-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .user-list-table,
  .user-list-table thead,
  .user-list-table tbody,
  .user-list-table tr,
  .user-list-table td {
    display: block;
    min-width: 0;
  }
  .user-list-table {
    border-collapse: separate;
  }
  .user-list-table thead {
    display: none;
  }
  .user-list-table tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
  }
  .user-list-table td {
    display: grid;
    grid-template-columns: minmax(108px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .user-list-table td:last-child {
    border-bottom: 0;
  }
  .user-list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
  }
  .user-table-person {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .user-table-person .user-avatar {
    width: 34px;
    height: 34px;
  }
  .user-card-actions {
    justify-content: flex-start;
  }
  .user-card-actions .btn,
  .user-card-actions button,
  .user-card-actions form {
    width: 100%;
  }
  .table-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .live-table-card {
    width: 100%;
  }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    padding: 14px 10px;
  }
  .admin-sidebar {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    background: #071d37;
  }
  .admin-sidebar .admin-sidebar-brand {
    margin: 4px 8px 18px;
  }
  .admin-sidebar .admin-sidebar-brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .admin-sidebar .admin-sidebar-brand strong {
    font-size: 15px;
  }
  .admin-sidebar .admin-sidebar-brand span {
    max-width: 150px;
    color: rgba(255,255,255,.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-nav {
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    gap: 3px;
    padding-bottom: 6px;
  }
  .admin-nav a {
    min-height: 36px;
    border-radius: 6px;
    padding: 0 10px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
  }
  .admin-main {
    padding: 0 10px 14px;
  }
  .nav a { white-space: nowrap; }
  .grid.two, .grid.three, .grid.four, .check-grid, .module-grid, .company-grid { grid-template-columns: 1fr; }
  .admin-permission-grid {
    grid-template-columns: 1fr;
  }
  .admin-users-layout {
    grid-template-columns: 1fr;
  }
  .admin-users-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .admin-users-table table,
  .admin-users-table thead,
  .admin-users-table tbody,
  .admin-users-table tr,
  .admin-users-table td {
    display: block;
    min-width: 0;
  }
  .admin-users-table table {
    border-collapse: separate;
  }
  .admin-users-table thead {
    display: none;
  }
  .admin-users-table tr {
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
  }
  .admin-users-table td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .admin-users-table td:last-child {
    border-bottom: 0;
  }
  .admin-users-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }
  .admin-password-form {
    grid-template-columns: 1fr auto;
  }
  .permission-grid {
    grid-template-columns: 1fr;
  }
  .permission-row-list .permission-card {
    grid-template-columns: 1fr;
  }
  .permission-row-list .permission-checks {
    grid-template-columns: 1fr;
  }
  .permission-quick-panel {
    align-items: stretch;
    flex-direction: column;
  }
  .permission-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .permission-quick-actions button {
    width: 100%;
    min-height: 40px;
  }
  .topbar { display: grid; }
  .price-result {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .price-box {
    grid-column: 1 / -1;
    justify-items: start;
  }
  .price-box strong {
    text-align: left;
  }
  .count-depo-bar,
  .count-scan-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .main { padding: 10px; }
  .workbench-main { padding: 0 8px 10px; }
  .admin-main {
    padding: 0 8px 10px;
  }
  .admin-users-table td {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .admin-password-form,
  .inline-form {
    grid-template-columns: 1fr;
  }
  .admin-password-form button,
  .inline-form button {
    width: 100%;
  }
  .workbench-top {
    min-height: 58px;
    margin: 0 -8px;
    padding: max(6px, env(safe-area-inset-top)) 8px 6px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .top-license {
    display: none;
  }
  .workbench-top strong,
  .workbench-top span {
    font-size: 11px;
  }
  .top-company {
    order: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    max-width: none;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 10px;
    overflow: hidden;
    white-space: normal;
    font-size: 11px;
    line-height: 1.15;
    text-align: left;
  }
  .company-control-kicker {
    height: 9px;
    font-size: 8px;
    line-height: 9px;
  }
  .company-control-value {
    display: -webkit-box;
    max-height: 27px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    line-height: 13px;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .theme-switch {
    order: 0;
    flex: 0 0 auto;
    overflow: visible;
  }
  .theme-switch .offline-sync-form,
  .theme-switch .pill {
    display: none;
  }
  .theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 9px;
  }
  .company-year-dialog {
    width: calc(100vw - 18px);
    max-height: 80vh;
    padding: 0;
  }
  .company-year-dialog .movement-dialog-head {
    display: grid;
    gap: 7px;
    padding: 12px 12px 9px;
    padding-right: 78px;
  }
  .company-year-dialog .movement-dialog-head h2 {
    font-size: 17px;
  }
  .company-year-dialog .movement-dialog-head p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
  }
  .company-dialog-title {
    padding-right: 0;
    gap: 8px;
  }
  .company-dialog-mark {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .company-year-dialog .movement-form {
    gap: 0;
  }
  .company-year-dialog .dialog-close-form {
    top: 8px;
    right: 10px;
  }
  .company-year-dialog .dialog-close-form button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
  .company-year-dialog .movement-dialog-head form,
  .company-year-dialog .movement-dialog-head button {
    width: 100%;
  }
  .company-picker-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .company-year-list {
    padding: 10px;
  }
  .company-select-card {
    min-height: 104px;
    padding: 10px;
    gap: 8px;
  }
  .company-select-card strong {
    font-size: 13px;
  }
  .company-select-card .year-list button {
    min-width: 62px;
    min-height: 34px;
  }
  .window-tabs {
    max-width: calc(100vw - 16px);
    min-height: 32px;
    padding-top: 4px;
  }
  .window-tabs a {
    min-width: 104px;
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
  .window-tabs a.active {
    height: 30px;
  }
  .workspace-title {
    min-height: 28px;
  }
  .workspace-title h1 {
    font-size: 13px;
  }
  .user-hero {
    padding: 12px;
  }
  .user-hero h2 {
    font-size: 18px;
  }
  .user-dashboard-grid article {
    min-height: 78px;
  }
  .user-list-grid {
    grid-template-columns: 1fr;
  }
  .user-card {
    padding: 12px;
  }
  .user-card-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .user-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .user-card-actions .btn,
  .user-card-actions button,
  .user-card-actions form {
    width: 100%;
  }
  .permission-card {
    padding: 10px;
  }
  .permission-checks {
    grid-template-columns: 1fr;
  }
  .permission-check {
    min-height: 34px;
  }
  .filter-panel, .record-panel { border-radius: 5px; }
  .card, .topbar { border-radius: 12px; padding: 12px; }
  .auth-panel, .auth-visual { padding: 20px; }
  .actions .btn, .actions button { flex: 1 1 auto; }
  .bar-row {
    grid-template-columns: 76px minmax(70px, 1fr);
  }
  .bar-row strong {
    grid-column: 1 / -1;
    text-align: left;
  }
  .table-card-grid {
    grid-template-columns: 1fr;
    padding: 0 8px 10px;
  }
  .restaurant-live-head {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .restaurant-live-head article,
  .restaurant-live-head .btn {
    height: 70px;
  }
  .live-table-card {
    width: 100%;
    height: auto;
    min-height: 420px;
    max-height: none;
    grid-template-rows: auto auto auto minmax(160px, 1fr);
    padding: 12px;
  }
  .table-card-top {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: 42px 42px;
  }
  .table-card-top b {
    grid-column: 1 / -1;
    height: 42px;
    font-size: 18px;
  }
  .table-mark {
    width: 40px;
    height: 40px;
  }
  .table-title strong {
    font-size: 16px;
  }
  .live-table-card li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px auto;
    min-height: 40px;
    height: auto;
    gap: 6px;
  }
  .live-table-card li:has(.restaurant-line-action) {
    grid-template-columns: minmax(0, 1fr) 86px auto;
    min-height: 40px;
  }
  .restaurant-live-actions form,
  .restaurant-discount-form {
    grid-template-columns: 1fr !important;
  }
  .restaurant-live-actions button {
    width: 100%;
  }
  .restaurant-line-action {
    grid-template-columns: auto !important;
  }
  .restaurant-line-action button {
    width: auto;
    min-width: 54px;
    padding: 0 8px;
  }
  .live-table-card em {
    font-size: 11px;
    text-align: right;
  }
  .price-scan-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .price-result {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px;
  }
  .product-image img,
  .no-product-image {
    min-height: 190px;
  }
  .product-info h2 {
    font-size: 22px;
  }
  .price-box strong {
    font-size: 30px;
  }
  .count-start {
    max-width: none;
  }
  .count-start-form,
  .count-depo-bar {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px;
  }
  .count-start-form label,
  .count-depo-bar label {
    min-width: 0;
  }
  .count-start-form button,
  .count-depo-bar button {
    flex: 0 0 auto;
    width: auto;
    min-width: 86px;
    height: 38px;
    padding: 0 10px;
  }
  .count-scan-panel {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    padding: 10px;
  }
  .count-scan-panel label:first-of-type {
    grid-column: 1 / -1;
  }
  .count-scan-panel label:nth-of-type(2) {
    grid-column: 1;
  }
  .count-scan-panel button {
    grid-column: 2;
    align-self: end;
    height: 42px;
    min-height: 42px;
    padding: 0 8px;
  }
  .count-scan-panel input {
    height: 42px;
    font-size: 17px;
  }
  .stock-count-shell input,
  .stock-count-shell select,
  .stock-count-shell button {
    font-size: 16px;
    touch-action: manipulation;
  }
  .stock-count-shell {
    width: 100%;
    gap: 8px;
  }
  .count-mobile-head {
    margin: 0 -2px;
    border-radius: 7px;
  }
  .stock-count-cards {
    grid-template-columns: 1fr;
  }
  .stock-count-card {
    padding: 9px;
  }
  .count-card-meta span {
    max-width: 100%;
  }
}

/* Final stock count overrides: keep desktop table, make only mobile card-like. */
.barcode-camera-button,
.barcode-scanner {
  display: none;
}

.stock-count-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.count-mobile-head {
  position: static;
  top: auto;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.count-depo-bar {
  grid-template-columns: minmax(220px, 340px) 110px;
  justify-content: start;
}

.count-scan-panel {
  grid-template-columns: minmax(260px, 1fr) 240px;
  align-items: end;
}

.count-barcode-row {
  display: grid;
  grid-template-columns: 1fr;
}

.count-entry-row {
  grid-template-columns: minmax(0, 110px) 84px;
}

.stock-count-list {
  display: block;
  padding: 10px;
}

.stock-count-table {
  min-width: 760px;
  table-layout: fixed;
}

.stock-count-table th,
.stock-count-table td {
  padding: 7px 8px;
  font-size: 12px;
  vertical-align: middle;
}

.qty-input {
  width: 78px;
  min-height: 32px;
  height: 32px;
  padding: 5px 7px;
  font-size: 16px;
  text-align: right;
}

.count-commit-actions {
  position: static;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding: 0;
  background: transparent;
}

.count-commit-actions button {
  width: auto;
  min-width: 210px;
}

.barcode-reader-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.barcode-reader-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 5px,
    currentColor 5px 7px,
    transparent 7px 10px
  );
}

.barcode-reader-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  background: #31d28b;
  box-shadow: 0 0 8px rgba(49, 210, 139, .72);
  transform: translateY(-50%);
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .count-mobile-head {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -2px;
    padding: 8px;
    border-radius: 8px;
  }

  .count-depo-bar {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .count-depo-bar button {
    min-width: 0;
    width: 64px;
  }

  .count-scan-panel {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .count-barcode-row {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
  }

  .barcode-camera-button {
    display: inline-flex;
    width: 52px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 7px;
    align-items: center;
    justify-content: center;
  }

  .count-entry-row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  .count-depo-bar select,
  .count-scan-panel input {
    font-size: 16px;
  }

  .count-entry-row button {
    width: 84px;
    height: 42px;
    min-height: 42px;
  }

  .barcode-scanner[hidden] {
    display: none;
  }

  .barcode-scanner {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(4, 13, 22, .76);
  }

  .barcode-scanner-box {
    position: relative;
    width: min(100%, 420px);
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface);
  }

  .barcode-scanner video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: #000;
    object-fit: cover;
  }

  .barcode-scan-line {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 50%;
    height: 2px;
    background: #31d28b;
    box-shadow: 0 0 18px rgba(49, 210, 139, .7);
  }

  .barcode-scanner-box button {
    width: 100%;
  }

  .stock-count-list .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .stock-count-table {
    min-width: 0;
    width: 100%;
  }

  .stock-count-table,
  .stock-count-table thead,
  .stock-count-table tbody,
  .stock-count-table tr,
  .stock-count-table td {
    display: block;
  }

  .stock-count-table thead {
    display: none;
  }

  .stock-count-table tr {
    width: 100%;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(16, 35, 38, .05);
  }

  .stock-count-table td {
    width: 100% !important;
    min-height: 30px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border: 0;
    font-size: 12px;
    white-space: normal;
  }

  .stock-count-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .stock-count-table td[data-label="Stok Adı"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
  }

  .stock-count-table td[data-label="Stok Adı"]::before,
  .stock-count-table td[data-label=""]::before {
    display: none;
  }

  .stock-count-table td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  .qty-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    font-size: 18px;
  }

  .small-row-button {
    width: 74px;
    height: 34px;
    min-height: 34px;
  }

  .count-commit-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    margin: 0;
    padding: 8px 0 env(safe-area-inset-bottom);
    background: linear-gradient(to top, var(--bg) 74%, transparent);
  }

  .count-commit-actions button {
    width: 100%;
    min-width: 0;
    height: 44px;
  }
}

/* Final PDA stock count mobile pass. Keep desktop table, force mobile usability. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body .workbench-main {
    min-width: 0;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: hidden;
  }

  body .workspace-title {
    margin: 0;
  }

  body .stock-count-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 8px;
  }

  body .count-start {
    width: 100%;
    max-width: none;
    padding: 12px;
  }

  body .count-start-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }

  body .count-start-form .actions,
  body .count-start-form button {
    width: 100%;
  }

  body .count-start-form button {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .count-mobile-head {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(16, 35, 38, .08);
  }

  body .count-depo-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    padding: 0;
  }

  body .count-depo-bar button {
    width: 72px;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .count-scan-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
  }

  body .count-barcode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
    width: 100%;
  }

  body .count-entry-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-shell label,
  body .stock-count-shell input,
  body .stock-count-shell select,
  body .stock-count-shell button {
    min-width: 0;
  }

  body .stock-count-shell input,
  body .stock-count-shell select {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }

  body .barcode-camera-button {
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  body .count-entry-row button {
    width: 84px;
    min-width: 84px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body .stock-count-list {
    width: 100%;
    padding: 8px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .stock-count-list .toolbar {
    padding: 0 2px;
  }

  body .stock-count-list .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body .stock-count-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
  }

  body .stock-count-table thead {
    display: none;
  }

  body .stock-count-table tbody {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  body .stock-count-table tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 5px 14px rgba(16, 35, 38, .05);
  }

  body .stock-count-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0;
    min-height: 32px;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .stock-count-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"] {
    grid-template-columns: 1fr;
    padding-top: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
  }

  body .stock-count-table td[data-label="Stok Adı"]::before,
  body .stock-count-table td[data-label=""]::before {
    display: none;
  }

  body .stock-count-table td[data-label=""] {
    display: flex;
    justify-content: flex-end;
  }

  body .qty-input {
    width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 18px;
    text-align: right;
  }

  body .small-row-button {
    width: 76px;
    min-width: 76px;
    height: 36px;
    min-height: 36px;
  }

  body .count-commit-actions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    margin: 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 74%, transparent);
  }

  body .count-commit-actions button {
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    font-size: 16px;
  }
}

/* User list final mobile override: no horizontal table, each user becomes a compact row card. */
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-table-card,
  body .user-list-table-wrap,
  body .user-list-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body .user-list-table-card {
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body .user-list-table,
  body .user-list-table thead,
  body .user-list-table tbody,
  body .user-list-table tr,
  body .user-list-table th,
  body .user-list-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .user-list-table thead {
    display: none !important;
  }

  body .user-list-table tbody {
    display: grid !important;
    gap: 10px;
  }

  body .user-list-table tr {
    display: grid !important;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 6px 16px rgba(16, 35, 38, .06);
  }

  body .user-list-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  body .user-list-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
  }

  body .user-list-table td[data-label="Kullanıcı"] {
    grid-template-columns: 1fr;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body .user-list-table td[data-label="Kullanıcı"]::before {
    display: none;
  }

  body .user-table-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body .user-table-person strong,
  body .user-table-username {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }

  body .user-card-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body .user-card-actions .btn,
  body .user-card-actions button,
  body .user-card-actions form {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-table td[data-label="İşlem"] .user-card-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px;
    width: 100%;
  }

  body .user-list-table td[data-label="İşlem"] .user-card-actions .btn,
  body .user-list-table td[data-label="İşlem"] .user-card-actions button,
  body .user-list-table td[data-label="İşlem"] .user-card-actions form {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body .user-list-table td[data-label="İşlem"] .user-card-actions .btn,
  body .user-list-table td[data-label="İşlem"] .user-card-actions button {
    min-height: 38px;
    padding: 0 5px;
    font-size: 11px;
    white-space: nowrap;
  }

  body .user-list-table td[data-label="İşlem"] .user-card-actions form button {
    width: 100% !important;
    height: 38px;
  }
}

@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  body .user-list-table colgroup,
  body .user-list-table col {
    display: none !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Final desktop stock count start button sizing. */
@media (min-width: 821px) {
  .count-start {
    max-width: 620px;
  }

  .count-start-form {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 12px;
  }

  .count-start-form .actions {
    width: 190px;
  }

  .count-start-form button {
    width: 190px;
    min-width: 190px;
    height: 46px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 8px;
  }
}

/* Final mobile quantity keypad. */
.quantity-pad {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body.quantity-pad-open {
    overflow: hidden;
  }

  .quantity-pad[hidden] {
    display: none;
  }

  .quantity-pad {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    align-items: end;
    padding: 12px;
    background: rgba(4, 13, 22, .68);
  }

  .quantity-pad-box {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 20px 44px rgba(8, 24, 34, .28);
  }

  .quantity-pad-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .quantity-pad-display {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
    overflow: hidden;
  }

  .quantity-pad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .quantity-pad-grid button,
  .quantity-pad-actions button {
    min-width: 0;
    min-height: 52px;
    height: 52px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 950;
    touch-action: manipulation;
  }

  .quantity-pad-grid button[data-qty-key="back"] {
    font-size: 15px;
  }

  .quantity-pad-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
  }

  .quantity-pad-actions button {
    font-size: 16px;
  }
}

/* Final mobile date-field guard: prevent native date controls from overflowing cards/forms. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  body label,
  body .filter-panel label,
  body .record-panel label,
  body .dash-filter-bar label,
  body .movement-form label,
  body .cari-cash-form label {
    min-width: 0;
  }

  body input[type="date"],
  body input[type="datetime-local"],
  body input[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 6px;
    font-size: 15px;
  }

  body input[type="date"]::-webkit-date-and-time-value,
  body input[type="datetime-local"]::-webkit-date-and-time-value,
  body input[type="time"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }
}

/* Last fast sale dialog override: readable customer, stock and hold tables. */
.fast-cari-dialog,
.fast-stock-dialog,
.fast-hold-dialog {
  width: min(1120px, calc(100vw - 32px));
}

.fast-cari-dialog .movement-form,
.fast-stock-dialog .movement-form,
.fast-hold-dialog .movement-form {
  padding: 16px;
  gap: 10px;
}

.fast-cari-dialog .compact-table,
.fast-stock-dialog .compact-table,
.fast-hold-dialog .compact-table {
  max-height: min(62vh, 560px);
  overflow: auto !important;
}

.fast-cari-dialog .compact-table > table,
.fast-stock-dialog .compact-table > table,
.fast-hold-dialog .compact-table > table {
  visibility: visible !important;
  width: 100%;
  table-layout: fixed;
}

.fast-cari-dialog .compact-table > table {
  min-width: 780px;
}

.fast-stock-dialog .compact-table > table {
  min-width: 940px;
}

.fast-hold-dialog .compact-table > table {
  min-width: 900px;
}

.fast-cari-dialog .compact-table th,
.fast-cari-dialog .compact-table td,
.fast-stock-dialog .compact-table th,
.fast-stock-dialog .compact-table td,
.fast-hold-dialog .compact-table th,
.fast-hold-dialog .compact-table td {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.fast-cari-dialog .compact-table th:nth-child(1),
.fast-cari-dialog .compact-table td:nth-child(1),
.fast-stock-dialog .compact-table th:nth-child(1),
.fast-stock-dialog .compact-table td:nth-child(1) {
  width: 150px;
}

.fast-cari-dialog .compact-table th:nth-child(2),
.fast-cari-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 360px;
  white-space: normal;
}

.fast-cari-dialog .compact-table th:nth-child(3),
.fast-cari-dialog .compact-table td:nth-child(3) {
  width: 180px;
  text-align: right;
}

.fast-stock-dialog .compact-table th:nth-child(2),
.fast-stock-dialog .compact-table td:nth-child(2) {
  width: auto;
  min-width: 340px;
  white-space: normal;
}

.fast-stock-dialog .compact-table th:nth-child(3),
.fast-stock-dialog .compact-table td:nth-child(3) {
  width: 180px;
}

.fast-stock-dialog .compact-table th:nth-child(4),
.fast-stock-dialog .compact-table td:nth-child(4) {
  width: 100px;
}

.fast-stock-dialog .compact-table th:nth-child(5),
.fast-stock-dialog .compact-table td:nth-child(5) {
  width: 130px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(1),
.fast-hold-dialog .compact-table td:nth-child(1) {
  width: 190px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(2),
.fast-hold-dialog .compact-table td:nth-child(2) {
  width: 170px;
}

.fast-hold-dialog .compact-table th:nth-child(3),
.fast-hold-dialog .compact-table td:nth-child(3) {
  width: auto;
  min-width: 250px;
  white-space: normal;
}

.fast-hold-dialog .compact-table th:nth-child(4),
.fast-hold-dialog .compact-table td:nth-child(4) {
  width: 80px;
  text-align: center;
}

.fast-hold-dialog .compact-table th:nth-child(5),
.fast-hold-dialog .compact-table td:nth-child(5) {
  width: 135px;
  text-align: right;
}

.fast-hold-dialog .compact-table th:nth-child(6),
.fast-hold-dialog .compact-table td:nth-child(6) {
  width: 150px;
  text-align: right;
}

.fast-hold-dialog .compact-table td:nth-child(6) {
  white-space: nowrap;
}

.fast-hold-dialog .compact-table td:nth-child(6) button + button {
  margin-left: 6px;
}

.fast-sale-shell [data-complete-payment].is-loading,
.fast-sale-shell [data-complete-credit].is-loading {
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .fast-cari-dialog,
  .fast-stock-dialog,
  .fast-hold-dialog {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 10px);
  }

  .fast-cari-dialog .movement-form,
  .fast-stock-dialog .movement-form,
  .fast-hold-dialog .movement-form {
    padding: 10px;
  }

  .fast-cari-dialog .compact-table,
  .fast-stock-dialog .compact-table,
  .fast-hold-dialog .compact-table {
    max-height: calc(100dvh - 150px);
  }
}

/* Shared contrast and interaction rules, after screen-specific styles. */
:root { --muted: #52666d; --action-bg: #125563; --action-text: #ffffff; }
html[data-theme="dark"] { --muted: #b4c2d5; --action-bg: #156778; --action-text: #ffffff; }
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea) {
  color: var(--text); background-color: var(--surface); border-color: var(--line);
}
html body :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
html body select option { color: var(--text); background: var(--surface); }
html body :is(button.primary,.btn.primary,button[type=submit]:not(.secondary):not(.danger):not(.warn-button)) { color: var(--action-text); background-color: var(--action-bg); }
html body :is(button.secondary,.btn.secondary) {
  color: var(--text); background: var(--surface-soft); border: 1px solid var(--line);
}
html body :is(button,.btn):disabled { opacity: .6; cursor: not-allowed; }
html body :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #2586b9; outline-offset: 3px; }
html[data-theme="dark"] body :is(.dash-filter-bar,.dash-settings-panel,.dash-settings-options label,.dash-widget,.dash-widget-head,.dash-widget-body,.dash-area,.company-card,.company-card-title,.fast-settings-card,.fast-settings-layout .card,.fast-pos-table,.record-panel,.connection-card,.permission-card) {
  color: var(--text); background: var(--surface); border-color: var(--line);
}
html[data-theme="dark"] body :is(.dash-widget-head strong,.dash-settings-head strong,.dash-settings-options label,.company-card strong,.company-card-title strong,.record-panel h2,.record-panel h3,.fast-settings-card label,.fast-settings-card h2,.fast-settings-card h3,.workspace-title h1,.top-license strong,.company-control-value) { color: var(--text); }
html[data-theme="dark"] body :is(.compact-table, .fast-pos-table) :is(th,td) { color: var(--text); border-color: var(--line); }
html[data-theme="dark"] body :is(.compact-table,.fast-pos-table) th { background: var(--surface-soft); }
html[data-theme="dark"] body :is(.footer-note,.empty-state,.company-card span,.company-card small,.company-year-hint) { color: var(--muted); }
html body [hidden] { display: none !important; }
html body .company-card-title { display: grid; gap: 6px; width: 100%; text-align: left; padding: 16px; border-radius: 12px; }
.company-select-card { align-content: start; padding: 8px; transition: border-color .18s, box-shadow .18s; }
.company-select-card.is-selected { border-color: #2586b9; box-shadow: 0 0 0 2px #2586b933; }
.company-year-hint { flex-basis: 100%; margin: 6px 0; color: var(--muted); font-size: 13px; }
.company-select-card .year-list { padding: 8px; flex-wrap: wrap; }
.company-select-card .year-list button { min-width: 72px; min-height: 44px; }
body[data-report-license] .module-nav .nav-group { border: 0; border-radius: 10px; margin-bottom: 6px; overflow: visible; }
body[data-report-license] .module-nav .nav-group[open] { background: #ffffff08; }
.module-nav .nav-group a { margin: 4px 8px; padding: 11px 14px; border-radius: 8px; transition: background-color .18s, transform .18s; }
.module-nav .nav-group a:hover { transform: translateX(3px); }
.dash-settings-panel { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; }
.dash-settings-options { gap: 10px; }
.dash-settings-options label { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
@keyframes portal-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .workbench-main { animation: portal-enter .24s ease-out; }
  dialog[open], .dash-settings-panel:not([hidden]), .company-select-card .year-list:not([hidden]), .nav-group[open] a { animation: portal-enter .18s ease-out; }
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .2s; }
}

/* Customer header and popups share explicit foreground/background pairs. */
body[data-report-license] .workbench-top .top-company { color: var(--text); background: var(--surface-soft); border-color: var(--line); }
body[data-report-license] .workbench-top .company-control-value { color: var(--text); }
body[data-report-license] .workbench-top .company-control-kicker { color: var(--muted); }
body[data-report-license] .workbench-top .offline-status-badge strong { color: var(--text); }
body[data-report-license] .workbench-top .offline-status-badge small { color: var(--muted); }
body[data-report-license] .dash-card-tools { opacity: 1; }
html body .report-header-panel { position: fixed; z-index: 200; overflow: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
html body .report-header-panel.is-open { display: block; }
html body .report-header-panel :is(.report-menu-action,summary) { min-height: 40px; height: auto; padding: 10px; border: 0; border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; text-align: left; }
html body .report-header-panel :is(.report-menu-action,summary):hover { background: var(--surface-soft); }
html body .report-header-panel .report-menu-list { position: static; width: 100%; max-height: 220px; margin: 0; padding: 6px; border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--text); box-shadow: none; }
html body .report-header-panel .report-menu-list label { color: var(--text); white-space: normal; min-height: 36px; }
html body .report-header-panel summary::after { content: "⌄"; color: var(--muted); }
html body .report-header-panel details[open] > summary::after { content: "⌃"; }
html[data-theme="dark"] body .compact-table :is(th,td) { color: var(--text); border-color: var(--line); }
html[data-theme="dark"] body .compact-table tfoot td { background: var(--surface-soft); }

/* Lock the page while the drawer scrolls independently, including on iOS. */
html.nav-scroll-locked { overflow: hidden; overscroll-behavior: none; }
body.nav-scroll-locked { position: fixed; top: var(--nav-scroll-top, 0); left: 0; right: 0; width: 100%; overflow: hidden; }
html body .workbench-top .mobile-menu-button { color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; }
html body .workbench-top .mobile-menu-button span { display: block; width: 18px; height: 2px; margin: 0; border-radius: 2px; background: var(--text); }
body.nav-scroll-locked .workbench-sidebar { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px) {
  body[data-report-license].nav-open .mobile-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(3,14,25,.48); touch-action: none; }
  body[data-report-license].nav-open .mobile-menu-button { display: none; }
  body[data-report-license].nav-open .mobile-menu-close { position: relative; display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border: 1px solid #ffffff48; border-radius: 9px; background: #ffffff18; color: #fff; }
  body[data-report-license] .mobile-menu-close span { position: absolute; width: 18px; height: 2px; background: #fff; }
  body[data-report-license] .mobile-menu-close span:first-child { transform: rotate(45deg); }
  body[data-report-license] .mobile-menu-close span:last-child { transform: rotate(-45deg); }
}