/* =====================================================
   Kilometre Raporu — km-report.css
   ===================================================== */

/* ── HERO STAGE ──────────────────────────────────── */
.km-hero-stage {
    position: relative;
    min-height: 560px;
    border-radius: 30px;
    background: linear-gradient(145deg, #0a1628 0%, #0f2339 50%, #0d2b1a 100%);
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(12, 34, 56, 0.20);
}

.km-stage-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(52px);
    animation: kmPulseGlow 7s ease-in-out infinite;
}

.km-glow-a {
    width: 220px; height: 220px;
    top: 10px; right: 20px;
    background: rgba(13, 110, 253, 0.22);
}

.km-glow-b {
    width: 160px; height: 160px;
    bottom: 30px; left: 40px;
    background: rgba(16, 185, 129, 0.18);
    animation-delay: -3.2s;
}

/* ── DASH WINDOW ─────────────────────────────────── */
.km-dash-window {
    position: absolute;
    top: 22px; left: 22px; right: 22px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    padding: 18px 20px;
    z-index: 2;
    animation: kmFloatSoft 6s ease-in-out infinite;
}

.km-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.km-dash-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 2px;
}

.km-dash-header > div > strong { color: #fff; font-size: .95rem; font-weight: 700; }

.km-dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.18);
    border: 1px solid rgba(16,185,129,0.25);
    color: #6ee7b7;
    font-size: .76rem;
    font-weight: 700;
}

/* ── ODOMETER ────────────────────────────────────── */
.km-odometer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

.km-odo-digit {
    width: 36px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    transition: transform .3s ease;
}

.km-odo-digit.km-odo-counted {
    color: #6ee7b7;
    background: rgba(16,185,129,0.15);
    border-color: rgba(16,185,129,0.25);
    transform: scale(1.06);
}

.km-odo-sep {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.40);
    margin: 0 2px;
}

.km-odo-unit {
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    margin-left: 6px;
    align-self: flex-end;
    padding-bottom: 8px;
}

.km-odo-label {
    text-align: center;
    font-size: .74rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 14px;
}

/* ── MINI DISTRIBUTION BARS ──────────────────────── */
.km-dist-mini {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 70px;
    margin-bottom: 14px;
}

.km-dm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 48px;
}

.km-dm-bar {
    width: 36px;
    height: var(--h);
    max-height: 55px;
    min-height: 5px;
    border-radius: 6px 6px 3px 3px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    animation: kmBarUp .9s ease both;
}

.km-dm-bar span { font-size: .6rem; font-weight: 700; color: rgba(255,255,255,0.80); }

.km-dmb-blue  { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
.km-dmb-cyan  { background: linear-gradient(180deg, #06b6d4, #67e8f9); }
.km-dmb-teal  { background: linear-gradient(180deg, #10b981, #6ee7b7); }
.km-dmb-amber { background: linear-gradient(180deg, #f59e0b, #fcd34d); }
.km-dmb-red   { background: linear-gradient(180deg, #ef4444, #f87171); }

.km-dm-item small { font-size: .6rem; color: rgba(255,255,255,0.40); white-space: nowrap; }

/* ── LIVE LIST ───────────────────────────────────── */
.km-live-list { display: flex; flex-direction: column; gap: 5px; }

.km-live-row {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
}

.km-lr-top  { background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.22); }
.km-lr-high { background: rgba(13,110,253,0.12); border: 1px solid rgba(13,110,253,0.18); }

.km-lr-plate { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 700; color: #fff; }

.km-lr-bar-wrap { overflow: hidden; height: 5px; background: rgba(255,255,255,0.10); border-radius: 999px; }
.km-lr-bar {
    height: 100%; width: var(--w);
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 999px;
    animation: kmBarGrow .9s ease both;
}

.km-lr-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem; font-weight: 800; color: #6ee7b7; text-align: right; }

/* ── FLOATING CARDS ──────────────────────────────── */
.km-float-card {
    position: absolute;
    width: 185px;
    padding: 12px 15px;
    border-radius: 16px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.11);
    backdrop-filter: blur(10px);
    color: #fff;
    z-index: 10;
}

.km-float-card span  { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.50); margin-bottom: 3px; }
.km-float-card strong { display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 2px; }
.km-float-card p     { margin: 0; font-size: .74rem; color: rgba(255,255,255,0.60); }

.km-float-a { bottom: 18px; left: 18px; animation: kmFloatCardA 7s ease-in-out infinite; }
.km-float-b { bottom: 18px; right: 18px; animation: kmFloatCardB 6.5s ease-in-out infinite; }

/* ── SHARED CARD ─────────────────────────────────── */
.km-card {
    background: #fff;
    border: 1px solid rgba(13,34,56,0.08);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 32px rgba(12,34,56,0.05);
}

.km-card-warn {
    background: linear-gradient(180deg, #fff 0%, #fffdf5 100%);
    border-color: rgba(245,158,11,0.14);
}

/* ── OVERVIEW SECTION ────────────────────────────── */
.km-overview-section { padding-top: 20px; padding-bottom: 20px; }

/* ── STATUS DONUT ────────────────────────────────── */
.km-status-donut-wrap { display: flex; justify-content: center; padding: 14px 0 10px; }
.km-status-ring { position: relative; width: 150px; height: 150px; }
.km-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.km-donut-arc { stroke-dasharray: 0 339; animation: kmArcDraw 1.2s .3s ease forwards; }
.km-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.km-donut-center strong { font-size: 1.7rem; font-weight: 800; color: #0d6efd; line-height: 1; }
.km-donut-center span   { font-size: .74rem; color: #6a7a88; margin-top: 3px; }

.km-status-legend { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; margin-bottom: 12px; }
.km-sl-row { display: flex; align-items: center; gap: 10px; background: #f8fbfe; border-radius: 12px; padding: 9px 12px; }
.km-sl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.km-sl-row strong { display: block; font-size: .88rem; font-weight: 700; color: #0d2238; }
.km-sl-row small  { display: block; font-size: .74rem; color: #6a7a88; }

.km-canbus-note { display: flex; gap: 8px; align-items: flex-start; background: rgba(13,110,253,0.04); border: 1px solid rgba(13,110,253,0.10); border-radius: 12px; padding: 10px 13px; font-size: .8rem; color: #29455d; line-height: 1.65; }
.km-canbus-note i { color: #0d6efd; flex-shrink: 0; margin-top: 1px; }
.km-canbus-note p { margin: 0; }

/* ── RANGE BARS ──────────────────────────────────── */
.km-range-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.km-rb-row { display: flex; flex-direction: column; gap: 5px; }
.km-rb-label { display: flex; align-items: center; gap: 8px; }

.km-rb-badge { font-size: .72rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; }
.km-rbb-cyan  { background: rgba(6,182,212,0.12);  color: #0891b2; }
.km-rbb-blue  { background: rgba(59,130,246,0.12);  color: #2563eb; }
.km-rbb-gray  { background: rgba(107,114,128,0.10); color: #4b5563; }
.km-rbb-amber { background: rgba(245,158,11,0.12);  color: #d97706; }
.km-rbb-red   { background: rgba(239,68,68,0.10);   color: #dc2626; }

.km-rb-track { height: 10px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.km-rb-fill { height: 100%; border-radius: 999px; width: var(--w); animation: kmBarGrow .9s ease both; }
.km-rbf-cyan  { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.km-rbf-blue  { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.km-rbf-gray  { background: linear-gradient(90deg, #6b7280, #9ca3af); }
.km-rbf-amber { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.km-rbf-red   { background: linear-gradient(90deg, #ef4444, #f87171); }

.km-rb-count { font-size: .76rem; color: #6a7a88; align-self: flex-end; }

.km-avg-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.km-avg-item {
    background: #f8fbfe;
    border-radius: 12px;
    padding: 10px 10px;
    text-align: center;
}

.km-avg-item strong { display: block; font-size: .88rem; font-weight: 700; color: #0d2238; }
.km-avg-item small  { display: block; font-size: .68rem; color: #6a7a88; margin-top: 2px; }

/* ── CITY LIST ───────────────────────────────────── */
.km-city-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.km-city-row {
    display: grid;
    grid-template-columns: 40px 80px 1fr 36px;
    align-items: center;
    gap: 10px;
    animation: kmFadeUp .5s ease both;
}

.km-city-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .82rem; font-weight: 800;
    background: rgba(13,110,253,0.10); color: #0d6efd;
    flex-shrink: 0;
}

.km-ci-teal  { background: rgba(6,182,212,0.10);  color: #0891b2; }
.km-ci-amber { background: rgba(245,158,11,0.10); color: #d97706; }
.km-ci-green { background: rgba(16,185,129,0.10); color: #059669; }
.km-ci-gray  { background: rgba(107,114,128,0.10); color: #4b5563; }

.km-city-body strong { display: block; font-size: .85rem; font-weight: 700; color: #0d2238; }
.km-city-body span   { font-size: .74rem; color: #6a7a88; }

.km-city-bar-wrap { flex: 1; }
.km-city-track { height: 7px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.km-city-fill { height: 100%; border-radius: 999px; width: var(--w); animation: kmBarGrow .9s ease both; }
.km-cf-blue  { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.km-cf-teal  { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.km-cf-amber { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.km-cf-green { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.km-cf-gray  { background: linear-gradient(90deg, #9ca3af, #d1d5db); }

.km-city-pct { font-size: .76rem; font-weight: 700; color: #6a7a88; text-align: right; }

/* ── RANKINGS SECTION ────────────────────────────── */
.km-rankings-section { padding-top: 20px; padding-bottom: 20px; }

/* ── TOP LIST ────────────────────────────────────── */
.km-top-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.km-top-row {
    display: grid;
    grid-template-columns: 26px 110px 1fr 70px;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: #f8fbfe;
    border: 1px solid #eef3f8;
    animation: kmFadeUp .5s ease both;
    transition: background .2s ease;
}
.km-top-row:hover { background: #f0f7ff; }
.km-tr-gold { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.14); }

.km-tr-rank {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800;
    background: #eef3f8; color: #6a7a88;
}
.km-rn-gold   { background: #fef3c7; color: #92400e; }
.km-rn-silver { background: #f1f5f9; color: #475569; }
.km-rn-bronze { background: #fdf4e7; color: #78350f; }

.km-plate-tag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .76rem; font-weight: 700; color: #0d2238;
    background: #f0f5fa; padding: .22rem .55rem; border-radius: 8px;
    white-space: nowrap;
}

.km-tr-bar-wrap { flex: 1; }
.km-tr-track { height: 8px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.km-tr-fill { height: 100%; border-radius: 999px; width: var(--w); animation: kmBarGrow .9s ease both; }
.km-trf-gold { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.km-trf-blue { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.km-trf-cyan { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.km-trf-teal { background: linear-gradient(90deg, #0d9488, #2dd4bf); }

.km-tr-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .82rem; font-weight: 800; color: #0d2238; text-align: right; }

/* ── ODO LIST ────────────────────────────────────── */
.km-odo-list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; margin-bottom: 10px; }

.km-odo-row {
    display: grid;
    grid-template-columns: 100px 1fr 90px;
    align-items: center;
    gap: 8px;
    animation: kmFadeUp .5s ease both;
}

.km-odo-bar-wrap { flex: 1; }
.km-odo-track { height: 6px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.km-odo-fill { height: 100%; border-radius: 999px; width: var(--w); animation: kmBarGrow .9s ease both; }
.km-of-blue { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
.km-of-cyan { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.km-of-teal { background: linear-gradient(90deg, #0d9488, #2dd4bf); }

.km-odo-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; font-weight: 700; color: #0d2238; text-align: right; white-space: nowrap; }

.km-odo-avg {
    display: flex; gap: 8px; align-items: center;
    background: rgba(13,110,253,0.04);
    border: 1px solid rgba(13,110,253,0.10);
    border-radius: 12px; padding: 9px 12px;
    font-size: .8rem; color: #29455d;
}
.km-odo-avg i { color: #0d6efd; }
.km-odo-avg strong { color: #0d2238; }

/* ── LOW KM LIST ─────────────────────────────────── */
.km-low-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.km-low-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: 8px;
    animation: kmFadeUp .5s ease both;
}

.km-low-bar-wrap { flex: 1; }
.km-low-track { height: 6px; border-radius: 999px; background: #eef3f8; overflow: hidden; }
.km-low-fill { height: 100%; border-radius: 999px; width: var(--w); background: linear-gradient(90deg, #f59e0b, #fcd34d); animation: kmBarGrow .9s ease both; }

.km-low-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem; font-weight: 700; color: #d97706; text-align: right; }

/* ── TABLE SECTION ───────────────────────────────── */
.km-table-section { padding-top: 20px; padding-bottom: 20px; }

.km-sample-table { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }

.km-st-head {
    display: grid;
    grid-template-columns: 100px 90px 90px 80px 80px;
    gap: 10px; padding: 0 12px 5px;
    font-size: .7rem; text-transform: uppercase;
    letter-spacing: .05em; color: #6a7a88;
}

.km-st-row {
    display: grid;
    grid-template-columns: 100px 90px 90px 80px 80px;
    gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 12px;
    background: #f8fbfe;
    font-size: .83rem;
    animation: kmFadeUp .5s ease both;
    transition: background .2s ease;
}
.km-st-row:hover { background: #f0f7ff; }
.km-st-row-muted { background: #fafafa; opacity: .75; }

.km-st-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; color: #29455d; }
.km-muted  { color: #94a3b8; }

.km-st-km { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: .82rem; }
.km-km-high { color: #059669; }
.km-km-mid  { color: #0d6efd; }
.km-km-low  { color: #6a7a88; }
.km-km-none { color: #94a3b8; font-style: italic; font-size: .76rem; }

.km-st-status { display: flex; align-items: center; gap: 5px; font-size: .76rem; }
.km-status-ok { color: #059669; }

.km-table-note { display: flex; gap: 8px; align-items: flex-start; background: rgba(13,110,253,0.04); border: 1px solid rgba(13,110,253,0.10); border-radius: 12px; padding: 10px 13px; font-size: .8rem; color: #29455d; }
.km-table-note i { color: #0d6efd; flex-shrink: 0; margin-top: 1px; }
.km-table-note p { margin: 0; }

/* ── METRIC CARDS ────────────────────────────────── */
.km-metric-card {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 17px; border-radius: 18px; border: 1px solid transparent;
}
.km-metric-card i      { font-size: 1.3rem; flex-shrink: 0; }
.km-metric-card strong { display: block; font-size: 1rem; font-weight: 800; color: #0d2238; margin-bottom: 2px; }
.km-metric-card span   { display: block; font-size: .8rem; color: #29455d; }
.km-metric-card small  { display: block; font-size: .72rem; color: #6a7a88; margin-top: 2px; }

.km-mc-blue  { background: rgba(59,130,246,0.06);  border-color: rgba(59,130,246,0.13); }
.km-mc-blue i { color: #3b82f6; }
.km-mc-teal  { background: rgba(16,185,129,0.06);  border-color: rgba(16,185,129,0.12); }
.km-mc-teal i { color: #10b981; }
.km-mc-amber { background: rgba(245,158,11,0.06);  border-color: rgba(245,158,11,0.12); }
.km-mc-amber i { color: #f59e0b; }
.km-mc-green { background: rgba(5,150,105,0.06);   border-color: rgba(5,150,105,0.12); }
.km-mc-green i { color: #059669; }

/* ── FEATURES SECTION ────────────────────────────── */
.km-features-section { padding-top: 20px; padding-bottom: 20px; }
.km-feat-card { transition: transform .28s ease, box-shadow .28s ease; animation: kmFadeUp .5s ease both; }
.km-feat-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(12,34,56,0.09); }

/* ── KEYFRAMES ───────────────────────────────────── */
@keyframes kmPulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: .80; }
}
@keyframes kmFloatSoft {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
@keyframes kmFloatCardA {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}
@keyframes kmFloatCardB {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}
@keyframes kmFadeUp {
    0%   { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes kmBarGrow {
    0%   { transform: scaleX(0); transform-origin: left; }
    100% { transform: scaleX(1); }
}
@keyframes kmBarUp {
    0%   { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}
@keyframes kmArcDraw {
    0%   { stroke-dasharray: 0 339; }
    100% { stroke-dasharray: 281 339; }
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 991.98px) {
    .km-hero-stage { min-height: 480px; }
    .km-dash-window { top: 16px; left: 16px; right: 16px; }
    .km-float-a, .km-float-b { display: none; }
    .km-top-row { grid-template-columns: 22px 90px 1fr 60px; }
    .km-st-head, .km-st-row { grid-template-columns: 90px 80px 80px 70px; }
    .km-st-row > :last-child { display: none; }
}
@media (max-width: 767.98px) {
    .km-odometer { gap: 2px; }
    .km-odo-digit { width: 28px; height: 38px; font-size: 1.1rem; }
    .km-avg-box { grid-template-columns: 1fr 1fr; }
    .km-top-row { grid-template-columns: 20px 80px 1fr; }
    .km-tr-val { display: none; }
    .km-st-head, .km-st-row { grid-template-columns: 85px 1fr 60px; }
}