/* Shared by the dashboard (index.html) and the History page.
   - growth = light green glow, drop = red glow
   - "days done per task" block */

:root {
    --up: #7dffa0;
    --up-glow: rgba(90, 255, 140, .85);
    --down: #ff2d3a;
    --down-glow: rgba(255, 45, 58, .9);
}

/* glowing text (used by the comparison widget + diff table) */
.glow-up   { color: var(--up)   !important; text-shadow: 0 0 6px var(--up-glow),   0 0 16px var(--up-glow);   animation: glowUp   1.8s ease-in-out infinite alternate; }
.glow-down { color: var(--down) !important; text-shadow: 0 0 6px var(--down-glow), 0 0 16px var(--down-glow); animation: glowDown 1.8s ease-in-out infinite alternate; }
.glow-flat { color: #cfcfcf; }

@keyframes glowUp {
    from { text-shadow: 0 0 4px var(--up-glow),   0 0 10px var(--up-glow); }
    to   { text-shadow: 0 0 8px var(--up-glow),   0 0 24px var(--up-glow), 0 0 34px rgba(90, 255, 140, .45); }
}
@keyframes glowDown {
    from { text-shadow: 0 0 4px var(--down-glow), 0 0 10px var(--down-glow); }
    to   { text-shadow: 0 0 8px var(--down-glow), 0 0 24px var(--down-glow), 0 0 34px rgba(255, 45, 58, .5); }
}

/* legend under the trend chart */
.trend-legend { display: flex; gap: 18px; justify-content: center; margin: 4px auto 12px; font-size: 13px; color: #ddd; }
.trend-legend .glow-up, .trend-legend .glow-down { font-weight: 700; }

/* ---- Days done per task ---- */
.task-days { margin: 6px 0 18px; }
.task-days-title { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.task-days-title i { color: var(--up); filter: drop-shadow(0 0 5px var(--up-glow)); }

.td-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.td-row { background: #141414; border: 1px solid var(--t-border); border-radius: 10px; padding: 10px 12px; transition: border-color .2s, box-shadow .2s; }
.td-row:hover { border-color: rgba(90, 255, 140, .55); box-shadow: 0 0 14px rgba(90, 255, 140, .18); }
.td-row.td-none { opacity: .6; }
.td-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #eee; }
.td-name { font-weight: 600; }
.td-days { color: #bbb; white-space: nowrap; }
.td-days strong { color: var(--up); font-size: 18px; text-shadow: 0 0 8px var(--up-glow); }
.td-none .td-days strong { color: #888; text-shadow: none; }
.td-bar { height: 6px; background: var(--t-track); border-radius: 6px; margin: 8px 0 6px; overflow: hidden; }
.td-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2ecc71, var(--up)); box-shadow: 0 0 8px var(--up-glow); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.td-meta { font-size: 11.5px; color: #999; }
.td-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.td-chip { font-size: 11.5px; color: #ddd; background: #0a0a0a; border: 1px solid var(--t-input); border-radius: 12px; padding: 2px 9px; }
.td-chip b { color: var(--up); font-weight: 700; }
.td-empty { color: #aaa; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .glow-up, .glow-down { animation: none; }
}