/* ============================================================
   BURGI COCKPIT — Components (cards, stats, bars, tables, hero)
   ============================================================ */

/* ── Hero (reference arena image + dark overlay) ── */
.hero {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: var(--space-2xl) var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--card-border);
    background: var(--bg-card);
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../img/arena.png') center/cover no-repeat;
    opacity: 0.45;
}
.hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(6,10,18,0.92) 0%, rgba(6,10,18,0.55) 50%, rgba(6,10,18,0.85) 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-size: 2rem; font-weight: 800; letter-spacing: -0.5px;
    background: var(--gradient-title);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p { color: var(--text-secondary); margin-top: var(--space-xs); }

/* ── Section heading + period switch ── */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--space-xl) 0 var(--space-md); gap: var(--space-md); flex-wrap: wrap;
}
.section-head h2 {
    font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-sm);
}
.section-head h2 .material-symbols-outlined { color: var(--accent-cyan); font-size: 1.3rem; }

.switch { display: inline-flex; gap: 4px; background: var(--bg-deep); padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--card-border); }
.switch a {
    padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
    font-size: 0.78rem; color: var(--text-secondary); font-weight: 600;
}
.switch a.active { background: var(--accent-cyan); color: #04121d; box-shadow: var(--glow-cyan); }

/* ── Grids ── */
.grid { display: grid; gap: var(--space-md); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ── Card ── */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--glow-soft);
    position: relative;
    overflow: hidden;
}
/* alternating neon top edge */
.card.edge-cyan::before, .card.edge-orange::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.card.edge-cyan::before   { background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); }
.card.edge-orange::before { background: linear-gradient(90deg, transparent, var(--accent-orange), transparent); }
.card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
.card h3 .material-symbols-outlined { font-size: 1.15rem; }

/* ── Stat card ── */
.stat {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative; overflow: hidden;
}
.stat .stat-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); font-family: var(--font-mono); margin-bottom: var(--space-xs);
}
.stat .stat-value { font-size: 1.9rem; font-weight: 800; font-family: var(--font-mono); line-height: 1; }
.stat .stat-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: var(--space-xs); }
.stat .stat-icon {
    position: absolute; top: var(--space-md); right: var(--space-md);
    font-size: 1.4rem; opacity: 0.5;
}
.v-cyan   { color: var(--accent-cyan); }
.v-orange { color: var(--accent-orange); }
.v-amber  { color: var(--accent-amber); }
.v-green  { color: var(--color-positive); }
.v-red    { color: var(--accent-red); }
.v-blue   { color: var(--accent-blue); }

/* ── Bar list (top pages / sources / devices) ── */
.barlist { display: flex; flex-direction: column; gap: 6px; }
.barlist .row { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; overflow: hidden; }
.barlist .row .fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,212,255,0.18), rgba(0,212,255,0.03)); z-index: 0; }
.barlist .row.warm .fill { background: linear-gradient(90deg, rgba(255,122,24,0.18), rgba(255,122,24,0.03)); }
.barlist .row .label { position: relative; z-index: 1; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; font-family: var(--font-mono); }
.barlist .row .val { position: relative; z-index: 1; font-weight: 700; font-family: var(--font-mono); color: var(--text-secondary); }
.empty { color: var(--text-muted); font-size: 0.85rem; padding: var(--space-md); text-align: center; font-style: italic; }

/* ── Mini line chart ── */
.chartbox { width: 100%; height: 160px; }
.chartbox canvas { width: 100%; height: 100%; }

/* ── Tables ── */
table.tbl { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
table.tbl th { text-align: left; padding: 0.5rem 0.7rem; color: var(--accent-cyan); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--card-border); font-family: var(--font-mono); }
table.tbl td { padding: 0.5rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-secondary); }
table.tbl tr:hover td { background: var(--bg-hover); }
table.tbl td.mono, table.tbl td .mono { font-family: var(--font-mono); }

/* ── Status dot / pills ── */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot.up { background: var(--color-positive); box-shadow: 0 0 8px var(--color-positive); }
.dot.down { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }
.dot.unknown { background: var(--text-muted); }
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); }
.pill.ok { background: rgba(46,230,168,0.15); color: var(--color-positive); }
.pill.bad { background: rgba(255,59,92,0.15); color: var(--accent-red); }
.pill.warn { background: rgba(255,159,28,0.15); color: var(--accent-amber); }

/* ── Progress meter ── */
.meter { height: 7px; border-radius: var(--radius-pill); background: var(--bg-deep); overflow: hidden; margin-top: 6px; }
.meter > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); }
.meter.warm > span { background: linear-gradient(90deg, var(--accent-amber), var(--accent-orange)); }
.meter.hot > span { background: linear-gradient(90deg, var(--accent-orange), var(--accent-red)); }

/* ── Site overview tiles ── */
.site-tile { display: flex; flex-direction: column; gap: 4px; }
.site-tile .domain { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.site-tile .nums { display: flex; gap: var(--space-lg); margin-top: var(--space-xs); }
.site-tile .nums b { font-size: 1.3rem; font-family: var(--font-mono); }

/* ── Language bar (github) ── */
.langbar { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--space-sm) 0; }
.langbar > span { height: 100%; }
.lang-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: 0.78rem; color: var(--text-secondary); font-family: var(--font-mono); }
.lang-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }

.muted { color: var(--text-muted); }
.code-inline { font-family: var(--font-mono); background: var(--bg-deep); padding: 1px 6px; border-radius: 4px; color: var(--accent-cyan); font-size: 0.82rem; }
.snippet-box { background: var(--bg-deepest); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-md); font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-cyan); overflow-x: auto; white-space: pre; }