HTML _dashboard.css.html

<style nonce="{{ csp_nonce }}">
    /* ═══════════════════════════════════════════════════════════
       DASHBOARD LAYOUT
       ═══════════════════════════════════════════════════════════ */
    .dashboard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .dashboard-header h1 {
        font-size: 24px;
        font-weight: 700;
    }

    /* Stats row */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stat-card .stat-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    .stat-card .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--text);
    }

    /* Data list */
    .data-list {
        list-style: none;
        padding: 0;
    }
    .data-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .data-list li:last-child { border-bottom: none; }

    /* Badge */
    .badge {
        display: inline-block;
        padding: 2px 8px;
        background: #e9ecef;
        border-radius: 12px;
        font-size: 12px;
    }
    .badge-success { background: #d1fae5; color: #065f46; }
    .badge-warning { background: #fef3c7; color: #92400e; }
    .badge-danger { background: #fee2e2; color: #991b1b; }
    .badge-info { background: #dbeafe; color: #1e40af; }

    /* Empty state */
    .empty {
        text-align: center;
        padding: 40px;
        color: var(--text-muted);
    }

    /* ═══════════════════════════════════════════════════════════
       TABLES
       ═══════════════════════════════════════════════════════════ */
    .table-wrapper {
        overflow-x: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th {
        background: #f8f8f8;
        font-weight: 600;
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #eee;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--text-muted);
    }
    td {
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }
    tr:hover td {
        background: rgba(0,0,0,0.02);
    }

    /* ═══════════════════════════════════════════════════════════
       DASHBOARD-SPECIFIC MOBILE
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 640px) {
        .container { padding: 12px; }
        .stats-row { grid-template-columns: 1fr; }
        .dashboard-header { flex-direction: column; align-items: flex-start; }
    }
</style>