/* Book Trend Tracker — Custom styles on top of Tailwind */

/* Smooth transitions */
* { transition: background-color 0.15s ease, border-color 0.15s ease; }

/* Score bar gradient */
.score-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f59e0b, #22c55e);
}

/* Source dots */
.source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.15;
    cursor: help;
}
.source-dot.active {
    opacity: 1;
}

/* Heat gradient on table rows */
.book-row { border-left: 3px solid transparent; }
.book-row.heat-1 { border-left-color: #ef4444; background: rgba(239,68,68,0.04); }
.book-row.heat-2 { border-left-color: #f97316; background: rgba(249,115,22,0.03); }
.book-row.heat-3 { border-left-color: #eab308; background: rgba(234,179,8,0.02); }
.book-row.heat-4 { border-left-color: #22c55e; background: rgba(34,197,94,0.015); }
.book-row.heat-5 { border-left-color: rgba(255,255,255,0.1); }

/* Momentum colors */
.momentum-up { color: #22c55e; }
.momentum-down { color: #ef4444; }
.momentum-new { color: #a78bfa; }
.momentum-flat { color: #6b7280; }

/* Expand animation */
.detail-panel {
    display: none;
}
.detail-panel.open {
    display: block;
    padding: 16px 0;
}
/* Fixed height for trend chart container */
.trend-chart-container {
    height: 140px;
    position: relative;
}

/* Spotlight cards */
.spotlight-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.15s, border-color 0.15s;
}
.spotlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.15);
}

/* Recommendation cards */
.rec-card {
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
}
.rec-card:hover { border-color: rgba(99,102,241,0.3); }

/* Sparkline canvas */
.sparkline { width: 80px; height: 28px; }

/* Tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }