/* ═══════════════════════════════════════════════════════════════════
   KAAL Cloud Super Admin Dashboard — Global Styles
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --color-bg:        #020617;
  --color-dark:      #0f172a;
  --color-card:      rgba(15,23,42,0.85);
  --color-border:    rgba(51,65,85,0.6);
  --color-primary:   #ef4444;
  --color-emerald:   #10b981;
  --color-red:       #ef4444;
  --color-amber:     #f59e0b;
  --color-cyan:      #06b6d4;
}

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: #cbd5e1;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(239,68,68,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(239,68,68,.55); }

/* ── Glass card ── */
.glass-card {
  background: var(--color-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── KPI hover glow ── */
.kpi-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(239,68,68,.04) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.kpi-card:hover::after { opacity: 1; }

/* ── Number counter animation ── */
.counter-animate {
  transition: all .4s cubic-bezier(.4,0,.2,1);
}

/* ── Shimmer loading skeleton ── */
@keyframes shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}
.skeleton {
  background: linear-gradient(90deg,#1e293b 25%,#273550 50%,#1e293b 75%);
  background-size: 500px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ── Badge variants ── */
.badge-success { background: rgba(16,185,129,.15); color: #10b981; }
.badge-danger  { background: rgba(239,68,68,.15);  color: #ef4444; }
.badge-warning { background: rgba(245,158,11,.15); color: #f59e0b; }
.badge-info    { background: rgba(239,68,68,.15); color: #f87171; }
.badge-gray    { background: rgba(71,85,105,.4);   color: #94a3b8; }

/* ── Funnel bars ── */
.funnel-bar-wrap { position: relative; height: 44px; display: flex; align-items: center; }
.funnel-bar-bg   { position: absolute; inset: 0; background: rgba(30,41,59,.8); border-radius: 8px; }
.funnel-bar-fill { position: absolute; top:0; left:0; bottom:0; border-radius: 8px;
                   background: linear-gradient(90deg, #ef4444, #f87171);
                   transition: width .8s cubic-bezier(.4,0,.2,1); }
.funnel-bar-label { position: relative; z-index: 1; display: flex; align-items: center;
                    justify-content: space-between; width: 100%; padding: 0 12px; }

/* ── Heatmap cells ── */
.hmap-cell {
  width: 24px; height: 20px; border-radius: 3px;
  transition: transform .15s;
  cursor: default;
}
.hmap-cell:hover { transform: scale(1.25); }

/* ── Table row hover ── */
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(239,68,68,.06); }

/* ── Feed item entry ── */
@keyframes feedIn {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: none; }
}
.feed-item { animation: feedIn .2s ease-out both; }

/* ── Pulse dot ── */
@keyframes pulseDot {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 currentColor; }
  50%     { opacity:.7; box-shadow: 0 0 0 4px transparent; }
}
.pulse-dot { animation: pulseDot 2s infinite; }

/* ── Chart.js canvas ── */
canvas { max-width: 100%; }

/* ── Tooltip ── */
.kaal-tooltip {
  position: fixed; z-index: 9999;
  padding: 6px 10px; border-radius: 8px;
  background: #1e293b; border: 1px solid #334155;
  color: #e2e8f0; font-size: 11px; pointer-events: none;
  white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.5);
}