:root {
    --dayz-online: #02d974;
    --dayz-medium: #e7b416;
    --dayz-high: #f07c2b;
    --dayz-full: #dc3545;
    --dayz-offline: #ff5b5b;
}

.dayz-server-card {
    box-sizing: border-box;
}

.dayz-server-name {
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dayz-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #777;
    vertical-align: 1px;
    box-shadow: 0 0 0 3px rgba(119,119,119,.14);
}

.dayz-server-card.online .dayz-status-dot {
    background: var(--dayz-online);
    box-shadow: 0 0 0 3px rgba(2,217,116,.14);
}

.dayz-server-card.offline .dayz-status-dot {
    background: var(--dayz-offline);
    box-shadow: 0 0 0 3px rgba(255,91,91,.14);
}

.dayz-server-card.error .dayz-status-dot {
    background: #ff8a3d;
    box-shadow: 0 0 0 3px rgba(255,138,61,.14);
}

.dayz-server-details {
    font-size: .875rem;
}

.dayz-server-info {
    color: #aaa;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.dayz-map { color: #ffaa00; }
.dayz-queryport { display: none; }
.dayz-stale { color: #d6b25e; }

.dayz-progress-bar {
    width: 100%;
    height: 23px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.dayz-progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.06) 10px, rgba(255,255,255,.06) 20px);
    background-size: 200% 200%;
    animation: dayzStripeMove 10s linear infinite;
    pointer-events: none;
}

@keyframes dayzStripeMove {
    from { background-position: 0 0; }
    to { background-position: 100% 100%; }
}

.dayz-progress-fill {
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: width .25s ease;
}

.progress-loading .dayz-progress-fill {
    width: 38%;
    min-width: 70px;
    background: linear-gradient(90deg, transparent, rgba(2,217,116,.75), transparent);
    animation: dayzLoading 1.1s ease-in-out infinite;
}

@keyframes dayzLoading {
    from { transform: translateX(-110%); }
    to { transform: translateX(270%); }
}

.dayz-players {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 8px;
    position: absolute;
    left: 8px;
}

.progress-low .dayz-progress-fill { background: color-mix(in srgb, var(--dayz-online) 55%, transparent); }
.progress-medium .dayz-progress-fill { background: color-mix(in srgb, var(--dayz-medium) 60%, transparent); }
.progress-high .dayz-progress-fill { background: color-mix(in srgb, var(--dayz-high) 65%, transparent); }
.progress-full .dayz-progress-fill { background: color-mix(in srgb, var(--dayz-full) 70%, transparent); }

.dayz-server-card.offline {
}

.dayz-server-card.offline .dayz-server-info,
.dayz-server-card.offline .dayz-players {
    color: var(--dayz-offline);
}

.progress-offline .dayz-progress-fill {
    width: 100%;
    background: #333;
}

.progress-offline::before { display: none; }

.dayz-server-card.error {
}

.dayz-server-card.error .dayz-server-name { color: #ff6600; }
.dayz-server-card.error .dayz-server-info { color: #ff8844; }

.dayz-history {
    margin-top: 14px;
    padding: 10px 12px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    background: rgba(0,0,0,.16);
}

.dayz-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-bottom: 3px;
    font-size: 12px;
}

.dayz-history-title {
    color: #ddd;
    font-weight: 600;
}

.dayz-history-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #aaa;
}

.dayz-history-legend span::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 2px;
    margin: 0 5px 3px 0;
    border-radius: 2px;
}

.dayz-legend-max::before {
    height: 0;
    background: transparent;
    border-top: 2px dashed #8f9aaa;
}
.dayz-legend-average::before { background: var(--dayz-online); }

.dayz-history-chart {
    position: relative;
    min-height: 130px;
}

.dayz-history-chart svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 130px;
    overflow: visible;
}

.dayz-chart-grid {
    stroke: rgba(255,255,255,.09);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.dayz-chart-label {
    fill: #7f8792;
    font: 11px sans-serif;
}

.dayz-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.dayz-chart-line.series-maximum { stroke: #8f9aaa; stroke-dasharray: 6 5; }
.dayz-chart-line.series-average { stroke: var(--dayz-online); }

.dayz-chart-point {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: help;
    transition: r .12s ease, filter .12s ease;
}

.dayz-chart-point.series-maximum { fill: #8f9aaa; stroke: #242a31; }
.dayz-chart-point.series-average { fill: var(--dayz-online); stroke: #18382b; }
.dayz-chart-point:hover,
.dayz-chart-point:focus { r: 6; filter: brightness(1.25); outline: none; }

.dayz-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 132px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    background: rgba(13,15,18,.96);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 5px 18px rgba(0,0,0,.35);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity .1s ease;
}

.dayz-chart-tooltip.visible { opacity: 1; }
.dayz-chart-tooltip strong,
.dayz-chart-tooltip span { display: block; }
.dayz-chart-tooltip span { margin-top: 2px; color: #aeb5bf; }

.dayz-history-empty {
    padding: 18px 0 12px;
    color: #858b94;
    font-size: 12px;
    text-align: center;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .progress-low .dayz-progress-fill { background: #087c48; }
    .progress-medium .dayz-progress-fill { background: #80650f; }
    .progress-high .dayz-progress-fill { background: #984f1c; }
    .progress-full .dayz-progress-fill { background: #8b222c; }
}

@media (prefers-reduced-motion: reduce) {
    .dayz-progress-bar::before { animation: none; }
    .dayz-progress-fill { transition: none; }
    .progress-loading .dayz-progress-fill { animation: none; width: 100%; opacity: .55; }
    .dayz-chart-point,
    .dayz-chart-tooltip { transition: none; }
}

@media (max-width: 520px) {
    .dayz-history { padding-right: 8px; padding-left: 8px; }
    .dayz-history-head { align-items: flex-start; flex-direction: column; }
}