/* ---------------------------------------------------------------------- *
 * Navbar tier badge + project counter + AI usage gas-tank bar.
 *
 * See docs-vault/workflows/subscription_tiers_and_usage.md §Navbar for the
 * spec. Three pieces, left to right: tier badge → project counter →
 * gas-tank bar. Tier-specific colors match the marketing pricing chart.
 * ---------------------------------------------------------------------- */

/* ---------- Tier badge ---------- */
.nav-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.85em;
    padding: 0.3rem 0.7rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
    white-space: nowrap;
}
.nav-tier-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff !important;
}
.nav-tier-badge.tier-kezdo   { border-color: #5B9BD5; background-color: rgba(91, 155, 213, 0.18); }
.nav-tier-badge.tier-alap    { border-color: #9B7BD8; background-color: rgba(155, 123, 216, 0.18); }
.nav-tier-badge.tier-premium { border-color: #F5A623; background-color: rgba(245, 166, 35, 0.20); }
.nav-tier-badge.tier-none    { border-color: rgba(255, 255, 255, 0.4); opacity: 0.85; }

/* ---------- Project counter ---------- */
.nav-project-counter {
    color: #fff !important;
    font-size: 0.85em;
    font-weight: 500;
    padding: 0.3rem 0.7rem !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
    white-space: nowrap;
}
.nav-project-counter:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff !important;
}
.nav-project-counter i {
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- AI usage gas-tank bar ----------
 *
 * Single horizontal bar with the absolute remaining count rendered
 * inside it ("312 / 500 AI tétel"). The fill width encodes the
 * percentage implicitly so the user gets both numbers and a quick
 * visual at a glance. Color thresholds (per spec U2):
 *   100% → 25%: white
 *    25% →  5%: yellow
 *     5% →  0%: red
 */
.nav-ai-usage-bar {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    text-decoration: none;
    transition: opacity 0.15s ease;
    padding: 0 !important;
}
.nav-ai-usage-bar:hover {
    opacity: 0.92;
    color: #fff !important;
}
.usage-bar-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 28px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    overflow: hidden;
    /* New stacking context so mix-blend-mode on the label only blends
       against the fill + shell bg, not the entire navbar. */
    isolation: isolate;
}
.usage-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: #ffffff;
    border-radius: 5px 0 0 5px;
    transition: width 0.4s ease, background-color 0.4s ease;
    z-index: 0;
}
.usage-bar-inline-label {
    position: relative;
    z-index: 1;
    /* Match the surrounding nav-link text — same weight + close size, no
       heavy shadow, so the bar reads as a navbar element rather than a
       loud callout. mix-blend-mode flips the white text to dark over the
       white fill and keeps it white over the empty (dark) area, so the
       count stays readable across the fill boundary without needing a
       chunky outline. */
    font-size: 0.85em;
    font-weight: 400;
    color: #ffffff;
    mix-blend-mode: difference;
    white-space: nowrap;
    padding: 0 0.6rem;
}

/* Threshold-driven fill colors. Per spec U2:
 *   100% → 25%: white  (full — bar is fully filled when at cap)
 *    25% →  5%: yellow
 *     5% →  0%: red
 * Fill anchors on the LEFT (inset: 0 auto 0 0) so as remaining drops the
 * right edge moves toward the left, hitting width:0 at 0 lines left. */
.nav-ai-usage-bar.usage-state-full .usage-bar-fill {
    background: #ffffff;
}
.nav-ai-usage-bar.usage-state-medium .usage-bar-fill {
    background: #f0c34a;
}
.nav-ai-usage-bar.usage-state-low .usage-bar-fill {
    background: #e74c3c;
}
.nav-ai-usage-bar.usage-state-empty .usage-bar-fill {
    background: transparent;
}
.nav-ai-usage-bar.usage-state-empty .usage-bar-shell {
    background: rgba(231, 76, 60, 0.30);
    border-color: rgba(231, 76, 60, 0.6);
}

/* Compact at narrower viewports — shrink the shell. */
@media (max-width: 1280px) {
    .usage-bar-shell {
        width: 180px;
    }
}
@media (max-width: 1024px) {
    .usage-bar-shell {
        width: 140px;
    }
    .usage-bar-inline-label {
        font-size: 0.72em;
        padding: 0 0.4rem;
    }
}