/* ══════════════════════════════════════════════════════════
   Trail Difficulty Overrides
   Fixes: proper ski colors (green ●, blue ■, black ◆),
   badge styling with background accents, and per-difficulty
   row tints for visual scanning.
   Load AFTER style.css and resort-v2.css
   ══════════════════════════════════════════════════════════ */

/* ── Difficulty color tokens ──────────────────────────── */
:root {
    --diff-green: #4ade80;
    --diff-blue: #60a5fa;
    --diff-black: #0f172a;
    --diff-black-bg: rgba(226, 232, 240, 0.22);
    --diff-black-border: rgba(226, 232, 240, 0.12);
    --diff-black-tint: rgba(200, 210, 230, 0.03);
    --diff-black-tint-hover: rgba(200, 210, 230, 0.06);
    --diff-black-accent: rgba(226, 232, 240, 0.25);
    --diff-black-label: #cbd5e1;
}

/* ══════════════════════════════════════════════════════════
   TRAIL-ROW (resort.js view — .trail-* classes)
   ══════════════════════════════════════════════════════════ */

/* ── Difficulty badge ──────────────────────────────────── */
.trail-diff-badge {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.trail-diff-badge.green {
    color: var(--diff-green);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.15);
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.1);
}

.trail-diff-badge.blue {
    color: var(--diff-blue);
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.15);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.1);
}

.trail-diff-badge.black {
    color: var(--diff-black);
    background: var(--diff-black-bg);
    border: 1px solid var(--diff-black-border);
    box-shadow: 0 2px 8px rgba(226, 232, 240, 0.06);
}

.trail-diff-badge.double-black {
    color: var(--diff-black);
    background: var(--diff-black-bg);
    border: 1px solid var(--diff-black-border);
    box-shadow: 0 2px 8px rgba(226, 232, 240, 0.08);
    font-size: 0.85rem;
    letter-spacing: -1px;
}

/* Badge hover lift */
.trail-row:hover .trail-diff-badge {
    transform: scale(1.05);
}

/* ── Row difficulty tints ──────────────────────────────── */
.trail-row[data-difficulty="green"] {
    background: rgba(74, 222, 128, 0.025);
    border-left: 3px solid rgba(74, 222, 128, 0.4);
}
.trail-row[data-difficulty="green"]:hover {
    background: rgba(74, 222, 128, 0.06);
}

.trail-row[data-difficulty="blue"] {
    background: rgba(96, 165, 250, 0.025);
    border-left: 3px solid rgba(96, 165, 250, 0.4);
}
.trail-row[data-difficulty="blue"]:hover {
    background: rgba(96, 165, 250, 0.06);
}

.trail-row[data-difficulty="black"] {
    background: var(--diff-black-tint);
    border-left: 3px solid var(--diff-black-accent);
}
.trail-row[data-difficulty="black"]:hover {
    background: var(--diff-black-tint-hover);
}

.trail-row[data-difficulty="double-black"] {
    background: rgba(200, 210, 230, 0.04);
    border-left: 3px solid rgba(226, 232, 240, 0.35);
}
.trail-row[data-difficulty="double-black"]:hover {
    background: rgba(200, 210, 230, 0.07);
}

/* ── Run card badges (card grid view) ──────────────────── */
.run-difficulty.black {
    background: var(--diff-black-bg);
    color: var(--diff-black);
}
.run-difficulty.double-black {
    background: var(--diff-black-bg);
    color: var(--diff-black);
}

/* ── Run detail page badge ─────────────────────────────── */
.run-diff-badge.black {
    background: var(--diff-black-bg);
    color: var(--diff-black-label);
}
.run-diff-badge.double-black {
    background: var(--diff-black-bg);
    color: var(--diff-black-label);
}

/* ── Sidebar difficulty bars ───────────────────────────── */
.diff-bar-fill.black {
    background: var(--diff-black-label);
}
.diff-bar-fill.double-black {
    background: var(--diff-black-label);
}

/* ── Sidebar breakdown + top rated ─────────────────────── */
.diff-breakdown-sym.green,
.top-run-diff.green {
    color: var(--diff-green);
}
.diff-breakdown-sym.blue,
.top-run-diff.blue {
    color: var(--diff-blue);
}
.diff-breakdown-sym.black,
.diff-breakdown-sym.double-black,
.top-run-diff.black,
.top-run-diff.double-black {
    color: var(--diff-black-label);
}

/* ── Filter buttons / chips ────────────────────────────── */
.filter-btn[data-filter="black"],
.filter-chip.filter-black .fc-icon {
    color: var(--diff-black-label);
}
.filter-btn[data-filter="double-black"],
.filter-chip.filter-dblack .fc-icon {
    color: var(--diff-black-label);
}

/* ── Trending cards ────────────────────────────────────── */
.trending-diff.black {
    background: var(--diff-black-bg);
    color: var(--diff-black);
}
.trending-diff.double-black {
    background: var(--diff-black-bg);
    color: var(--diff-black);
}

/* ══════════════════════════════════════════════════════════
   RESORT-V2 (resort-v2.css — .rp-* classes)
   ══════════════════════════════════════════════════════════ */

/* ── Difficulty symbols ────────────────────────────────── */
.rp-diff-sym.black {
    color: var(--diff-black-label);
}
.rp-diff-sym.double-black {
    color: var(--diff-black-label);
    font-size: 0.85rem;
}

/* ── V2 row tints ──────────────────────────────────────── */
.rp-trail-row[data-difficulty="green"] {
    background: rgba(74, 222, 128, 0.025);
    border-left: 3px solid rgba(74, 222, 128, 0.4);
}
.rp-trail-row[data-difficulty="green"]:hover {
    background: rgba(74, 222, 128, 0.06);
}

.rp-trail-row[data-difficulty="blue"] {
    background: rgba(96, 165, 250, 0.025);
    border-left: 3px solid rgba(96, 165, 250, 0.4);
}
.rp-trail-row[data-difficulty="blue"]:hover {
    background: rgba(96, 165, 250, 0.06);
}

.rp-trail-row[data-difficulty="black"] {
    background: var(--diff-black-tint);
    border-left: 3px solid var(--diff-black-accent);
}
.rp-trail-row[data-difficulty="black"]:hover {
    background: var(--diff-black-tint-hover);
}

.rp-trail-row[data-difficulty="double-black"] {
    background: rgba(200, 210, 230, 0.04);
    border-left: 3px solid rgba(226, 232, 240, 0.35);
}
.rp-trail-row[data-difficulty="double-black"]:hover {
    background: rgba(200, 210, 230, 0.07);
}

/* ── V2 filter chips ───────────────────────────────────── */
.rp-filter-black .rp-fsym,
.rp-filter-double-black .rp-fsym {
    color: var(--diff-black-label);
}

/* ── V2 diff breakdown bars ────────────────────────────── */
.rp-diff-bar.black,
.rp-diff-bar.double-black {
    background: var(--diff-black-label);
}