/* ── Sovereign POS — Custom CSS ─────────────────────────────────────────── */

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Thin scrollbar for panels */
.thin-scrollbar::-webkit-scrollbar { width: 4px; }
.thin-scrollbar::-webkit-scrollbar-track { background: transparent; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

/* Animations */
@keyframes slideIn  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideUp  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn  { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(59,173,110,.4)} 50%{box-shadow:0 0 0 6px rgba(59,173,110,0)} }
@keyframes checkmark { 0%{stroke-dashoffset:50} 100%{stroke-dashoffset:0} }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-slide-in  { animation: slideIn  .25s ease-out; }
.animate-slide-up  { animation: slideUp  .25s ease-out; }
.animate-scale-in  { animation: scaleIn  .2s  ease-out; }
.animate-shake     { animation: shake    .35s ease-in-out; }
.animate-fade-in   { animation: fadeIn   .2s  ease-out; }
.animate-pulse-green { animation: pulseGreen 2s infinite; }
.animate-spin      { animation: spin     .8s  linear infinite; }

/* Product tile press effect */
.product-tile:active { transform: scale(.96); }

/* Category border accents */
.cat-border { border-left-width: 4px; border-left-style: solid; }

/* Receipt divider */
.receipt-divider { border-top: 1px dashed #d4d4d4; }

/* Numpad button */
.numpad-btn {
  display: flex; align-items: center; justify-content: center;
  height: 56px; border-radius: 12px;
  font-size: 1.125rem; font-weight: 600;
  background: #f3f3f3; color: #041534;
  cursor: pointer; transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.numpad-btn:hover  { background: #e8e8e8; }
.numpad-btn:active { background: #ddd; transform: scale(.95); }
.numpad-btn.action { background: #006397; color: white; }
.numpad-btn.action:hover { background: #00518a; }

/* Sidebar nav active pill */
.nav-active {
  background: white;
  color: #006397;
  border-radius: 9999px 0 0 9999px;
  margin-left: .75rem;
  padding-left: .75rem;
  padding-right: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-weight: 600;
}

/* Status badge pill */
.badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; border-radius: 9999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}

/* Input base */
.input-base {
  width: 100%; padding: .5rem .75rem;
  border: 1.5px solid #e8e8e8; border-radius: .625rem;
  background: white; color: #041534; font-size: .875rem;
  outline: none; transition: border-color .15s;
}
.input-base:focus { border-color: #006397; }

/* Card */
.card { background: white; border-radius: 1rem; padding: 1.25rem; }
.card-sm { background: white; border-radius: .75rem; padding: 1rem; }

/* KPI tile */
.kpi-card {
  background: white; border-radius: 1rem; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .25rem;
}

/* Table row hover */
.table-row:hover { background: #f9f9f9; }

/* Payment method tab active */
.pay-tab-active {
  background: #041534; color: white;
  border-radius: .5rem;
}

/* Toggle switch */
.toggle-track {
  width: 40px; height: 22px; border-radius: 11px;
  transition: background .2s; cursor: pointer;
}
.toggle-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}