/* WowDash-inspired theme overrides for admin/chat panel
   - provide CSS variables for colors
   - button styles similar to WowDash
   - card / widget styles
   - simple chart animation helpers (for canvas/svg wrappers)
   - keep selectors conservative to avoid breaking site-wide styles
*/
:root{
  --wd-primary:#2b6ef6; /* bright blue */
  --wd-accent:#00d084;  /* green accent */
  --wd-muted:#9aa7c0;
  --wd-bg:#f6f9ff;
  --wd-surface:#ffffff;
  --wd-border:rgba(39,57,88,0.06);
  --wd-radius:10px;
  --wd-shadow:0 6px 18px rgba(44,62,100,0.08);
}

/* Basic panel card */
.wd-card{
  background:var(--wd-surface);
  border-radius:var(--wd-radius);
  box-shadow:var(--wd-shadow);
  border:1px solid var(--wd-border);
  padding:16px;
  color:#1f2d3d;
}

/* Header small title */
.wd-card .wd-card-title{font-size:14px;color:var(--wd-muted);margin:0 0 8px 0}
.wd-card .wd-card-amount{font-size:20px;font-weight:700;color:var(--wd-primary)}

/* Action buttons */
.btn-wd{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn-wd.primary{background:linear-gradient(180deg,var(--wd-primary),#1c55d6);color:white;box-shadow:0 6px 14px rgba(43,110,246,0.18)}
.btn-wd.ghost{background:transparent;border:1px solid rgba(27,49,93,0.06);color:var(--wd-primary)}
.btn-wd.small{padding:6px 8px;font-size:13px;border-radius:6px}
.btn-wd.icon{padding:8px;border-radius:10px;min-width:44px;height:44px;justify-content:center}

/* Tiny badge */
.wd-badge{background:var(--wd-accent);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}

/* Grid helpers */
.wd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

/* Chart container: keep aspect ratio and animate opacity/scale */
.wd-chart{
  width:100%;height:140px;background:linear-gradient(180deg, rgba(43,110,246,0.03), rgba(0,0,0,0));border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:center
}
.wd-chart svg, .wd-chart canvas{width:100%;height:100%;display:block}
.wd-chart-anim{transform-origin:center;opacity:0;transform:scale(0.98);animation:wdChartIn .6s ease forwards}
@keyframes wdChartIn{to{opacity:1;transform:scale(1)}}

/* Sparkline line glow for canvas-based charts - apply a shadow via pseudo-layer */
.wd-sparkline{position:relative}
.wd-sparkline::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;border-radius:6px;pointer-events:none;box-shadow:0 10px 30px rgba(43,110,246,0.08);opacity:0;transition:opacity .28s}
.wd-sparkline:hover::after{opacity:1}

/* Table small */
.wd-table{width:100%;border-collapse:collapse;font-size:13px}
.wd-table th{color:var(--wd-muted);text-align:left;padding:8px}
.wd-table td{padding:8px;border-top:1px solid rgba(39,57,88,0.04)}

/* Utilities for tiny status chips */
.wd-status{display:inline-block;padding:6px 10px;border-radius:12px;background:#f3f7ff;color:var(--wd-primary);font-weight:700}

/* Responsive tweaks to integrate with existing layout */
@media (max-width:768px){
  .wd-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .wd-chart{height:120px}
}

/* Button style fallback for forms */
button.btn-primary, .btn-primary{background:var(--wd-primary);color:#fff;border-radius:8px;padding:8px 12px;border:0}

/* Lightweight override for existing chat/product cards to feel like WowDash */
.product-card, .subcategory-card, .product-card .product-header{border-radius:8px}
.product-card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(39,57,88,0.03);padding:10px;margin-bottom:10px}

/* Ease-in/out interactive transitions */
.wd-fade-in{animation:wdFadeIn .36s ease both}
@keyframes wdFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* small utility to emphasize numbers */
.wd-number{font-weight:800;color:var(--wd-primary);font-size:18px}

/* Color palettes for positive/negative */
.wd-up{color:#14caa3}
.wd-down{color:#ff6b6b}

/* form focus visible */
input:focus, select:focus, textarea:focus{outline:3px solid rgba(43,110,246,0.12);outline-offset:2px}

/* final: keep specificity low; use classes to apply where desired */