/* =========================================================
   Zorbi Custom CSS — residual styles that Tailwind can't handle
   ========================================================= */

/* Background grid overlay */
.bg-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    animation: grid-drift 22s linear infinite alternate;
}
html:not(.dark) .bg-grid {
    background-image:
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}
.bg-grid::before,
.bg-grid::after {
    content: "";
    position: absolute;
    inset: -18%;
}
.bg-grid::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.22), transparent 16%),
        radial-gradient(circle at 50% 42%, rgba(139, 92, 246, 0.18), transparent 28%),
        radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.12), transparent 40%);
    filter: blur(26px);
    opacity: 0.52;
    animation: grid-pulse 14s ease-in-out infinite;
}
.bg-grid::after {
    inset: -12%;
    background:
        radial-gradient(circle at 50% 42%, transparent 0 16%, rgba(99, 102, 241, 0.1) 20%, transparent 26%),
        radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(139, 92, 246, 0.09) 34%, transparent 40%),
        radial-gradient(circle at 50% 42%, transparent 0 42%, rgba(59, 130, 246, 0.06) 48%, transparent 54%);
    filter: blur(3px);
    opacity: 0.42;
    transform: scale(0.96);
    animation: grid-ripple 12s ease-out infinite;
}
html:not(.dark) .bg-grid::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.11), transparent 16%),
        radial-gradient(circle at 50% 42%, rgba(139, 92, 246, 0.09), transparent 28%),
        radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.06), transparent 40%);
    opacity: 0.62;
}
html:not(.dark) .bg-grid::after {
    background:
        radial-gradient(circle at 50% 42%, transparent 0 16%, rgba(99, 102, 241, 0.05) 20%, transparent 26%),
        radial-gradient(circle at 50% 42%, transparent 0 28%, rgba(139, 92, 246, 0.045) 34%, transparent 40%),
        radial-gradient(circle at 50% 42%, transparent 0 42%, rgba(59, 130, 246, 0.03) 48%, transparent 54%);
    opacity: 0.48;
}

@keyframes grid-drift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 18px 12px, -18px -12px; }
}

@keyframes grid-pulse {
    0% { transform: scale(0.98) translate3d(0, 0, 0); opacity: 0.3; }
    40% { transform: scale(1.04) translate3d(0, -1%, 0); opacity: 0.62; }
    70% { transform: scale(1.08) translate3d(0, 1%, 0); opacity: 0.44; }
    100% { transform: scale(1.12) translate3d(0, 0, 0); opacity: 0.26; }
}

@keyframes grid-ripple {
    0% { transform: scale(0.9); opacity: 0; }
    18% { opacity: 0.2; }
    45% { opacity: 0.4; }
    100% { transform: scale(1.22); opacity: 0; }
}

@media (max-width: 768px) {
    .bg-grid {
        animation-duration: 26s;
    }
    .bg-grid::before {
        filter: blur(18px);
        opacity: 0.34;
    }
    .bg-grid::after {
        opacity: 0.28;
        animation-duration: 14s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-grid,
    .bg-grid::before,
    .bg-grid::after {
        animation: none !important;
    }
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #818cf8, #8b5cf6, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Pulse animations ─────────────────────────────────── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
@keyframes pulse-status {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.2); }
}
@keyframes pulse-risk {
    0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 12px 3px rgba(239, 68, 68, 0.3); }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
.animate-pulse-status { animation: pulse-status 2s ease-in-out infinite; }

/* ── KPI accent bar (uses --industry-color + status overrides) ── */
.kpi-accent-bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--industry-color, #6366f1);
    opacity: 0.7;
}
.kpi-status-on_target .kpi-accent-bar { background: #10b981; opacity: 1; }
.kpi-status-warning .kpi-accent-bar { background: #f59e0b; opacity: 1; }
.kpi-status-critical .kpi-accent-bar {
    background: #ef4444; opacity: 1;
    animation: pulse-status 2s ease-in-out infinite;
}

/* ── KPI temporal category badges ────────────────────── */
.kpi-cat-historical { color: #93c5fd; background: rgba(59, 130, 246, 0.15); }
.kpi-cat-rolling    { color: #a78bfa; background: rgba(139, 92, 246, 0.15); }
.kpi-cat-forward    { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }

/* ── SVG sparkline classes ───────────────────────────── */
.spark-line {
    stroke: var(--industry-color, #60a5fa);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
}
.spark-dot { fill: var(--industry-color, #60a5fa); }
.spark-band { fill: rgba(34, 197, 94, 0.1); }
.spark-target-line { stroke: rgba(34, 197, 94, 0.45); stroke-width: 1; stroke-dasharray: 3 2; }
.spark-area { fill: rgba(239, 68, 68, 0.12); }
.spark-bar { fill: var(--industry-color, #60a5fa); opacity: 0.55; }

/* Status-aware sparkline tinting */
.kpi-status-critical .spark-line { stroke: #ef4444; }
.kpi-status-critical .spark-dot  { fill: #ef4444; }
.kpi-status-critical .spark-bar  { fill: #ef4444; }
.kpi-status-warning .spark-line  { stroke: #f59e0b; }
.kpi-status-warning .spark-dot   { fill: #f59e0b; }
.kpi-status-warning .spark-bar   { fill: #f59e0b; }
.kpi-status-on_target .spark-line { stroke: #22c55e; }
.kpi-status-on_target .spark-dot  { fill: #22c55e; }
.kpi-status-on_target .spark-bar  { fill: #22c55e; }

/* ── Industry card hover accent (uses --card-color) ───── */
.industry-card-accent {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-color);
    opacity: 0;
    transition: opacity 0.3s;
}
.group:hover .industry-card-accent { opacity: 1; }

/* ── Filter pill active state (uses --industry-color) ── */
.filter-pill-active {
    color: #fff !important;
    background: var(--industry-color, #6366f1) !important;
    border-color: var(--industry-color, #6366f1) !important;
}

/* ── Risk dot glow colours ───────────────────────────── */
.risk-dot-green {
    background: #10b981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}
.risk-dot-amber {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}
.risk-dot-red {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
    animation: pulse-risk 2s ease-in-out infinite;
}

/* ── Feed item dot (uses --industry-color) ───────────── */
.feed-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--industry-color, #6366f1);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

/* ── Scrollbar styling ───────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #3f3f46; }
.custom-scrollbar-x::-webkit-scrollbar { height: 6px; }
.custom-scrollbar-x::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dark .custom-scrollbar-x::-webkit-scrollbar-thumb { background: #3f3f46; }

/* ── Range slider thumb ──────────────────────────────── */
.time-slider {
    -webkit-appearance: none; appearance: none;
    outline: none; cursor: pointer;
}
.time-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--industry-color, #6366f1);
    border: 2px solid #18181b;
    cursor: pointer;
    transition: transform 0.15s;
}
.dark .time-slider::-webkit-slider-thumb { border-color: #18181b; }
html:not(.dark) .time-slider::-webkit-slider-thumb { border-color: #e5e7eb; }
.time-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.time-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--industry-color, #6366f1);
    border: 2px solid #18181b;
    cursor: pointer;
}

/* ── Multi-select checkbox accent ────────────────────── */
.multi-cb { accent-color: var(--industry-color, #6366f1); }

/* ── KPI Sparkline SVG ──────────────────────────────── */
.kpi-sparkline {
    width: 100%;
    height: auto;
    max-height: 40px;
    margin-top: 4px;
    display: block;
}
@media (min-width: 640px) {
    .kpi-sparkline { max-height: 56px; margin-top: 6px; }
}

/* ── Filter select dropdown arrow ────────────────────── */
.filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    -webkit-appearance: none;
    appearance: none;
}