:root{
  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(17,24,39,.10);

  /* Premium dashboard background */
  --bg: #F4F7FB;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --heading: #111827;
  --muted: #6B7280;

  /* Accent */
  --accent: #A855F7;
  --accent-2: #7C3AED;

  /* Semantic */
  --success: #10B981; /* emerald */
  --warning: #F59E0B; /* amber */
  --danger: #EF4444;  /* red */
  --info: #3B82F6;    /* blue */

  /* Stat gradients */
  --g-sales-a: #7C3AED;
  --g-sales-b: #A855F7;
  --g-orders-a: #2563EB;
  --g-orders-b: #3B82F6;
  --g-products-a: #059669;
  --g-products-b: #10B981;
  --g-low-a: #EF4444;
  --g-low-b: #F97316;
}

html, body { height: 100%; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.app-bg{
  background:
    radial-gradient(900px 380px at 15% 10%, rgba(124,58,237,.14), rgba(124,58,237,0) 60%),
    radial-gradient(900px 380px at 90% 0%, rgba(37,99,235,.12), rgba(37,99,235,0) 60%),
    radial-gradient(900px 520px at 60% 95%, rgba(16,185,129,.10), rgba(16,185,129,0) 60%),
    linear-gradient(180deg, var(--bg) 0%, #F7F9FD 100%);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Glassy white panels */
.panel{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(229,231,235,.85);
  box-shadow:
    0 14px 40px rgba(17,24,39,.08),
    0 1px 0 rgba(255,255,255,.7) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
}

/* Premium stat cards */
.stat-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  box-shadow:
    0 22px 60px rgba(17,24,39,.16),
    0 2px 0 rgba(255,255,255,.10) inset;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 30px 70px rgba(17,24,39,.20),
    0 2px 0 rgba(255,255,255,.12) inset;
}
.stat-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 15% 10%, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
    radial-gradient(520px 260px at 90% 25%, rgba(255,255,255,.14), rgba(255,255,255,0) 58%);
  pointer-events:none;
  opacity:.9;
}
.stat-inner{ position: relative; }

.stat-sales{ background: linear-gradient(135deg, var(--g-sales-a), var(--g-sales-b)); }
.stat-orders{ background: linear-gradient(135deg, var(--g-orders-a), var(--g-orders-b)); }
.stat-products{ background: linear-gradient(135deg, var(--g-products-a), var(--g-products-b)); }
.stat-low{ background: linear-gradient(135deg, var(--g-low-a), var(--g-low-b)); }

.stat-icon{
  position: relative;
  height: 48px;
  width: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.stat-icon::before{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
  filter: blur(2px);
  opacity:.9;
}
.stat-icon > *{ position: relative; }

.stat-label{ color: rgba(255,255,255,.86); }
.stat-value{ letter-spacing: -0.02em; }

.glass-strong{
  /* keep for modals/overlays if needed */
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 16px 40px rgba(17,24,39,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-card{
  position: relative;
  overflow: hidden;
}
.glass-card::before{
  content: "";
  position: absolute;
  inset: -2px;
  /* very subtle sheen (no heavy gradients) */
  background:
    radial-gradient(420px 220px at 18% 10%, rgba(139,92,246,.10), rgba(139,92,246,0) 62%),
    radial-gradient(420px 220px at 88% 22%, rgba(59,130,246,.06), rgba(59,130,246,0) 62%);
  opacity: .75;
  pointer-events: none;
}
.glass-card > *{ position: relative; }

.kpi-icon{
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.18);
}

.soft-shadow {
  box-shadow: 0 8px 24px rgba(17,24,39,.08);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 1rem;
  padding: .7rem 1rem;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  user-select: none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 28px rgba(124,58,237,.22);
}
.btn-primary:hover{ box-shadow: 0 18px 34px rgba(124,58,237,.28); }
.btn-soft{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  color: var(--heading);
}
.btn-soft:hover{ background: rgba(255,255,255,1); }

/* Smooth transitions */
.t-smooth { transition: all .2s ease; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(15,23,42,.05); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.45); }

/* Toasts */
.toast-wrap{
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  border-radius: 0.75rem;
  padding: .75rem 1rem;
  color: #0f172a;
  min-width: 260px;
  max-width: 420px;
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
}
.toast-success{ background: rgba(34,197,94,.16); }
.toast-error{ background: rgba(239,68,68,.14); }
.toast-warning{ background: rgba(245,158,11,.16); }
.toast-info{ background: rgba(59,130,246,.14); }

@keyframes toastIn {
  from { transform: translateX(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast-anim { animation: toastIn .18s ease-out; }

/* Loading spinner */
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 2px solid rgba(15,23,42,.18);
  border-top-color: rgba(79,70,229,.95);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fullscreen loading overlay (optional) */
.loading-overlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.22);
  backdrop-filter: blur(10px);
}
.loading-overlay.show{ display: flex; }

/* Product card hover */
.product-card{ transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover{ transform: scale(1.02); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
  .toast-anim, .cart-item-anim, .modal-anim, .dot-pulse { animation: none !important; }
}

/* Cart slide animation */
@keyframes cartIn {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.cart-item-anim { animation: cartIn .14s ease-out; }

/* Modal animation */
@keyframes modalFade {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-anim { animation: modalFade .15s ease-out; }

/* Low stock pulsing dot */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.35); opacity: 1; }
}
.dot-pulse { animation: pulseDot 1s ease-in-out infinite; }

/* Sidebar: show full menu by default */
.sidebar { width: 288px; }
.sidebar-label{ opacity: 1; white-space: nowrap; }
.sidebar-accent{ display: inline-block; }

/* Fixed responsive sidebar (desktop) */
.sidebar-fixed{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
}
.content-with-sidebar{
  padding-left: 0;
}
@media (min-width: 768px){
  .content-with-sidebar{
    padding-left: 288px;
  }
}

/* Desktop: allow collapsing fixed sidebar */
@media (min-width: 768px){
  .sidebar-collapsed{
    display: none !important;
  }
  .content-no-sidebar{
    padding-left: 0 !important;
  }
}

/* Dark premium sidebar */
.sidebar-dark{
  background: linear-gradient(180deg, #111827 0%, #1E293B 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.sidebar-dark .muted{ color: rgba(255,255,255,.62); }
.sidebar-dark a{ color: rgba(255,255,255,.86); }
.sidebar-dark a:hover{ background: rgba(255,255,255,.06); }
.sidebar-dark .nav-active{
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.20);
  box-shadow: 0 18px 36px rgba(124,58,237,.18);
}
.neon-dot{
  box-shadow: 0 0 0 1px rgba(168,85,247,.22), 0 0 22px rgba(168,85,247,.40);
}

/* Chart canvas crispness */
canvas{ image-rendering: auto; }

/* Dashboard chart sizing helpers */
.donut-wrap{
  max-width: 360px;
  margin: 0 auto;
}

/* Print-friendly styles */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
}