/* =========================================================
   INJURIES COMMAND CENTER
   Namespace: injx-
   ========================================================= */

:root {
    --injx-bg-0: #07111d;
    --injx-bg-1: #0b1624;
    --injx-bg-2: #101b2b;
    --injx-bg-3: #152336;
    --injx-border: rgba(255,255,255,0.08);
    --injx-border-strong: rgba(111,220,255,0.18);
    --injx-text: #f5f9ff;
    --injx-text-soft: rgba(222,231,244,0.78);
    --injx-text-muted: rgba(174,191,215,0.66);
    --injx-cyan: #00d1ff;
    --injx-cyan-soft: #78ddff;
    --injx-green: #43f39f;
    --injx-amber: #ffc56d;
    --injx-red: #ff7d89;
    --injx-violet: #b58cff;
    --injx-blue: #4fa7ff;
    --injx-shadow-lg: 0 24px 60px rgba(0,0,0,0.30);
    --injx-shadow-md: 0 16px 36px rgba(0,0,0,0.24);
    --injx-radius-xl: 28px;
    --injx-radius-lg: 22px;
    --injx-radius-md: 18px;
    --injx-radius-sm: 14px;
    --injx-radius-pill: 999px;
}

/* ---------- shell ---------- */
.injx-page {
    color: var(--injx-text);
}

.injx-shell {
    display: grid;
    gap: 1.15rem;
}

/* ---------- hero ---------- */
.injx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) 300px;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: var(--injx-radius-xl);
    border: 1px solid var(--injx-border);
    background: radial-gradient(circle at top right, rgba(0,209,255,0.14), transparent 30%), radial-gradient(circle at 18% 0%, rgba(67,243,159,0.08), transparent 24%), linear-gradient(180deg, rgba(16,28,44,0.98), rgba(8,15,27,0.98));
    box-shadow: var(--injx-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.03);
}

.injx-hero-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.injx-hero-copy {
    display: grid;
    gap: .5rem;
}

.injx-eyebrow {
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(167,218,255,0.86);
}

.injx-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 950;
    letter-spacing: -.04em;
    line-height: 1.02;
    color: #fff;
}

.injx-subtitle {
    max-width: 860px;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--injx-text-soft);
}

.injx-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.injx-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 32px;
    padding: 0 .82rem;
    border-radius: var(--injx-radius-pill);
    font-size: .73rem;
    font-weight: 800;
    white-space: nowrap;
}

    .injx-chip strong {
        font-weight: 950;
        color: #fff;
    }

.injx-chip-soft {
    color: var(--injx-text-soft);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
}

.injx-hero-actions {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    justify-content: space-between;
}

.injx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 16px;
    border: 1px solid var(--injx-border);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 900;
    transition: .18s ease;
}

.injx-btn-primary {
    color: #061019;
    background: linear-gradient(135deg, var(--injx-green), var(--injx-cyan));
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(0,209,255,0.20);
}

    .injx-btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

.injx-btn-secondary {
    color: var(--injx-text);
    background: rgba(255,255,255,0.04);
}

    .injx-btn-secondary:hover,
    .injx-btn-ghost:hover {
        transform: translateY(-1px);
        color: #fff;
        border-color: var(--injx-border-strong);
        background: rgba(255,255,255,0.06);
    }

.injx-btn-ghost {
    color: var(--injx-text-soft);
    background: rgba(255,255,255,0.03);
}

/* ---------- banner ---------- */
.injx-banner {
    padding: .95rem 1rem;
    border-radius: var(--injx-radius-lg);
    border: 1px solid var(--injx-border);
    background: rgba(255,255,255,0.03);
    font-size: .92rem;
    color: var(--injx-text-soft);
}

    .injx-banner strong {
        color: #fff;
    }

    .injx-banner.is-success {
        border-color: rgba(67,243,159,0.18);
        background: rgba(67,243,159,0.08);
    }

    .injx-banner.is-warn {
        border-color: rgba(255,197,109,0.18);
        background: rgba(255,197,109,0.08);
    }

/* ---------- summary band ---------- */
.injx-summary-band {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.injx-summary-card {
    display: grid;
    gap: .28rem;
    padding: 1rem;
    border-radius: var(--injx-radius-lg);
    border: 1px solid var(--injx-border);
    background: radial-gradient(circle at top right, rgba(0,209,255,0.06), transparent 34%), linear-gradient(180deg, rgba(14,24,39,0.97), rgba(8,15,26,0.97));
    box-shadow: var(--injx-shadow-md);
}

    .injx-summary-card span {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .11em;
        font-weight: 900;
        color: var(--injx-text-muted);
    }

    .injx-summary-card strong {
        font-size: 1.45rem;
        font-weight: 950;
        line-height: 1;
        color: #fff;
    }

    .injx-summary-card small {
        font-size: .83rem;
        line-height: 1.5;
        color: var(--injx-text-soft);
    }

/* ---------- panels ---------- */
.injx-panel,
.injx-priority-grid > article {
    display: grid;
    gap: .95rem;
    padding: 1.05rem;
    border-radius: var(--injx-radius-lg);
    border: 1px solid var(--injx-border);
    background: radial-gradient(circle at top right, rgba(0,209,255,0.08), transparent 34%), linear-gradient(180deg, rgba(14,24,39,0.97), rgba(8,15,26,0.97));
    box-shadow: var(--injx-shadow-md);
}

.injx-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.injx-panel-kicker {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
    color: var(--injx-text-muted);
}

.injx-panel-title {
    margin: .18rem 0 0;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.08;
    color: #fff;
}

.injx-panel-sub {
    margin-top: .28rem;
    font-size: .9rem;
    line-height: 1.58;
    color: var(--injx-text-soft);
}

.injx-panel-footnote {
    font-size: .86rem;
    color: var(--injx-text-soft);
}

    .injx-panel-footnote strong {
        color: #fff;
    }

/* ---------- priority grid ---------- */
.injx-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* ---------- list rows ---------- */
.injx-list,
.injx-feed-list {
    display: grid;
    gap: .75rem;
}

.injx-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .88rem .95rem;
    border-radius: var(--injx-radius-md);
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    text-decoration: none;
    color: inherit;
}

    .injx-list-row:hover {
        border-color: rgba(111,220,255,0.18);
        background: rgba(255,255,255,0.04);
    }

.injx-list-main {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.injx-list-side {
    flex-shrink: 0;
}

.injx-row-title {
    font-size: .96rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
}

.injx-row-sub {
    margin-top: .14rem;
    font-size: .81rem;
    color: var(--injx-text-soft);
}

/* ---------- headshots ---------- */
.injx-headshot {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.injx-headshot-lg {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    border-radius: 16px;
}

/* ---------- pills ---------- */
.injx-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 .78rem;
    border-radius: var(--injx-radius-pill);
    font-size: .72rem;
    font-weight: 900;
    white-space: nowrap;
    text-decoration: none;
}

.injx-pill-soft {
    color: var(--injx-text-soft);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
}

.injx-pill-danger {
    color: #ffe7ea;
    border: 1px solid rgba(255,125,137,0.22);
    background: rgba(255,125,137,0.12);
}

.injx-pill-warn {
    color: #fff2dc;
    border: 1px solid rgba(255,197,109,0.22);
    background: rgba(255,197,109,0.14);
}

.injx-pill-green {
    color: #e7fff1;
    border: 1px solid rgba(67,243,159,0.22);
    background: rgba(67,243,159,0.12);
}

.injx-pill-violet {
    color: #efe4ff;
    border: 1px solid rgba(181,140,255,0.22);
    background: rgba(181,140,255,0.12);
}

.injx-pill-blue {
    color: #e3f1ff;
    border: 1px solid rgba(79,167,255,0.22);
    background: rgba(79,167,255,0.12);
}

.injx-pill-amber {
    color: #fff2dc;
    border: 1px solid rgba(255,197,109,0.22);
    background: rgba(255,197,109,0.14);
}

/* ---------- filters ---------- */
.injx-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: .75rem;
}

.injx-input,
.injx-select {
    width: 100%;
    min-height: 48px;
    padding: 0 .95rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: .92rem;
    outline: none;
}

    .injx-input::placeholder {
        color: var(--injx-text-muted);
    }

    .injx-input:focus,
    .injx-select:focus {
        border-color: rgba(111,220,255,0.24);
        box-shadow: 0 0 0 3px rgba(0,209,255,0.08);
    }

    .injx-select option {
        color: #111;
    }

/* ---------- current canonical cards ---------- */
.injx-current-list {
    display: grid;
    gap: .85rem;
}

.injx-current-card {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(17,27,42,0.97), rgba(10,17,29,0.97));
}

.injx-current-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.injx-current-player {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

    .injx-current-player:hover .injx-row-title {
        color: #dff7ff;
    }

.injx-current-metrics,
.injx-feed-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
}

.injx-metric {
    display: grid;
    gap: .14rem;
    padding: .72rem .78rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
}

    .injx-metric span {
        font-size: .66rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-weight: 800;
        color: var(--injx-text-muted);
    }

    .injx-metric strong {
        font-size: .9rem;
        font-weight: 950;
        line-height: 1.25;
        color: #fff;
    }

.injx-note {
    padding: .88rem .95rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
    font-size: .85rem;
    line-height: 1.6;
    color: var(--injx-text-soft);
}

/* ---------- bottom grid ---------- */
.injx-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.injx-feed-card {
    display: grid;
    gap: .75rem;
    padding: .92rem .95rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
}

/* ---------- empty ---------- */
.injx-empty {
    padding: .95rem 1rem;
    border-radius: var(--injx-radius-md);
    border: 1px dashed rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    font-size: .88rem;
    line-height: 1.55;
    color: var(--injx-text-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 1500px) {
    .injx-summary-band {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .injx-priority-grid {
        grid-template-columns: 1fr;
    }

    .injx-current-metrics,
    .injx-feed-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .injx-hero {
        grid-template-columns: 1fr;
    }

    .injx-filters {
        grid-template-columns: 1fr 1fr;
    }

    .injx-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .injx-summary-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .injx-panel-head,
    .injx-current-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .injx-current-metrics,
    .injx-feed-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .injx-hero,
    .injx-panel,
    .injx-priority-grid > article,
    .injx-summary-card,
    .injx-current-card,
    .injx-feed-card {
        padding: 1rem;
    }

    .injx-title {
        font-size: 1.85rem;
    }

    .injx-summary-band,
    .injx-filters,
    .injx-current-metrics,
    .injx-feed-metrics {
        grid-template-columns: 1fr;
    }

    .injx-list-row {
        flex-direction: column;
        align-items: flex-start;
    }
}