/* ============================================================
   Zero Day BattleMetrics — Custom Dashboard
   All colours/fonts come from CSS variables set inline by PHP.
   ============================================================ */

#zdbm-customdash {
    font-family: var(--zcd-font);
    color: var(--zcd-text);
    background: var(--zcd-bg);
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 8px;
}

#zdbm-customdash * {
    box-sizing: border-box;
}

/* ── Shared card base ───────────────────────── */

.zcd-card {
    background: var(--zcd-card-bg);
    border: 1px solid var(--zcd-card-border);
    border-radius: var(--zcd-card-radius);
    padding: 14px;
    overflow: hidden;
    min-width: 0;
}

.zcd-card__label {
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--zcd-label);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--zcd-card-border);
    font-weight: 600;
}

.zcd-card__body {
    font-size: 0.82em;
    line-height: 1.6;
    color: var(--zcd-text);
}

/* ── Panel wrapper + layout ─────────────────── */

.zcd-panel {
    margin-bottom: 10px;
}

/* Panels that sit in a 2-col row */
.zcd-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* ── Status & Players panel ─────────────────── */

.zcd-status-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Status sub-card: no label, just the badge */
.zcd-status-badge-card {
    background: var(--zcd-card-bg);
    border: 1px solid var(--zcd-card-border);
    border-radius: var(--zcd-card-radius);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

/* Players sub-card */
.zcd-players-card {
    background: var(--zcd-card-bg);
    border: 1px solid var(--zcd-card-border);
    border-radius: var(--zcd-card-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zcd-players-card .zcd-card__label {
    margin-bottom: 6px;
}

.zcd-stat-value {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--zcd-value);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Single-stat card (uptime, rank, map) ───── */

.zcd-single-stat {
    background: var(--zcd-card-bg);
    border: 1px solid var(--zcd-card-border);
    border-radius: var(--zcd-card-radius);
    padding: 14px;
    text-align: center;
}

.zcd-single-stat .zcd-card__label {
    text-align: left;
}

.zcd-single-stat .zcd-stat-value {
    font-size: 1.3em;
    margin-top: 4px;
}

/* ── Online badge ────────────────────────────── */

.zcd-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 0.95em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zcd-badge--online {
    background: rgba(126,239,109,0.12);
    color: var(--zcd-accent);
    border: 1px solid var(--zcd-accent);
}

.zcd-badge--offline {
    background: rgba(239,109,109,0.12);
    color: #ef6d6d;
    border: 1px solid #8a3f3f;
}

/* ── Chart container ────────────────────────── */

.zcd-chart-wrap {
    position: relative;
    height: 180px;
    width: 100%;
    margin-top: 4px;
}

/* ── Who's Online tags ──────────────────────── */

.zcd-online-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.zcd-online-tag {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--zcd-card-border);
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 0.8em;
    color: var(--zcd-text);
}

.zcd-online-tag::before {
    content: '● ';
    color: var(--zcd-accent);
    font-size: 0.6em;
    vertical-align: middle;
}

.zcd-count-note {
    color: #666;
    font-size: 0.8em;
    margin: 4px 0 0;
}

/* ── Sessions feed ──────────────────────────── */

.zcd-sessions {
    max-height: 280px;
    overflow-y: auto;
}

.zcd-session {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.zcd-session:last-child { border-bottom: none; }

.zcd-session__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.zcd-session__name {
    color: var(--zcd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.zcd-session__time {
    color: #666;
    font-size: 0.78em;
    white-space: nowrap;
}

.zcd-session__dur {
    color: #888;
    font-size: 0.78em;
    white-space: nowrap;
    text-align: right;
    display: none;
}

/* ── Outage log ─────────────────────────────── */

.zcd-outages {
    max-height: 200px;
    overflow-y: auto;
}

.zcd-outage {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.8em;
}

.zcd-outage:last-child { border-bottom: none; }

.zcd-outage__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef6d6d;
    flex-shrink: 0;
}

/* ── Map card ───────────────────────────────── */

.zcd-map-value {
    font-size: 1em;
    color: var(--zcd-value);
    word-break: break-word;
    margin-top: 4px;
}

/* ── No-data / loading states ───────────────── */

.zcd-empty {
    color: #555;
    font-style: italic;
    font-size: 0.85em;
    padding: 8px 0;
}

.zcd-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #555;
    font-style: italic;
    font-size: 0.85em;
}

/* ── Scrollbars ─────────────────────────────── */

.zcd-sessions::-webkit-scrollbar,
.zcd-outages::-webkit-scrollbar { width: 4px; }
.zcd-sessions::-webkit-scrollbar-track,
.zcd-outages::-webkit-scrollbar-track { background: transparent; }
.zcd-sessions::-webkit-scrollbar-thumb,
.zcd-outages::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* ── Tablet (600px+) ────────────────────────── */

@media (min-width: 600px) {
    #zdbm-customdash { padding: 16px 12px; }
    .zcd-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .zcd-chart-wrap { height: 200px; }
    .zcd-session { grid-template-columns: 10px 1fr auto auto; }
    .zcd-session__dur { display: block; }
}

/* ── Desktop (900px+) ───────────────────────── */

@media (min-width: 900px) {
    #zdbm-customdash { padding: 16px; }
    .zcd-row { gap: 14px; margin-bottom: 14px; }
    .zcd-panel { margin-bottom: 14px; }
    .zcd-chart-wrap { height: 220px; }
    .zcd-card { padding: 16px; }
    .zcd-card__label { font-size: 0.72em; }
    .zcd-card__body { font-size: 0.85em; }
    .zcd-session { grid-template-columns: 12px 1fr auto auto; gap: 8px; }
    .zcd-stat-value { font-size: 1.5em; }
}