.dashboard-page {
    --qs-red: #c92a2a;
    --qs-green: #1f8f4f;
}

.dashboard-hero {
    background: linear-gradient(135deg, #dbeafe, #e0f2fe 55%, #f0f9ff);
    color: #1f2937;
}
.dashboard-hero .text-muted,
.dashboard-hero .dashboard-eyebrow {
    color: #334155 !important;
}

.dashboard-kpi .card-body { display: flex; flex-direction: column; gap: 0.25rem; }
.dashboard-kpi .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.dashboard-kpi .kpi-sub { color: #6c757d; font-size: 0.85rem; }

.skeleton-card {
    min-height: 160px;
    background: linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%);
    background-size: 400% 100%;
    animation: loading-shimmer 1.4s infinite;
}
@keyframes loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.summary-pill {
    background: #f8f9fb;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 0.6rem 0.75rem;
    min-height: 72px;
}
.summary-label { color: #6c757d; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
.summary-value { color: #152238; font-weight: 700; font-size: 1.1rem; }

.qs-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.qs-red { background: #ffe3e3; border-color: #ffc9c9; color: var(--qs-red); }
.qs-green { background: #d3f9d8; border-color: #b2f2bb; color: #126b39; }

.dashboard-table-wrap { max-height: 560px; overflow: auto; }
.dashboard-table-wrap thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    white-space: nowrap;
}
.dashboard-table-wrap th[data-sort] { cursor: pointer; }

.traffic-mix { min-width: 150px; }
.traffic-mix .progress { height: 0.55rem; }
.traffic-mix .first { background-color: rgba(25, 135, 84, 0.45); }
.traffic-mix .repeat { background-color: rgba(13, 110, 253, 0.8); }
.traffic-mix .blocked { background-color: rgba(220, 53, 69, 0.72); }

.row-lowquality { background: #fff5f5; }
.row-highquality { background: #f8fff9; }
.row-topquality { box-shadow: inset 4px 0 0 #198754; }
.top-quality-pill {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0f5132;
    background: #d1e7dd;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.chart-canvas-wrap { position: relative; height: 260px; }
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 767.98px) {
    .dashboard-table-wrap,
    .dashboard-table-wrap table,
    .dashboard-table-wrap tbody,
    .dashboard-table-wrap tr,
    .dashboard-table-wrap td {
        display: block;
        width: 100%;
    }

    .dashboard-table-wrap thead { display: none; }
    .dashboard-table-wrap tr {
        border: 1px solid #e9ecef;
        border-radius: 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        background: #fff;
    }
    .dashboard-table-wrap td {
        border: 0;
        padding: 0.35rem 0.5rem;
    }
    .dashboard-table-wrap td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: 0.1rem;
        font-weight: 600;
    }
}