/* =======================================================
   Tashgheel POS – Premium Component Styles
   "Luminous Light (Navy Edition)" – Glass Morphism
   ======================================================= */

/* Font universal override */
body, input, button, select, textarea {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── Sidebar nav RTL/LTR cleanup ─────────────────────── */
aside,
aside[class*="bg-gradient"],
aside#appSidebar,
.sidebar {
  background: linear-gradient(175deg, #020C1B 0%, #0A192F 40%, #112240 75%, #0A192F 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 4px 0 30px rgba(2, 12, 27, 0.25), 1px 0 0 rgba(255,255,255,0.04) !important;
}

.sidebar-header {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar-header h2,
.sidebar-header #posSystemTitle {
  color: #ffffff !important;
}

.sidebar-header p,
.sidebar-header #licensedVersion {
  background: rgba(37, 99, 235, 0.25) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
  color: rgba(147, 197, 253, 0.9) !important;
}

/* ── Sidebar nav item polish ──────────────────────────── */
aside nav a.nav-item,
aside nav a,
aside#appSidebar nav a {
  border-left: none !important;
  border-left-width: 0 !important;
  margin: 2px 10px !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
  border: 1px solid transparent !important;
}

aside nav a.nav-item:hover,
aside nav a:hover,
aside#appSidebar nav a:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  padding-left: 20px !important;
  border-color: rgba(255,255,255,0.08) !important;
}

aside nav a.nav-item.active,
aside nav a[class*="bg-white/10"],
aside#appSidebar nav a[class*="bg-white/10"],
aside nav a.active {
  background: rgba(37, 99, 235, 0.22) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.sidebar-footer {
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── POS Category Buttons ─────────────────────────────── */
.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #1e293b;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  min-height: 72px;
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}

.category-btn:hover {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(239, 246, 255, 0.92);
  color: #0A192F;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 25, 47, 0.08);
}

.category-btn.active {
  background: linear-gradient(135deg, rgba(239,246,255,0.95), rgba(219,234,254,0.88)) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #0A192F !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ── POS Product Cards ─────────────────────────────────── */
#productGrid .bg-white,
#productGrid .product-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 25, 47, 0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

#productGrid .bg-white:hover,
#productGrid .product-card:hover {
  border-color: rgba(37, 99, 235, 0.25) !important;
  box-shadow: 0 12px 32px rgba(10, 25, 47, 0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transform: translateY(-4px) !important;
}

/* "Add to Cart" button in product card */
#productGrid button[onclick*="addToCart"],
#productGrid .btn {
  border-radius: 9px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  background: linear-gradient(135deg, #0A192F, #1B355A) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.25s !important;
  box-shadow: 0 2px 8px rgba(10,25,47,0.2) !important;
}
#productGrid button[onclick*="addToCart"]:hover {
  background: linear-gradient(135deg, #1B355A, #2563EB) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(10,25,47,0.25) !important;
}

/* ── Cart Panel ─────────────────────────────────────────── */
.cart.w-\[360px\],
div.cart {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(10, 25, 47, 0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Cart item image thumbnail */
.cart-item img,
#cartItems img {
  border-radius: 9px;
  width: 44px !important;
  height: 44px !important;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.6);
}

/* Cash/Card/Mobile payment buttons */
button#cashBtn,
button#cardBtn,
button#mobileBtn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
  background: linear-gradient(135deg, #0A192F, #1B355A) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(10, 25, 47, 0.20) !important;
  transition: all 0.25s !important;
  border: none !important;
}
button#cashBtn:hover,
button#cardBtn:hover,
button#mobileBtn:hover {
  background: linear-gradient(135deg, #1B355A, #2563EB) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(10, 25, 47, 0.28) !important;
}

/* ── POS Metric Cards (top of POS page) ─────────────────── */
.grid-cols-3 > div[class*="bg-[#"],
.grid.grid-cols-3 > div {
  border-radius: 18px !important;
  padding: 20px !important;
  backdrop-filter: blur(12px) !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: 12px !important;
  border: 1.5px solid rgba(10, 25, 47, 0.10) !important;
  padding: 10px 16px 10px 42px !important;
  font-size: 0.84rem !important;
  transition: all 0.25s !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 8px rgba(10,25,47,0.05), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  outline: none !important;
}
header input#productSearch:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12), inset 0 1px 3px rgba(10,25,47,0.04) !important;
  background: rgba(255,255,255,0.95) !important;
}

/* ── Modal Enhancement ──────────────────────────────────── */
#editProductModal .modal-content,
#categoryModal .modal-content {
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(2,12,27,0.18), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
}

#editProductModal .modal-header,
#categoryModal .modal-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255,255,255,0.45) !important;
  border-radius: 24px 24px 0 0 !important;
}

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

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

/* Form labels in modal */
#editProductModal label,
#categoryModal label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
  display: block;
}

/* Error text below inputs */
.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) td {
  background: rgba(255,255,255,0.55);
}
.data-table tbody tr:nth-child(even) td:hover,
.data-table tbody tr:nth-child(even):hover td {
  background: rgba(255,255,255,0.82) !important;
}

/* ── Admin page: Settings cards ───────────────────────── */
.border.rounded-xl.p-5 {
  border-color: rgba(255,255,255,0.55) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.25s !important;
}
.border.rounded-xl.p-5:hover {
  box-shadow: 0 8px 24px rgba(10,25,47,0.08) !important;
  border-color: rgba(37,99,235,0.15) !important;
}

/* ── Custom Scrollbar ───────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar { width: 4px; }
.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: rgba(10, 25, 47, 0.12);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 25, 47, 0.22);
}

/* ── Loading spinner ────────────────────────────────────── */
#loadingOverlay .spinner {
  border: 3px 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 ──────────────────────────── */
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: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  color: #1e293b !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
td button[onclick*="viewReceipt"]:hover,
td button[onclick*="receipt"]:hover {
  background: rgba(239,246,255,0.95) !important;
  border-color: rgba(37,99,235,0.25) !important;
  color: #0A192F !important;
  transform: translateY(-1px);
}

/* ── Global button focus ──────────────────────────────── */
button:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* ── RTL-specific adjustments ───────────────────────────── */
body.rtl { direction: rtl; }
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; }

/* Nav Links RTL */
body.rtl aside nav a,
body.rtl aside#appSidebar nav a { 
  text-align: right !important; 
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
body.rtl aside nav a:hover,
body.rtl aside#appSidebar nav a:hover {
  padding-left: 16px !important;
  padding-right: 20px !important;
}

/* Search bar icon positioning */
body.rtl header input#productSearch {
  padding: 10px 42px 10px 16px !important;
}

/* Modals */
body.rtl .modal-content { direction: rtl; text-align: right; }
body.rtl .modal-header { flex-direction: row-reverse; }

/* Tables */
body.rtl th, body.rtl td { text-align: right; }

/* Product Info */
body.rtl #productGrid .product-card .info { text-align: right !important; }
body.rtl #productGrid .product-card .price { margin-right: auto; margin-left: 0; }


/* ── Collapse transition for 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; }

/* ── Shift summary ───────────────────────────────────── */
#shiftSummaryDetails {
  background: rgba(240, 244, 255, 0.7) !important;
  backdrop-filter: blur(8px);
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  padding: 14px !important;
}
#shiftSummaryDetails p {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.82rem;
  color: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
#shiftSummaryDetails p:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 0.9rem;
}

/* ── Premium Product Card (POS #productGrid) ─────────────── */
#productGrid .product-card .image-wrapper {
  background: rgba(240, 244, 255, 0.7) !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 rgba(255,255,255,0.65) !important;
}
#productGrid .product-card .image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s ease !important;
}
#productGrid .product-card:hover .image-wrapper img {
  transform: scale(1.06) !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: 700 !important;
  margin-bottom: 4px !important;
}
#productGrid .product-card .title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #0a192f !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: 1rem !important;
  font-weight: 800 !important;
  color: #0A192F !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: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  color: #1e293b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
  text-align: center !important;
  backdrop-filter: blur(8px);
}
#productGrid .product-card:hover .add-btn {
  background: linear-gradient(135deg, #0A192F, #1B355A) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(10,25,47,0.2);
}

/* ── Reports page stat cards ─────────────────────────────── */
.stat-card.blue {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92) 0%, rgba(219, 234, 254, 0.7) 100%) !important;
  border: 1px solid rgba(147, 197, 253, 0.4) !important;
}
.stat-card.green {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.92) 0%, rgba(209, 250, 229, 0.7) 100%) !important;
  border: 1px solid rgba(110, 231, 183, 0.4) !important;
}
.stat-card.orange {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.92) 0%, rgba(254, 243, 199, 0.7) 100%) !important;
  border: 1px solid rgba(253, 230, 138, 0.4) !important;
}
.stat-card.purple {
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.92) 0%, rgba(237, 233, 254, 0.7) 100%) !important;
  border: 1px solid rgba(196, 181, 253, 0.4) !important;
}
.stat-card.red {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.92) 0%, rgba(254, 226, 226, 0.7) 100%) !important;
  border: 1px solid rgba(252, 165, 165, 0.4) !important;
}
.stat-card p {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ── Page wrapper overrides (remove hardcoded #f8fafc) ───── */
body[style*="background-color"] {
  background-color: transparent !important;
}

/* ── Section/Main scrollable area ───────────────────────── */
section#scrollableSection,
main > section {
  background: transparent !important;
  overflow-y: auto;
}

/* ── Keyframe animations ─────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08); }
}

/* Cards animate in */
.stat-card, .card, .report-card {
  animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger children in grids */
.stats-grid .stat-card:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.15s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.20s; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 0.25s; }

/* ── Gradient card headers (full navy) ───────────────────── */
.px-6.py-4.border-b.bg-gradient-to-r.from-brand-blue,
.px-6.py-4.bg-gradient-to-r.from-brand-blue {
  background: linear-gradient(135deg, #0A192F, #1B355A) !important;
  padding: 16px 22px !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}

.px-6.py-4.border-b.bg-gradient-to-r.from-brand-blue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(255,255,255,0.04));
  pointer-events: none;
}

/* ── Body background (hard override for inline styles) ────── */
#mainWrapper,
div[style*="display: flex; flex-direction: row; min-height: 100vh"] {
  background: transparent !important;
}

main[style*="background-color"],
main[style*="background-color: #f8fafc"] {
  background: transparent !important;
}

section[style*="background-color"],
section[style*="background-color: #f4f7f9"] {
  background: transparent !important;
}

/* ── bg-brand-gray-light Tailwind override ─────────────────── */
/* Ensure the body and main areas show the beautiful glass background */
.bg-brand-gray-light {
  background-color: transparent !important;
  background-image: none !important;
}

/* Force body to always show our gradient mesh background */
body {
  background-color: #F0F4FF !important;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(37, 99, 235, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgba(139, 92, 246, 0.03) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* ── Content padding areas ─────────────────────────────────── */
section.overflow-y-auto,
main.overflow-y-auto,
div.overflow-y-auto {
  background: transparent;
}

/* ── Ensure all page content areas are transparent ─────────── */
.flex-1.flex.flex-col.min-h-0.overflow-hidden.bg-brand-gray-light {
  background: transparent !important;
}