/* =============================================
   Custom Styles — ShopHub Ecommerce
   ============================================= */

/* Item thumb active state */
.item-thumb.active {
    outline: 2px solid var(--primary-500);
    border-radius: 6px;
}

/* Table styles */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--neutral-200); font-size: 14px; }
.table th { font-weight: 600; background: var(--neutral-50); }
.table-responsive { overflow-x: auto; }

/* Badge */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.bg-green { background-color: #16a34a !important; }
.bg-red   { background-color: #dc2626 !important; }
.bg-orange { background-color: #ea580c !important; }
.bg-primary { background-color: var(--primary-500) !important; }
.bg-primary-subtle { background-color: var(--primary-100); }
.bg-green-subtle { background-color: #dcfce7; }
.bg-red-subtle { background-color: #fee2e2; }
.bg-orange-subtle { background-color: #ffedd5; }
.bg-blue-subtle { background-color: #dbeafe; }
.bg-purple-subtle { background-color: #f3e8ff; }
.bg-neutral-500 { background-color: #6b7280 !important; }
.text-green { color: #16a34a !important; }
.text-red   { color: #dc2626 !important; }
.text-orange { color: #ea580c !important; }
.text-blue  { color: #2563eb !important; }
.text-purple { color: #7c3aed !important; }

/* Sticky */
.sticky-top { position: sticky; }

/* Dropdown */
.dropdown { position: absolute; background: #fff; border: 1px solid var(--neutral-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 100; min-width: 160px; }

/* W-full utils */
.w-100\% { width: 100%; }

/* min-h-100vh */
.min-h-100vh { min-height: 100vh; }

/* bg-lower */
.bg-lower { background: var(--neutral-100); }

/* cursor pointer */
.cursor-pointer { cursor: pointer; }

/* Gallery thumb hover */
.item-thumb img { transition: opacity .2s; }
.item-thumb:hover img { opacity: .8; }

/* Card hover border */
.card:hover.hover\:border-primary { border-color: var(--primary-500); }

/* Scrollbar thin */
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }

/* Nav active */
.nav-link.active { color: var(--primary-500) !important; background: var(--primary-50); }

/* Alert icons */
.alert { display: flex; align-items: flex-start; gap: 8px; }

/* Text utils */
.text-lg  { font-size: 18px; }
.text-xl  { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* Aspect ratio */
[style*="aspect-ratio:1"] { aspect-ratio: 1; overflow: hidden; }

/* Grid cols */
.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Responsive table */
@media (max-width: 640px) {
    .table th, .table td { padding: 8px 10px; font-size: 12px; }
}