/* =======================================================
   Tashgheel POS – Supplemental Component Styles
   Loaded after styles.css and tailwind.css
   Ensures pixel-perfect match to the reference design
   ======================================================= */

/* ── POS Page: Category buttons ────────────────────────── */
.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  text-align: center;
  min-height: 72px;
}

.category-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37,99,235,0.1);
}

.category-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
}

/* ── POS Product Cards ──────────────────────────────────── */
#productGrid .bg-white {
  border-radius: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  overflow: hidden;
}

#productGrid .bg-white:hover {
  border-color: #2563eb !important;
  box-shadow: 0 6px 14px rgba(37,99,235,0.1) !important;
  transform: translateY(-2px) !important;
}

/* "Add to Cart" button in product card */
#productGrid button[onclick*="addToCart"],
#productGrid .btn {
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.2s !important;
}
#productGrid button[onclick*="addToCart"]:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}

/* ── Cart Panel ─────────────────────────────────────────── */
.cart.w-\[360px\],
div.cart {
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  border: 1px solid #e5e7eb !important;
}

/* Cart item image thumbnail */
.cart-item img,
#cartItems img {
  border-radius: 8px;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
  flex-shrink: 0;
}

/* Cash/Card/Mobile payment buttons */
button#cashBtn,
button#cardBtn,
button#mobileBtn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
  box-shadow: 0 3px 8px rgba(24,119,242,0.2) !important;
  transition: all 0.2s !important;
}
button#cashBtn:hover,
button#cardBtn:hover,
button#mobileBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(24,119,242,0.3) !important;
}

/* ── POS Metric Cards (top of POS page) ─────────────────── */
.grid-cols-3 > div[class*="bg-[#"],
.grid.grid-cols-3 > div {
  border-radius: 16px !important;
  padding: 20px !important;
}

/* ── Dashboard metric icon circles ─────────────────────── */
.w-10.h-10.rounded-full {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

/* ── Top bar search (POS page) ──────────────────────────── */
header input#productSearch {
  border-radius: 10px !important;
  border: 1.5px solid #e5e7eb !important;
  padding: 9px 16px 9px 40px !important;
  font-size: 0.83rem !important;
  transition: all 0.2s !important;
  background: #f9fafb !important;
  outline: none !important;
}
header input#productSearch:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  background: #fff !important;
}

/* ── Modal Enhancement ──────────────────────────────────── */
/* Products page modal (Add/Edit Product – like screenshot 3) */
#editProductModal .modal-content,
#categoryModal .modal-content {
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
  padding: 0 !important;
}

#editProductModal .modal-header,
#categoryModal .modal-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

#editProductModal .modal-header h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

#editProductModal form.form-grid,
#categoryModal form {
  padding: 20px 22px !important;
}

/* Form labels in modal (like screenshot 3 – small caps label) */
#editProductModal label,
#categoryModal label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 4px !important;
  display: block;
}

/* Error text below inputs (screenshot 3 – red validation) */
.field-error,
p.text-red-500,
span.text-red-500,
.error-msg {
  color: #ef4444 !important;
  font-size: 0.72rem !important;
  margin-top: 3px !important;
  display: block;
}

/* ── Tables: Stripe effect ──────────────────────────────── */
.data-table tbody tr:nth-child(even) {
  background: #fafafa;
}
.data-table tbody tr:nth-child(even):hover {
  background: #f0f5ff;
}

/* ── Admin page: E-Commerce integration cards ───────────── */
.border.rounded-xl.p-5 {
  border-color: #e5e7eb !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.border.rounded-xl.p-5:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* ── Custom Scrollbar ───────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── Loading spinner ────────────────────────────────────── */
#loadingOverlay .spinner {
  border: 4px solid rgba(255,255,255,0.2) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Order type pills in table (like screenshot 2) ──────── */
td span[style*="background"],
.order-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ── View Receipt / action buttons ─────────────────────── */
button.view-receipt-btn,
td button[onclick*="viewReceipt"],
td button[onclick*="receipt"] {
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  color: #374151 !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  cursor: pointer;
}
td button[onclick*="viewReceipt"]:hover,
td button[onclick*="receipt"]:hover {
  background: #f9fafb !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

/* ── Global: remove any conflicting outline on buttons ──── */
button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;
}

/* ── RTL-specific adjustments ───────────────────────────── */
body.rtl .sidebar-footer,
body.rtl .sidebar-header {
  text-align: right;
}
body.rtl #cartItems {
  direction: rtl;
}
body.rtl .payment-methods {
  direction: rtl;
}
body.rtl .form-grid {
  direction: rtl;
}

/* ── Collapse transition for any hidden panels ──────────── */
.panel-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}
.panel-collapse.open {
  max-height: 1000px;
}

/* ── Input number – remove spinners ────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.4;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  opacity: 1;
}

/* ── Quick stats row in shift summary ───────────────────── */
#shiftSummaryDetails {
  background: #f8fafc !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  padding: 14px !important;
}
#shiftSummaryDetails p {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.82rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}
#shiftSummaryDetails p:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ── Premium Style Enhancements ── */
body, input, button, select, textarea {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Sidebar navigation cleanup */
aside nav a.nav-item,
aside nav a {
  border-left: none !important;
  border-left-width: 0 !important;
  margin: 4px 12px !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}
aside nav a.nav-item:hover,
aside nav a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  padding-left: 16px !important;
}
aside nav a.nav-item.active,
aside nav a[class*="bg-white/10"],
aside nav a.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Dashboard stat cards light pastel styles (Image 2) */
.admin-stat-card-blue {
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e3a8a !important;
  border-radius: 16px !important;
}
.admin-stat-card-green {
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  color: #064e3b !important;
  border-radius: 16px !important;
}
.admin-stat-card-orange {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #78350f !important;
  border-radius: 16px !important;
}
.admin-stat-card-purple {
  background: #f5f3ff !important;
  border: 1.5px solid #ddd6fe !important;
  color: #4c1d95 !important;
  border-radius: 16px !important;
}

/* Product Cards Container override */
#productGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 16px !important;
}

/* Premium Product Card details */
#productGrid .product-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  min-height: 250px !important;
}
#productGrid .product-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.05) !important;
  transform: translateY(-4px) !important;
}
#productGrid .product-card .image-wrapper {
  background: #f8fafc !important;
  border-radius: 12px !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  border: 1px solid #f1f5f9 !important;
}
#productGrid .product-card .image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}
#productGrid .product-card:hover .image-wrapper img {
  transform: scale(1.05) !important;
}
#productGrid .product-card .info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-align: left !important;
}
#productGrid .product-card .category {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
#productGrid .product-card .title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 34px !important;
}
#productGrid .product-card .price {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
}
#productGrid .product-card .stock {
  font-size: 0.7rem !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
}
#productGrid .product-card .add-btn {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
  text-align: center !important;
}
#productGrid .product-card:hover .add-btn {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Reports page stat cards matching pastel dashboard */
.stat-card.blue {
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  border-top: none !important;
}
.stat-card.green {
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  border-top: none !important;
}
.stat-card.orange {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  border-top: none !important;
}
.stat-card.purple {
  background: #f5f3ff !important;
  border: 1.5px solid #ddd6fe !important;
  border-top: none !important;
}
.stat-card.red {
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  border-top: none !important;
}
.stat-card p {
  color: #475569 !important;
  font-weight: 600 !important;
}