/* =========================================================================
   DESIGN SYSTEM OVERLAY
   Applies the Trading Hive Design System's signature brand layers to the
   production dashboard without restructuring tab markup. Loaded after
   dashboard's own styles so these take precedence.
   ========================================================================= */

/* --------- Honeycomb ambient background ---------------------------------
   Fixed-position SVG pattern with soft amber stroke, masked to top fade.
   Sits behind all content but above plain bg color.
   ------------------------------------------------------------------------ */
.honeycomb-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='70' viewBox='0 0 80 70'><path d='M20 0 L60 0 L80 35 L60 70 L20 70 L0 35 Z' fill='none' stroke='rgba(245,158,11,0.04)' stroke-width='1'/></svg>");
    background-size: 80px 70px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
    opacity: 0.7;
}

/* --------- Brand pulse + brand-shift gradient text ----------------------
   Replaces the static logo + plain span with kit's signature motion.
   Targets the existing .navbar .brand markup so no HTML change needed.
   ------------------------------------------------------------------------ */
.navbar .brand img,
.navbar .brand .logo-img {
    animation: ds-brand-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4));
    transition: filter 0.3s ease;
}
.navbar .brand:hover img,
.navbar .brand:hover .logo-img {
    filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.55));
}

@keyframes ds-brand-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.55));
    }
}

.navbar .brand span {
    background: linear-gradient(
        135deg,
        var(--primary-light, #fbbf24),
        var(--primary, #f59e0b),
        var(--secondary, #f97316),
        var(--primary-light, #fbbf24)
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ds-brand-shift 5s ease infinite;
    font-weight: 700;
}

@keyframes ds-brand-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --------- Live-dot — kit's signature "real-time" indicator -------------
   For any element that wants the breathing amber dot. Add class="ds-live-dot"
   to a span and it ping-pulses indefinitely. Use for "live" labels in
   News tab, "scanning" indicators on Find Trades, etc.
   ------------------------------------------------------------------------ */
.ds-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary, #f59e0b);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: ds-live-ping 2s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes ds-live-ping {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* --------- Reveal-on-mount stagger --------------------------------------
   Apply class="ds-stagger" to a parent; its direct children fade-up
   sequentially. Combine with [data-stagger-i="0..N"] on each child if you
   need explicit ordering, otherwise nth-child sets the delay automatically.
   ------------------------------------------------------------------------ */
.ds-stagger > * {
    opacity: 0;
    transform: translateY(8px);
    animation: ds-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ds-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.ds-stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.ds-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.ds-stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.ds-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.ds-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.ds-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.ds-stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.ds-stagger > *:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes ds-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------- Glow-trailed P&L numbers -------------------------------------
   Add class="ds-pnl-glow" with .pos or .neg to a P&L number to get
   subtle color-matched text-shadow. Pairs naturally with existing
   .pos / .neg color rules already used by Journal/Performance.
   ------------------------------------------------------------------------ */
.ds-pnl-glow {
    text-shadow: 0 0 12px currentColor;
    font-variant-numeric: tabular-nums;
    transition: text-shadow 0.3s ease;
}
.ds-pnl-glow:hover { text-shadow: 0 0 20px currentColor; }

/* --------- Glass-card surface (alternative to existing .panel) ---------
   Use class="ds-glass" to opt in to the design-system glass card with
   amber tint and backdrop-filter blur. Existing .panel stays as-is.
   ------------------------------------------------------------------------ */
.ds-glass {
    background: rgba(15, 15, 26, 0.65);
    border: 1px solid rgba(245, 158, 11, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(245, 158, 11, 0.05);
    transition: border-color 0.2s, transform 0.2s;
}
.ds-glass:hover {
    border-color: rgba(245, 158, 11, 0.25);
    transform: translateY(-1px);
}

/* =========================================================================
   NEWS TAB — kit-style layout (NewsTab.jsx port)
   News feed (left, glass) + Calendar + Sentiment (right, stacked glass).
   ========================================================================= */
.kit-news-pane { padding: 20px 0; }
.kit-news-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}
@media (max-width: 880px) {
    .kit-news-grid { grid-template-columns: 1fr; }
}

.kit-news-pane .glass-card {
    background: rgba(15, 15, 26, 0.65);
    border: 1px solid rgba(245, 158, 11, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(245, 158, 11, 0.05);
}
.kit-news-pane .glass-card + .glass-card { margin-top: 16px; }
.kit-news-pane .news-right { display: flex; flex-direction: column; gap: 16px; }

.kit-news-pane .gc-header {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.10);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kit-news-pane .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-light, #fbbf24);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.kit-news-pane .news-filters { margin-left: auto; display: flex; gap: 6px; }
.kit-news-pane .news-filters button {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted, #a1a1aa);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.kit-news-pane .news-filters button:hover { color: #e5e7eb; background: rgba(255,255,255,0.06); }
.kit-news-pane .news-filters button.on {
    background: rgba(245, 158, 11, 0.18);
    color: var(--primary-light, #fbbf24);
    border-color: rgba(245, 158, 11, 0.35);
}

.kit-news-pane .news-item {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.08);
    cursor: pointer;
    transition: background 0.2s ease;
}
.kit-news-pane .news-item:last-child { border-bottom: none; }
.kit-news-pane .news-item:hover { background: rgba(245, 158, 11, 0.04); }
.kit-news-pane .news-item .head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.kit-news-pane .news-time {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light, #fbbf24);
    font-size: 12px;
    font-weight: 600;
}
.kit-news-pane .news-tag {
    font-size: 11px;
    color: var(--text-muted, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.kit-news-pane .news-symbols { margin-left: auto; display: flex; gap: 6px; }
.kit-news-pane .news-symbols span {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted, #a1a1aa);
    font-size: 11px;
}
.kit-news-pane .news-item .title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light, #fef3c7);
    line-height: 1.4;
}
.kit-news-pane .news-item .sub {
    font-size: 12px;
    color: var(--text-muted, #a1a1aa);
    margin-top: 4px;
    line-height: 1.55;
}

.kit-news-pane .impact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.kit-news-pane .impact-chip.high { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.35); }
.kit-news-pane .impact-chip.med  { background: rgba(251, 191, 36, 0.15); color: #fde047; border: 1px solid rgba(251, 191, 36, 0.35); }
.kit-news-pane .impact-chip.low  { background: rgba(148, 163, 184, 0.10); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.25); }

.kit-news-pane .ai-take {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.55;
}
.kit-news-pane .ai-take .hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-light, #fbbf24);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.kit-news-pane .cal-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.06);
}
.kit-news-pane .cal-item:last-child { border-bottom: none; }
.kit-news-pane .cal-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--primary-light, #fbbf24);
    font-weight: 600;
    width: 56px;
    flex-shrink: 0;
}
.kit-news-pane .cal-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, #fff, #ddd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #08080f;
    flex-shrink: 0;
}
.kit-news-pane .cal-event { font-size: 13px; color: var(--text-light, #fef3c7); flex: 1; line-height: 1.3; }
.kit-news-pane .cal-impact-dots { display: flex; gap: 2px; flex-shrink: 0; }
.kit-news-pane .cal-impact-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.kit-news-pane .cal-impact-dots span.high { background: #ef4444; }
.kit-news-pane .cal-impact-dots span.med  { background: #fbbf24; }
.kit-news-pane .cal-impact-dots span.low  { background: #94a3b8; }

.kit-news-pane .sentiment-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.kit-news-pane .sentiment-row:last-child { border-bottom: none; }
.kit-news-pane .sentiment-label { font-size: 12px; color: var(--text-muted, #a1a1aa); }
.kit-news-pane .sentiment-value { font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.kit-news-pane .sentiment-value.up   { color: #22c55e; text-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
.kit-news-pane .sentiment-value.down { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
.kit-news-pane .sentiment-value.neutral { color: #a1a1aa; }

.kit-news-pane .news-loading {
    padding: 30px 18px;
    text-align: center;
    color: var(--text-muted, #a1a1aa);
    font-size: 13px;
}
.kit-news-pane .news-error {
    padding: 18px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 13px;
    margin: 12px 18px;
}

.kit-news-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
    font-size: 11px;
    color: var(--text-muted, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kit-news-divider::before,
.kit-news-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(245, 158, 11, 0.10);
}

/* --------- Respect reduced motion preference ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    .navbar .brand img,
    .navbar .brand .logo-img,
    .navbar .brand span,
    .ds-live-dot,
    .ds-stagger > * {
        animation: none !important;
        transition: none !important;
    }
    .ds-stagger > * {
        opacity: 1;
        transform: none;
    }
}