*,

*::before,

*::after {

  box-sizing: border-box;

}

html,

body {

  margin: 0;

  min-height: 100%;

  font-family: var(--font);

  font-size: var(--text-md);

  font-weight: 400;

  line-height: 1.45;

  color: var(--color-text);

  background: var(--color-bg);

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

a {

  color: var(--color-primary);

  text-decoration: none;

  transition: color var(--duration-fast) var(--ease);

}

a:hover {

  color: var(--color-primary-hover);

}

button,

input,

select,

textarea {

  font: inherit;

  color: inherit;

}

button {

  background: none;

  border: 0;

}

h1,

h2,

h3 {

  margin: 0;

  font-weight: 600;

  letter-spacing: -0.02em;

  line-height: 1.25;

}

img {

  max-width: 100%;

  display: block;

}

:focus-visible {

  outline: 2px solid var(--color-primary);

  outline-offset: 2px;

}

.page-title {

  font-size: var(--text-xl);

  font-weight: 600;

}

.section-title {

  font-size: var(--text-lg);

  font-weight: 600;

}

.muted {

  color: var(--color-text-muted);

}

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

}

/* ——— Shell ——— */

.app-shell {

  min-height: 100vh;

  display: grid;

  grid-template-columns: var(--sidebar-width) 1fr;

  grid-template-rows: var(--topbar-height) 1fr;

}

html[data-sidebar="collapsed"] .app-shell {

  grid-template-columns: var(--sidebar-collapsed) 1fr;

}

.topbar {

  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  gap: var(--space-4);

  padding: 0 var(--space-5);

  background: var(--color-surface);

  border-bottom: 1px solid var(--color-border);

  z-index: 8;

}

.brand {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  color: var(--color-text);

  font-weight: 600;

  min-width: 180px;

  letter-spacing: -0.02em;

}

.brand:hover {

  color: var(--color-text);

}

.brand-mark {

  width: 34px;

  height: 34px;

  border-radius: var(--radius-sm);

  display: grid;

  place-items: center;

  background: var(--color-primary);

  color: #fff;

  box-shadow: var(--shadow-sm);

}

[data-theme="dark"] .brand-mark {

  background: var(--color-primary);

  color: var(--color-primary-ink);

}

.search {

  flex: 1;

  max-width: 520px;

  position: relative;

}

.search input {

  width: 100%;

  height: 40px;

  padding: 0 40px;

  border: 1px solid var(--color-border);

  border-radius: 999px;

  background: var(--color-bg);

  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);

}

.search input:hover {

  border-color: var(--color-border-strong);

}

.search input:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 4px var(--color-focus);

  background: var(--color-surface);

}

.search .icon-left {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--color-text-muted);

  width: 16px;

  height: 16px;

  pointer-events: none;

}

.topbar-actions {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: var(--space-2);

}

.icon-btn {

  width: 40px;

  height: 40px;

  border: 0;

  background: transparent;

  border-radius: var(--radius-sm);

  color: var(--color-text-muted);

  display: grid;

  place-items: center;

  cursor: pointer;

  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);

}

.icon-btn:hover,

.icon-btn[aria-expanded="true"] {

  background: var(--color-primary-soft);

  color: var(--color-primary);

}

.icon-btn:active {

  transform: scale(0.96);

}

.icon-btn-sm {

  width: 32px;

  height: 32px;

  min-height: 32px;

  border: 1px solid var(--color-border);

  background: var(--color-surface);

  border-radius: var(--radius-sm);

  color: var(--color-text);

}

.icon-btn-sm:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

}

.icon-btn-danger {

  width: 32px;

  height: 32px;

  color: var(--color-danger);

}

.icon-btn-danger:hover {

  background: var(--color-danger-soft);

  color: var(--color-danger);

}

.profile-btn {

  display: flex;

  align-items: center;

  gap: var(--space-2);

  height: 40px;

  padding: 0 10px 0 6px;

  border-radius: 999px;

  border: 1px solid transparent;

  color: var(--color-text);

  cursor: pointer;

  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);

}

.profile-btn:hover,

.dropdown.open .profile-btn {

  background: var(--color-bg);

  border-color: var(--color-border);

}

.profile-copy {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  line-height: 1.2;

  text-align: left;

}

.profile-copy strong {

  font-size: var(--text-sm);

  font-weight: 600;

}

.profile-copy span {

  font-size: var(--text-xs);

  color: var(--color-text-muted);

}

.sidebar {

  background: var(--color-sidebar);

  border-right: 1px solid var(--color-border);

  padding: var(--space-4) var(--space-3);

  overflow: auto;

}

.sidebar-tools {

  margin-bottom: var(--space-3);

}

.nav-group {

  margin-bottom: var(--space-4);

}

.nav-group-title {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-text-muted);

  padding: var(--space-2) var(--space-3);

}

.nav-item {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  padding: 9px var(--space-3);

  border-radius: var(--radius-md);

  color: var(--color-text);

  font-weight: 500;

  font-size: var(--text-sm);

  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);

}

.nav-item:hover {

  background: var(--color-bg);

  color: var(--color-text);

}

.nav-item.active {

  background: var(--color-primary-soft);

  color: var(--color-primary);

}

.nav-item i {

  width: 18px;

  height: 18px;

  flex-shrink: 0;

}

html[data-sidebar="collapsed"] .nav-group-title,

html[data-sidebar="collapsed"] .nav-item span,

html[data-sidebar="collapsed"] .brand-text,

html[data-sidebar="collapsed"] .profile-copy {

  display: none;

}

.content {

  padding: var(--space-5);

  min-width: 0;

}

.page-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: var(--space-4);

  margin-bottom: var(--space-5);

}

.page-head .muted {

  margin: 6px 0 0;

}

.branch-context {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--space-2);

  color: var(--color-text-muted);

  font-size: var(--text-sm);

  margin-top: var(--space-2);

}

.branch-context strong {

  color: var(--color-text);

  font-weight: 600;

}

/* ——— Cards ——— */

.card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  padding: var(--space-5);

}

.card-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: var(--space-3);

  margin-bottom: var(--space-4);

}

.card-head .section-title {

  margin: 0;

}

.stat-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--space-4);

  margin-bottom: var(--space-5);

}

.stat-card {

  display: flex;

  justify-content: space-between;

  gap: var(--space-4);

  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);

}

.stat-card:hover {

  transform: translateY(-1px);

  box-shadow: var(--shadow-md);

}

.stat-card .value {

  font-size: var(--text-stat);

  font-weight: 700;

  letter-spacing: -0.03em;

  margin: var(--space-2) 0;

  font-variant-numeric: tabular-nums;

}

.stat-card .icon {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-sm);

  background: var(--color-primary-soft);

  color: var(--color-primary);

  display: grid;

  place-items: center;

  flex-shrink: 0;

}

.grid-2 {

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: var(--space-4);

}

/* ——— Buttons ——— */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--space-2);

  min-height: 40px;

  padding: 0 16px;

  border-radius: var(--radius-sm);

  border: 1px solid transparent;

  font-weight: 600;

  font-size: var(--text-sm);

  cursor: pointer;

  text-decoration: none;

  white-space: nowrap;

  transition:

    background var(--duration-fast) var(--ease),

    color var(--duration-fast) var(--ease),

    border-color var(--duration-fast) var(--ease),

    box-shadow var(--duration-fast) var(--ease),

    transform var(--duration-fast) var(--ease);

}

.btn:active:not(:disabled) {

  transform: translateY(1px);

}

.btn:disabled,

.btn[disabled] {

  opacity: 0.5;

  cursor: not-allowed;

  transform: none;

}

.btn-primary {

  background: var(--color-primary);

  color: #fff;

  box-shadow: var(--shadow-sm);

}

.btn-primary:hover:not(:disabled) {

  background: var(--color-primary-hover);

  color: #fff;

}

[data-theme="dark"] .btn-primary {

  color: var(--color-primary-ink);

}

.btn-secondary {

  background: var(--color-surface);

  border-color: var(--color-border);

  color: var(--color-text);

}

.btn-secondary:hover:not(:disabled) {

  background: var(--color-bg);

  border-color: var(--color-border-strong);

  color: var(--color-text);

}

.btn-outline {

  background: transparent;

  border-color: var(--color-border-strong);

  color: var(--color-text);

}

.btn-danger {

  background: var(--color-danger);

  color: #fff;

}

.btn-danger:hover:not(:disabled) {

  filter: brightness(0.94);

  color: #fff;

}

.btn-ghost {

  background: transparent;

  color: var(--color-text-muted);

}

.btn-ghost:hover:not(:disabled) {

  background: var(--color-bg);

  color: var(--color-text);

}

.btn-lg {

  min-height: 48px;

  padding: 0 20px;

  font-size: var(--text-md);

  border-radius: var(--radius-md);

}

.btn.is-loading {

  position: relative;

  pointer-events: none;

  color: transparent !important;

}

.btn.is-loading::after {

  content: "";

  position: absolute;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  border: 2px solid rgb(255 255 255 / 0.35);

  border-top-color: #fff;

  animation: spin 0.7s linear infinite;

}

.btn-secondary.is-loading::after,

.btn-ghost.is-loading::after {

  border: 2px solid rgb(100 116 139 / 0.25);

  border-top-color: var(--color-text);

}

@keyframes spin {

  to { transform: rotate(360deg); }

}

/* ——— Tables ——— */

.table-wrap,

.card:has(table.data) {

  overflow-x: auto;

}

table.data {

  width: 100%;

  border-collapse: collapse;

  font-size: var(--text-sm);

}

table.data th,

table.data td {

  text-align: left;

  padding: 14px 12px;

  border-bottom: 1px solid var(--color-border);

  white-space: nowrap;

}

table.data th {

  color: var(--color-text-muted);

  font-weight: 600;

  font-size: var(--text-xs);

  letter-spacing: 0.04em;

  text-transform: uppercase;

  background: transparent;

}

table.data tbody tr {

  transition: background var(--duration-fast) var(--ease);

}

table.data tr:hover td {

  background: var(--color-bg);

}

table.data .num {

  text-align: right;

  font-variant-numeric: tabular-nums;

}

.badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  border-radius: 999px;

  padding: 3px 10px;

  font-size: var(--text-xs);

  font-weight: 600;

}

.badge-success { background: var(--color-success-soft); color: var(--color-success); }

.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }

.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }

.badge-info { background: var(--color-info-soft); color: var(--color-info); }

.badge-neutral { background: var(--color-bg); color: var(--color-text-muted); }

/* ——— Forms ——— */

.form {

  display: grid;

  gap: var(--space-4);

  max-width: 880px;

}

.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-4);

}

.field {

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.field label {

  font-size: var(--text-sm);

  font-weight: 500;

  color: var(--color-text);

}

.req {

  color: var(--color-danger);

}

.field input,

.field select,

.field textarea,

.filters input,

.filters select,

.input-control input {

  min-height: var(--control-h);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 0 var(--space-3);

  background: var(--color-input);

  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);

}

.field textarea {

  min-height: 96px;

  padding: var(--space-3);

  resize: vertical;

}

.field input:hover,

.field select:hover,

.field textarea:hover,

.filters input:hover,

.filters select:hover,

.input-control input:hover {

  border-color: var(--color-border-strong);

}

.field input:focus,

.field select:focus,

.field textarea:focus,

.filters input:focus,

.filters select:focus,

.input-control input:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 4px var(--color-focus);

}

.field input:disabled,

.field select:disabled,

.field textarea:disabled {

  background: var(--color-bg);

  color: var(--color-text-muted);

  cursor: not-allowed;

}

.field input[aria-invalid="true"],

.field input.input-validation-error,

.field select.input-validation-error,

.field textarea.input-validation-error {

  border-color: var(--color-danger);

  box-shadow: 0 0 0 4px rgb(220 38 38 / 0.12);

}

.field select,

.filters select,

.branch-select select {

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 12px center;

  padding-right: 36px;

}

input[type="number"] {

  -moz-appearance: textfield;

  appearance: textfield;

}

input[type="number"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

.field .hint {

  font-size: var(--text-xs);

  color: var(--color-text-muted);

}

.input-control {

  position: relative;

}

.input-control .input-icon {

  position: absolute;

  left: 12px;

  top: 50%;

  transform: translateY(-50%);

  width: 16px;

  height: 16px;

  color: var(--color-text-muted);

  pointer-events: none;

}

.input-control input {

  width: 100%;

  padding-left: 40px;

}

.input-control.has-action input {

  padding-right: 44px;

}

.input-action {

  position: absolute;

  right: 4px;

  top: 50%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  display: grid;

  place-items: center;

  border: 0;

  background: transparent;

  color: var(--color-text-muted);

  border-radius: var(--radius-sm);

  cursor: pointer;

}

.input-action:hover {

  color: var(--color-text);

  background: var(--color-bg);

}

.check {

  display: flex;

  align-items: center;

  gap: var(--space-2);

  font-size: var(--text-sm);

  color: var(--color-text-muted);

  cursor: pointer;

  user-select: none;

}

input[type="checkbox"],

input[type="radio"] {

  width: 16px;

  height: 16px;

  accent-color: var(--color-primary);

  flex-shrink: 0;

}

.validation-summary,

.field-validation-error,

.text-danger {

  color: var(--color-danger);

  font-size: var(--text-sm);

}

.validation-summary ul {

  margin: 0;

  padding-left: 18px;

}

.alert {

  display: flex;

  gap: var(--space-3);

  align-items: flex-start;

  padding: 12px 14px;

  border-radius: var(--radius-sm);

  font-size: var(--text-sm);

  border: 1px solid transparent;

}

.alert-danger {

  background: var(--color-danger-soft);

  color: var(--color-danger);

  border-color: rgb(220 38 38 / 0.18);

}

.perm-groups {

  display: grid;

  gap: var(--space-4);

}

.perm-group h3 {

  font-size: var(--text-lg);

  margin-bottom: var(--space-3);

}

.perm-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-2) var(--space-4);

}

.perm-list label {

  display: flex;

  gap: var(--space-2);

  align-items: center;

  font-size: var(--text-sm);

}

/* ——— Empty / loading ——— */

.empty {

  text-align: center;

  padding: var(--space-7) var(--space-5);

}

.empty i {

  width: 36px;

  height: 36px;

  color: var(--color-text-muted);

}

.empty h2 {

  margin: var(--space-3) 0 var(--space-2);

  font-size: var(--text-lg);

}

.empty .muted {

  max-width: 360px;

  margin: 0 auto;

}

.skeleton {

  display: grid;

  gap: var(--space-3);

}

.skeleton-line,

.skeleton-card {

  background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-border) 50%, var(--color-bg) 100%);

  background-size: 200% 100%;

  animation: shimmer 1.2s ease-in-out infinite;

  border-radius: var(--radius-sm);

}

.skeleton-line {

  height: 12px;

}

.skeleton-card {

  height: 88px;

}

@keyframes shimmer {

  0% { background-position: 100% 0; }

  100% { background-position: -100% 0; }

}

/* ——— Toasts ——— */

.toast-stack {

  position: fixed;

  right: 24px;

  bottom: 24px;

  display: grid;

  gap: var(--space-2);

  z-index: 50;

  pointer-events: none;

}

.toast {

  pointer-events: auto;

  min-width: 280px;

  max-width: 380px;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-left: 4px solid var(--color-success);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  padding: 12px 14px;

  display: flex;

  gap: 10px;

  align-items: flex-start;

  animation: toast-in var(--duration) var(--ease);

}

.toast.error,

.toast.danger { border-left-color: var(--color-danger); }

.toast.warning { border-left-color: var(--color-warning); }

.toast.info { border-left-color: var(--color-info); }

.toast-icon {

  width: 18px;

  height: 18px;

  flex-shrink: 0;

  margin-top: 1px;

}

@keyframes toast-in {

  from { opacity: 0; transform: translateY(8px); }

  to { opacity: 1; transform: none; }

}

/* ——— Dropdowns ——— */

.dropdown {

  position: relative;

}

.dropdown-menu {

  display: none;

  position: absolute;

  right: 0;

  top: calc(100% + 8px);

  min-width: 240px;

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);

  padding: var(--space-2);

  z-index: 20;

  animation: toast-in var(--duration-fast) var(--ease);

}

.dropdown.open .dropdown-menu {

  display: block;

}

.dropdown-menu a,

.dropdown-menu button,

.dropdown-menu .meta {

  display: block;

  width: 100%;

  text-align: left;

  background: none;

  border: 0;

  padding: 10px 12px;

  border-radius: var(--radius-sm);

  color: var(--color-text);

  cursor: pointer;

  font-size: var(--text-sm);

}

.dropdown-menu a:hover,

.dropdown-menu button:hover {

  background: var(--color-bg);

}

.dropdown-menu .meta {

  color: var(--color-text-muted);

  font-size: var(--text-xs);

  cursor: default;

}

.branch-select {

  min-width: 180px;

}

.branch-select select {

  height: 40px;

  border-radius: 999px;

  border: 1px solid var(--color-border);

  background-color: var(--color-bg);

  padding: 0 32px 0 12px;

}

/* ——— Login ——— */

.login-shell {

  min-height: 100vh;

  display: grid;

  grid-template-columns: minmax(320px, 46%) 1fr;

}

.login-brand {

  position: relative;

  overflow: hidden;

  color: #fff;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: var(--space-7);

}

.login-brand-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}

.login-brand-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(180deg, rgb(28 25 23 / 0.28) 0%, rgb(28 25 23 / 0.55) 48%, rgb(15 23 42 / 0.82) 100%),

    linear-gradient(90deg, rgb(67 56 202 / 0.18), transparent 55%);

}

.login-brand-content,

.login-brand-foot {

  position: relative;

  z-index: 1;

}

.login-kicker {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-weight: 600;

  letter-spacing: 0.02em;

}

.login-kicker .brand-mark {

  background: rgb(255 255 255 / 0.16);

  color: #fff;

  backdrop-filter: blur(8px);

}

.login-brand h1 {

  font-size: 36px;

  margin: 18px 0 10px;

  letter-spacing: -0.03em;

}

.login-brand .lede {

  max-width: 360px;

  color: rgb(255 255 255 / 0.82);

  font-size: var(--text-lg);

  margin: 0;

}

.login-features {

  display: grid;

  gap: 10px;

  margin-top: 32px;

}

.login-feature {

  display: flex;

  align-items: center;

  gap: 10px;

  color: rgb(255 255 255 / 0.88);

  font-size: var(--text-sm);

  font-weight: 500;

}

.login-feature i {

  width: 16px;

  height: 16px;

  opacity: 0.9;

}

.login-form-wrap {

  display: grid;

  place-items: center;

  padding: var(--space-6);

  background:

    radial-gradient(900px 400px at 100% -10%, rgb(67 56 202 / 0.08), transparent 50%),

    var(--color-ivory);

}

.login-card {

  width: min(440px, 100%);

}

.login-card-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: var(--space-3);

  margin-bottom: var(--space-2);

}

.login-card h2 {

  font-size: var(--text-display);

  letter-spacing: -0.03em;

}

.login-card .stack {

  display: grid;

  gap: var(--space-4);

  margin-top: var(--space-5);

}

.login-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: var(--space-3);

}

.login-secure {

  margin-top: var(--space-5);

  text-align: center;

  font-size: var(--text-xs);

  color: var(--color-text-muted);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}

/* ——— POS ——— */

.pos-shell {

  min-height: 100vh;

  height: 100vh;

  display: grid;

  grid-template-rows: var(--pos-topbar) 1fr;

  overflow: hidden;

}

.pos-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-3);

  padding: 0 var(--space-4);

  background: var(--color-surface);

  border-bottom: 1px solid var(--color-border);

}

.pos-top-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px 12px;

  min-width: 0;

}

.pos-clock {

  font-variant-numeric: tabular-nums;

  font-size: var(--text-sm);

  color: var(--color-text-muted);

}

.pos-body {

  display: grid;

  grid-template-columns: 1fr var(--cart-width);

  min-height: 0;

  overflow: hidden;

}

.pos-products {

  padding: var(--space-4);

  min-height: 0;

  overflow: auto;

}

.pos-cart {

  background: var(--color-surface);

  border-left: 1px solid var(--color-border);

  display: flex;

  flex-direction: column;

  min-height: 0;

  overflow: hidden;

}

.pos-cart-head {

  padding: var(--space-4) var(--space-4) var(--space-3);

  border-bottom: 1px solid var(--color-border);

}

.pos-cart-head h2 {

  font-size: var(--text-lg);

}

.pos-cart-lines {

  flex: 1;

  overflow: auto;

  padding: 0 var(--space-4);

}

.pos-cart-foot {

  padding: var(--space-4);

  border-top: 1px solid var(--color-border);

  background: var(--color-surface);

}

.pos-toolbar {

  display: grid;

  gap: var(--space-3);

  margin-bottom: var(--space-4);

}

.pos-toolbar-row {

  display: flex;

  gap: var(--space-3);

  align-items: center;

}

.pos-search {

  position: relative;

  flex: 1;

}

.pos-search .input-icon {

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  width: 18px;

  height: 18px;

  color: var(--color-text-muted);

}

.pos-search input {

  width: 100%;

  min-height: 48px;

  padding: 0 16px 0 44px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-surface);

  font-size: var(--text-md);

  box-shadow: var(--shadow-sm);

}

.pos-search input:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 4px var(--color-focus);

}

.pos-terminal {

  min-width: 160px;

}

.pos-terminal select {

  min-height: 48px;

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

  background-color: var(--color-surface);

  padding: 0 36px 0 14px;

}

.chips {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

  margin-bottom: var(--space-4);

}

.chips-scroll {

  flex-wrap: nowrap;

  overflow-x: auto;

  padding-bottom: 4px;

  scrollbar-width: thin;

}

.chip {

  border: 1px solid var(--color-border);

  background: var(--color-surface);

  color: var(--color-text);

  border-radius: 999px;

  padding: 8px 14px;

  min-height: 40px;

  font-weight: 500;

  font-size: var(--text-sm);

  cursor: pointer;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);

}

.chip:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

}

.chip.active {

  background: var(--color-primary);

  color: #fff;

  border-color: var(--color-primary);

}

[data-theme="dark"] .chip.active {

  color: var(--color-primary-ink);

}

.product-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));

  gap: var(--space-3);

}

.product-grid[aria-busy="true"] {

  opacity: 0.6;

  pointer-events: none;

}

.product-card {

  min-height: 168px;

  text-align: left;

  border: 1px solid var(--color-border);

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration-fast) var(--ease);

}

.product-card:hover:not(:disabled) {

  transform: translateY(-2px);

  border-color: var(--color-primary);

  box-shadow: var(--shadow-md);

}

.product-card:active:not(:disabled) {

  transform: translateY(0);

}

.product-card:disabled,

.product-card.is-oos {

  opacity: 0.55;

  cursor: not-allowed;

}

.product-card-media {

  height: 88px;

  display: grid;

  place-items: center;

  background:

    radial-gradient(120px 60px at 80% 0%, rgb(67 56 202 / 0.12), transparent 70%),

    var(--color-primary-soft);

  color: var(--color-primary);

}

.product-card-initial {

  width: 44px;

  height: 44px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  background: var(--color-surface);

  font-weight: 700;

  font-size: 18px;

  letter-spacing: -0.03em;

}

.product-card-body {

  padding: 10px 12px 12px;

  display: grid;

  gap: 4px;

  min-width: 0;

}

.product-card-cat {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--color-text-muted);

}

.product-card-body strong {

  font-size: var(--text-sm);

  line-height: 1.3;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.product-card-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 8px;

  margin-top: 4px;

}

.product-price {

  font-weight: 700;

  font-variant-numeric: tabular-nums;

  color: var(--color-text);

}

.stock-pip {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 11px;

  font-weight: 600;

  color: var(--color-success);

}

.stock-pip::before {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: currentColor;

}

.stock-pip.low { color: var(--color-warning); }

.stock-pip.out { color: var(--color-danger); }

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 32px;
  gap: var(--space-2);
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-line-info {

  display: grid;

  gap: 2px;

  min-width: 0;

}

.cart-line-info strong {

  font-size: var(--text-sm);

}

.cart-line .qty {

  display: flex;

  gap: 6px;

  align-items: center;

}

.qty-value {

  min-width: 18px;

  text-align: center;

  font-weight: 600;

  font-variant-numeric: tabular-nums;

}

.cart-line-amt {

  font-weight: 600;

  font-variant-numeric: tabular-nums;

  min-width: 76px;

  text-align: right;

}

.totals {

  display: grid;

  gap: 10px;

  margin-bottom: var(--space-4);

}

.totals > div,

.totals .total {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: var(--text-sm);

  color: var(--color-text-muted);

}

.money-field {

  display: flex;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  background: var(--color-input);

  overflow: hidden;

  min-height: 36px;

  width: 132px;

}

.money-field .money-prefix {

  padding: 0 8px 0 10px;

  font-size: var(--text-xs);

  font-weight: 600;

  color: var(--color-text-muted);

  border-right: 1px solid var(--color-border);

}

.money-field input {

  border: 0 !important;

  box-shadow: none !important;

  min-height: 36px !important;

  width: 100%;

  padding: 0 8px;

  text-align: right;

  font-variant-numeric: tabular-nums;

  background: transparent;

}

.money-field:focus-within {

  border-color: var(--color-primary);

  box-shadow: 0 0 0 4px var(--color-focus);

}

.totals .total {

  color: var(--color-text);

  font-weight: 700;

  font-size: 22px;

  letter-spacing: -0.03em;

  padding-top: 8px;

  border-top: 1px solid var(--color-border);

}

.pos-cart-actions {

  display: grid;

  grid-template-columns: 1fr 1.6fr;

  gap: var(--space-2);

}

.pos-cart-actions .btn {

  min-height: 48px;

}

.btn-pay {

  font-size: var(--text-md);

}

.pay-hero {

  font-size: 32px;

  font-weight: 700;

  letter-spacing: -0.03em;

  margin: 8px 0 20px;

  font-variant-numeric: tabular-nums;

}

.pay-methods {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-2);

}

.pay-methods .chip {

  justify-content: center;

  width: 100%;

}

.pay-section.is-hidden {

  display: none !important;

}

.pos-cart-toggle {

  display: none;

}

/* ——— Overlays ——— */

.drawer {

  display: none;

  position: fixed;

  inset: 0;

  background: var(--color-overlay);

  z-index: 30;

}

.drawer.open {

  display: block;

}

.drawer-panel {

  position: absolute;

  right: 0;

  top: 0;

  bottom: 0;

  width: min(380px, 100%);

  background: var(--color-surface);

  padding: var(--space-5);

  box-shadow: var(--shadow-lg);

  animation: drawer-in var(--duration) var(--ease);

}

@keyframes drawer-in {

  from { transform: translateX(12px); opacity: 0; }

  to { transform: none; opacity: 1; }

}

.modal {

  display: none;

  position: fixed;

  inset: 0;

  background: var(--color-overlay);

  z-index: 40;

  place-items: center;

  padding: 16px;

}

.modal.open {

  display: grid;

}

.modal-card {

  width: min(440px, calc(100% - 32px));

  background: var(--color-surface);

  border-radius: var(--radius-lg);

  padding: var(--space-5);

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--color-border);

  animation: toast-in var(--duration) var(--ease);

}

.modal-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: var(--space-3);

  margin-bottom: var(--space-3);

}

.modal-foot {

  display: flex;

  justify-content: flex-end;

  gap: var(--space-2);

  margin-top: var(--space-5);

}

.actions {

  display: flex;

  gap: var(--space-2);

  justify-content: flex-end;

}

.row-actions {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

}

.filters {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

  margin-bottom: var(--space-4);

}

.filters input,

.filters select {

  min-width: 220px;

  flex: 1 1 240px;

  max-width: 480px;

}

.nav-toggle {

  display: none;

}

.nav-backdrop {

  display: none;

}

@media (max-width: 1100px) {

  .stat-grid,

  .grid-2,

  .form-row,

  .perm-list {

    grid-template-columns: 1fr;

  }

  .search {

    max-width: 280px;

  }

  .profile-copy {
    display: none;
  }

  :root {
    --cart-width: 360px;
  }
}

@media (max-width: 1024px) {

  .login-shell {

    grid-template-columns: 42% 1fr;

  }

  .pos-body {

    grid-template-columns: 1fr 340px;

  }

}

@media (max-width: 800px) {

  .app-shell {

    grid-template-columns: 1fr;

  }

  .nav-toggle {

    display: grid;

  }

  .search {

    display: block;

    flex: 1;

    min-width: 0;

    max-width: none;

  }

  .search input {

    min-width: 0;

  }

  .brand {

    min-width: 0;

  }

  .brand-text {

    display: none;

  }

  .branch-select {

    min-width: 0;

  }

  .branch-select select {

    max-width: 140px;

  }

  .page-head {

    flex-direction: column;

    align-items: stretch;

  }

  .sidebar {

    display: none;

  }

  html.nav-open .sidebar {

    display: block;

    position: fixed;

    inset: var(--topbar-height) auto 0 0;

    width: min(var(--sidebar-width), 86vw);

    z-index: 25;

  }

  html.nav-open .nav-backdrop {

    display: block;

    position: fixed;

    inset: var(--topbar-height) 0 0 0;

    background: var(--color-overlay);

    z-index: 20;

  }

  html[data-sidebar="expanded"] .sidebar {

    display: none;

  }

  html.nav-open[data-sidebar="expanded"] .sidebar,

  html.nav-open[data-sidebar="collapsed"] .sidebar {

    display: block;

  }

  .login-shell {

    grid-template-columns: 1fr;

  }

  .login-brand {

    display: none;

  }

  .pos-shell {

    height: auto;

    min-height: 100vh;

    overflow: visible;

  }

  .pos-body {

    grid-template-columns: 1fr;

    grid-template-rows: minmax(240px, 1fr) auto;

    overflow: visible;

  }

  .pos-cart {

    border-left: 0;

    border-top: 1px solid var(--color-border);

    position: sticky;

    bottom: 0;

    z-index: 5;

    max-height: 48vh;

    box-shadow: 0 -12px 32px rgb(15 23 42 / 0.08);

  }

  .toast-stack {

    right: 12px;

    left: 12px;

    bottom: 12px;

  }

  .toast {

    min-width: 0;

    max-width: none;

  }

}

@media (max-width: 430px) {

  .topbar {

    gap: var(--space-2);

    padding: 0 var(--space-3);

  }

  .content {

    padding: var(--space-4) var(--space-3);

  }

  .login-form-wrap {

    padding: var(--space-4);

  }

  .pos-toolbar-row {

    flex-direction: column;

    align-items: stretch;

  }

  .pos-terminal {

    min-width: 0;

  }

  .product-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .pos-cart-actions {

    grid-template-columns: 1fr;

  }

}

.btn i,
.chip i,
.icon-btn i,
.login-feature i,
.login-secure i {
  width: 16px;
  height: 16px;
}

.product-card-body strong {
  line-clamp: 2;
}

.cart-line {
  grid-template-columns: minmax(0, 1fr) auto auto 32px;
}