/* ─── Enhanced theme: colors, motion, icons ─── */
:root {
  --green: #10b981;
  --green-dark: #059669;
  --green-light: #d1fae5;
  --green-glow: rgba(16, 185, 129, 0.3);
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-cyan: #06b6d4;
  --bg: #f0f4f8;
  --bg-mesh: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(16, 185, 129, 0.1), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(59, 130, 246, 0.07), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(139, 92, 246, 0.05), transparent),
    #f0f4f8;
}

html, body {
  background: var(--bg-mesh);
  background-attachment: fixed;
}

/* ─── Icon boxes ─── */
.icon-box--green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.icon-box--blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.icon-box--purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
.icon-box--amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.icon-box--rose { background: linear-gradient(135deg, #ffe4e6, #fecdd3); color: #e11d48; }
.icon-box--cyan { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #0891b2; }
.icon-box--slate { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
.icon-box--pink { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }

/* ─── Sidebar enhancements ─── */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  box-shadow: 4px 0 30px rgba(15, 23, 42, 0.04);
}

.nav-item.active {
  background: linear-gradient(90deg, #d1fae5 0%, rgba(209, 250, 229, 0.3) 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.12);
}

.shop-icon {
  background: linear-gradient(135deg, var(--green-light), #a7f3d0) !important;
}

/* ─── KPI cards gradient tops ─── */
.kpi-grid .kpi-card:nth-child(1)::after { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.kpi-grid .kpi-card:nth-child(2)::after { background: linear-gradient(90deg, #10b981, #34d399); }
.kpi-grid .kpi-card:nth-child(3)::after { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.kpi-grid .kpi-card:nth-child(4)::after { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.kpi-card:nth-child(1) .kpi-icon { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1d4ed8; }
.kpi-card:nth-child(2) .kpi-icon { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #047857; }
.kpi-card:nth-child(3) .kpi-icon { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #b45309; }
.kpi-card:nth-child(4) .kpi-icon { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #6d28d9; }

/* ─── Greeting gradient ─── */
.page-greeting {
  background: linear-gradient(135deg, var(--navy) 0%, #334155 60%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Login hero shimmer ─── */
.login-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 60%
  );
  animation: shimmer 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.login-logo-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(59, 130, 246, 0.25)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ─── POS products entrance ─── */
.pos-product:nth-child(1) { animation-delay: 0.02s; }
.pos-product:nth-child(2) { animation-delay: 0.04s; }
.pos-product:nth-child(3) { animation-delay: 0.06s; }
.pos-product:nth-child(4) { animation-delay: 0.08s; }
.pos-product:nth-child(5) { animation-delay: 0.1s; }
.pos-product:nth-child(6) { animation-delay: 0.12s; }
.pos-product:nth-child(7) { animation-delay: 0.14s; }
.pos-product:nth-child(8) { animation-delay: 0.16s; }

.pos-product .product-icon-wrap .icon-box {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

/* ─── Header glass ─── */
.top-header {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(226, 232, 240, 0.8);
}

/* ─── Buttons enhanced ─── */
.btn-primary {
  background: linear-gradient(135deg, #22c55e, #10b981);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #16a34a, #059669);
}

.btn-pos {
  background: linear-gradient(135deg, #22c55e, #10b981) !important;
}

.btn-pos:hover {
  background: linear-gradient(135deg, #16a34a, #059669) !important;
}

/* ─── User avatar ─── */
.user-avatar {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* ─── Dropdown items with icons ─── */
.pos-dropdown-item .icon,
.dropdown-item .icon {
  opacity: 0.8;
}

/* ─── Data table hover ─── */
.data-table tbody tr {
  transition: background 0.12s;
}

.data-table th {
  letter-spacing: 0.06em;
}

/* ─── Chart card ─── */
.chart-card h3 .icon {
  color: var(--green-dark);
}

/* ─── Page title icon ─── */
.page-title--icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title--icon .icon {
  color: var(--green-dark);
}

/* ─── Date range ─── */
.date-range .icon {
  color: var(--green-dark);
  flex-shrink: 0;
}

/* ─── Stat box ─── */
.stat-box {
  background: linear-gradient(135deg, #ecfdf5, #fff) !important;
}

/* ─── Chevron ─── */
.chevron-sm {
  display: inline-flex;
  color: var(--muted);
}

.chevron-sm .icon { display: block; }

/* ─── Nav icon ─── */
.nav-icon .icon { display: block; }

/* ─── Breadcrumb add button ─── */
.breadcrumb-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--green-dark);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.breadcrumb-add:hover {
  background: var(--green);
  color: white;
}

/* ─── Modal enhanced ─── */
.modal {
  background: rgba(255, 255, 255, 0.98);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ─── Icon btn ─── */
.icon-btn .icon { color: var(--slate); }

.icon-btn:hover .icon { color: var(--green-dark); }

/* ─── Table actions ─── */
.btn-action { color: var(--slate); }

/* ─── Form required ─── */
.field-required {
  color: #ef4444;
  font-size: 13px;
}

/* ─── Form hint ─── */
.field-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

/* ─── Auth links ─── */
.code-hint { margin-bottom: 16px; }

/* ─── Mobile sidebar overlay transition ─── */
@media (max-width: 767px) {
  .sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
  }
}

/* ─── Responsive: tablet card grid ─── */
@media (min-width: 768px) and (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 20px; }
  .settings-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED VISUAL POLISH v2
══════════════════════════════════════════════════════════ */

/* ─── Richer mesh background ─── */
:root {
  --bg-mesh:
    radial-gradient(ellipse 90% 60% at 15% -5%, rgba(16,185,129,0.12), transparent),
    radial-gradient(ellipse 70% 50% at 85% 8%, rgba(59,130,246,0.08), transparent),
    radial-gradient(ellipse 60% 40% at 50% 105%, rgba(139,92,246,0.06), transparent),
    radial-gradient(ellipse 40% 30% at 95% 60%, rgba(245,158,11,0.05), transparent),
    #f0f4f8;
}

/* ─── Enhanced page title ─── */
.page-title {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 23px;
  letter-spacing: -0.03em;
}

/* ─── Deeper sidebar shadow ─── */
.sidebar {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
  box-shadow: 6px 0 40px rgba(15,23,42,0.06) !important;
}

/* ─── Active nav accent ─── */
.nav-item.active::before {
  width: 4px;
  background: linear-gradient(180deg, var(--green), #059669);
  border-radius: 0 4px 4px 0;
}

/* ─── Section labels in nav ─── */
.nav-section-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 12px 4px;
}

/* ─── Shop card hover ─── */
.shop-card:hover {
  background: linear-gradient(135deg, rgba(209,250,229,0.3), white);
}

/* ─── KPI row 2 icons ─── */
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(1) .kpi-icon { background: linear-gradient(135deg, #cffafe, #67e8f9); color: #0891b2; }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(2) .kpi-icon { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #047857; }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(3) .kpi-icon { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(4) .kpi-icon { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }

/* ─── KPI row 2 accent tops ─── */
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(1)::after { background: linear-gradient(90deg, #06b6d4, #0891b2); }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(2)::after { background: linear-gradient(90deg, #10b981, #059669); }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(3)::after { background: linear-gradient(90deg, #f43f5e, #e11d48); }
.kpi-grid:nth-of-type(2) .kpi-card:nth-child(4)::after { background: linear-gradient(90deg, #64748b, #94a3b8); }

/* ─── Chart card enhanced header ─── */
.chart-card-header h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ─── Loyalty stat cards accent ─── */
.loyalty-stats .loyalty-stat-card:nth-child(1) { border-top: 3px solid #10b981; }
.loyalty-stats .loyalty-stat-card:nth-child(2) { border-top: 3px solid #3b82f6; }
.loyalty-stats .loyalty-stat-card:nth-child(3) { border-top: 3px solid #f59e0b; }

.loyalty-stat-card .lsc-value {
  background: linear-gradient(135deg, #0f172a, #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Better HIW steps ─── */
.hiw-num {
  box-shadow: 0 4px 16px rgba(16,185,129,0.35);
}

/* ─── Report stat cards ─── */
.report-stats-row .report-stat:nth-child(1) { border-left: 3px solid var(--green); }
.report-stats-row .report-stat:nth-child(2) { border-left: 3px solid #3b82f6; }
.report-stats-row .report-stat:nth-child(3) { border-left: 3px solid #8b5cf6; }

.report-stat-value {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Cal stat cards ─── */
.cal-stats-row .cal-stat:nth-child(1) { border-left: 3px solid #10b981; }
.cal-stats-row .cal-stat:nth-child(2) { border-left: 3px solid #3b82f6; }
.cal-stats-row .cal-stat:nth-child(3) { border-left: 3px solid #f59e0b; }
.cal-stats-row .cal-stat:nth-child(4) { border-left: 3px solid #8b5cf6; }

/* ─── Better page content animation ─── */
.page-content {
  animation: pageIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Improved dropdown items ─── */
.dropdown-item {
  border-radius: 9px;
  margin: 1px 4px;
  transition: all 0.12s;
}

.dropdown-item:hover {
  background: linear-gradient(90deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02));
  padding-left: 22px;
  transition: padding-left 0.15s, background 0.12s;
}

/* ─── Enhanced ref badges ─── */
.ref-badge {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgba(59,130,246,0.2);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

.ref-badge.pu {
  background: linear-gradient(135deg, #fdf4ff, #f3e8ff);
  border: 1px solid rgba(139,92,246,0.2);
}

/* ─── Pay type badges ─── */
.pay-type-badge {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border: 1px solid rgba(6,182,212,0.2);
}

.pay-type-badge.cash {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border: 1px solid rgba(16,185,129,0.2);
}

.pay-type-badge.kaspi {
  background: linear-gradient(135deg, #fef9c3, #fef08a);
  border: 1px solid rgba(245,158,11,0.2);
}

.pay-type-badge.halyk {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  border: 1px solid rgba(236,72,153,0.2);
}

/* ─── Better empty states ─── */
.empty-state {
  color: var(--muted);
  font-size: 14px;
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #fafbfd, #fff);
}

/* ─── Bulk toolbar enhanced ─── */
.bulk-toolbar {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-bottom-color: #93c5fd;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ─── Settings logo upload ─── */
.logo-upload-area {
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* ─── Better sidebar top ─── */
.sidebar-top {
  padding: 16px;
  border-bottom-color: rgba(226,232,240,0.8);
}

/* ─── Improved filter bar bg ─── */
.filter-bar {
  background: linear-gradient(180deg, #f8fafc, #f4f6f8) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ─── Better POS cart header ─── */
.pos-cart-header {
  background: linear-gradient(180deg, #fff, #fafbfd);
  border-bottom: 1px solid var(--border);
}

/* ─── Date badge enhanced ─── */
.date-badge {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 1px solid rgba(226,232,240,0.8);
  font-weight: 500;
}

/* ─── SKU badge enhanced ─── */
.sku-badge {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid rgba(226,232,240,0.8);
  font-family: 'Courier New', monospace;
}