:root {
    --bg-header: #e9f2f7;  light blue header 
    --border: #e5e7eb;  light gray borders 
    --text: #111827;  dark text 
    --muted: #6b7280;  muted text 
    --radius: 8px;
    --shadow: 0 2px 6px rgba(0,0,0,.08);
}

/*body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    background: #f8fafc;
    line-height: 1.5;
}*/



/* Table styles */
.table {
    width: 100%;
    border-collapse: collapse;
}

    .table thead th {
        background: var(--bg-header);
        font-weight: 500;
        text-align: left;
      /*  padding: 14px 16px;*/
        border-bottom: 1px solid var(--border);
    }

    .table tbody td {
        padding: 6px;
        border-top: 1px solid var(--border);
    }

    .table tbody tr:hover td {
        background: #f9fbfd;
    }

    /* Rounded bottom edges like the image */
    .table tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--radius);
    }

    .table tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--radius);
    }

/* Responsive: stack rows into cards on small screens */
@media (max-width: 640px) {
    .table thead {
        display: none; /* hide header */
    }

    .table, .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }

        .table tr {
            border-top: 1px solid var(--border);
        }

        .table tbody td {
            border: none;
            border-top: 1px dashed var(--border);
            padding: 12px 16px;
        }

            .table tbody td:first-child {
                font-weight: 600;
                border-top: none;
            }
            /* Add labels for the second column */
            .table tbody td[data-label]::before {
                content: attr(data-label) ": ";
                display: inline-block;
                color: var(--muted);
                font-weight: 500;
                margin-right: 6px;
            }
}