html {
    background-color: var(--bg-color);
}

body {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.title {
    color: var(--text-color);
}

.subtitle {
    color: var(--text-color-light);
}

.table {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    margin-bottom: 0;
}

.table thead th {
    color: var(--text-color) !important;
    border-bottom: 2px solid var(--border-color) !important;
    background-color: transparent !important;
}

.table td, .table th {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.table.is-hoverable tbody tr:hover {
    background-color: var(--nav-active-bg);
}

.table-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 1rem;
    margin-bottom: 2rem;
}