/* ============================================
   KARTAGO — Custom Styles
   ============================================ */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Smooth scrollbar */
:root {
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
}
.dark {
  --scrollbar-track: #1e293b;
  --scrollbar-thumb: #475569;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Sidebar transitions */
#sidebar { will-change: width; }

/* POS Layout */
.pos-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; height: calc(100vh - 8rem); }
@media (max-width: 768px) { .pos-grid { grid-template-columns: 1fr; height: auto; } }

/* Card hover effects */
.card-hover { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card-hover:hover { box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1); transform: translateY(-1px); }

/* Badge styles */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.dark .badge-green { background: rgba(22,163,74,0.2); color: #86efac; }
.dark .badge-red { background: rgba(220,38,38,0.2); color: #fca5a5; }
.dark .badge-blue { background: rgba(37,99,235,0.2); color: #93c5fd; }

/* Print styles for receipts */
@media print {
  body * { visibility: hidden; }
  #receipt, #receipt * { visibility: visible; }
  #receipt { position: absolute; left: 0; top: 0; width: 80mm; }
  header, nav, aside, .no-print { display: none !important; }
  body { background: white; }
}

/* Transition animations */
.fade-in { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.slide-in { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Form input focus ring */
input:focus, select:focus, textarea:focus { outline: none; }

/* Stat card number */
.stat-number { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Onboarding progress bar */
.progress-step { transition: all 0.3s ease; }

/* Calendar day hover */
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; cursor: pointer; font-size: 0.8rem; transition: background 0.15s; }
.cal-day:hover { background: rgba(59,130,246,0.1); }
.cal-day.active { background: #3b82f6; color: white; }
.cal-day.today { font-weight: 700; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Table responsive */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sidebar nav active indicator */
.nav-active { position: relative; }
.nav-active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: #3b82f6; border-radius: 0 2px 2px 0; }

/* Button loading state */
button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Image upload preview */
.img-preview { max-width: 80px; max-height: 80px; border-radius: 0.5rem; object-fit: cover; }

/* Dark mode form inputs */
.dark input, .dark select, .dark textarea {
  color-scheme: dark;
}

/* POS product grid item */
.product-card {
  transition: all 0.15s ease;
}
.product-card:active {
  transform: scale(0.96);
}

/* Responsive sidebar overlay */
@media (max-width: 1024px) {
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
}