/* Enterprise UX refinements */
body { background: #f6f8fb; color: #1e293b; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .18);
  outline-offset: 2px;
}
.main-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: 3rem !important;
}
.sidebar { box-shadow: 8px 0 28px rgba(2, 6, 23, .08); }
.sidebar nav { scrollbar-width: none; }
.sidebar nav::-webkit-scrollbar { display: none; }
.developer-credit { letter-spacing: .025em; }
.developer-credit span { color: #2563eb; font-weight: 700; }
.sidebar-credit span { color: #93c5fd; }
.quick-login {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  min-height: 46px;
  padding: .4rem .6rem;
  border: 1px solid #e2e8f0;
  border-radius: .7rem;
  background: #fff;
  text-align: left;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.quick-login:hover { border-color: #93c5fd; background: #f8fbff; box-shadow: 0 4px 12px rgba(37, 99, 235, .08); }
.quick-login:active { transform: translateY(1px); }
.quick-login-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: .6rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 800;
}
.nav-link { min-height: 42px; border: 1px solid transparent; }
.nav-link.active { box-shadow: 0 2px 8px rgba(37, 99, 235, .18); }
.card { border-color: #e3e8ef; box-shadow: 0 1px 3px rgba(15, 23, 42, .045); }
.field { min-height: 42px; color: #1e293b; border-color: #d6dde8; }
.field::placeholder { color: #94a3b8; }
.field:disabled { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
.btn { min-height: 40px; padding: .65rem 1rem; box-shadow: none; }
.btn-primary, .btn-success, .btn-danger { box-shadow: 0 2px 6px rgba(37, 99, 235, .12); }
.btn-primary:active, .btn-success:active, .btn-danger:active { transform: translateY(1px); }
.icon-btn { border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: #f1f5f9; border-color: #e2e8f0; }
.relative > svg:first-child {
  position: absolute;
  left: .8rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
}
.table-wrap {
  max-width: 100%;
  border-radius: 0 0 .85rem .85rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: .85rem;
  padding-bottom: .85rem;
  background: #f8fafc;
}
.data-table tbody tr { transition: background-color .12s; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child, .data-table th:first-child { padding-left: 1.25rem; }
.data-table td:last-child, .data-table th:last-child { padding-right: 1.25rem; }
.kpi-card { min-height: 116px; }
.kpi-card::after { display: none; }
.modal-backdrop { animation: fade-in .14s ease; backdrop-filter: blur(3px); }
.modal-card { animation: modal-in .18s ease; border: 1px solid rgba(255, 255, 255, .35); }
.modal-header { box-shadow: 0 1px 0 #e2e8f0; }
.modal-body { overscroll-behavior: contain; }
.pos-grid > aside { position: sticky; top: 5rem; max-height: calc(100vh - 6.5rem); }
.toast { display: flex; align-items: center; min-height: 52px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .pos-grid > aside { position: static; max-height: none; }
  .main-content { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 640px) {
  .main-content { padding: .9rem !important; padding-bottom: 2rem !important; }
  .main-content h1 { font-size: 1.3rem; line-height: 1.7rem; }
  .card { border-radius: .75rem; }
  .kpi-card { min-height: 108px; padding: 1rem !important; }
  .btn { min-height: 42px; }
  .modal-backdrop { align-items: flex-end; padding: .5rem; }
  .modal-card { height: auto; max-height: calc(100vh - 1rem); border-radius: 1rem; }
  .modal-header, .modal-body { padding: 1rem; }
  .toast { min-width: 0; width: calc(100vw - 2rem); max-width: none; }
  #toast-root { left: 1rem; right: 1rem; top: 1rem; }
  .data-table th, .data-table td { padding: .72rem .75rem; }
  .data-table td:first-child, .data-table th:first-child { padding-left: 1rem; }
  .data-table td:last-child, .data-table th:last-child { padding-right: 1rem; }
  #product-category, #product-status, #inv-category, #inv-condition,
  #sale-shop, #alert-location, #alert-type, #alert-status {
    width: 100% !important;
    flex: 1 1 100%;
  }
  .item-row, .transfer-item { grid-template-columns: minmax(0, 1fr) 92px 40px !important; }
  .item-row .item-product, .transfer-item .transfer-product { grid-column: 1 / -1; }
  .modal-card .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}