nav {
    margin: auto;
    overflow: auto;
}


.card {
    border-radius: 1rem;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10);
    transition: box-shadow 0.2s, transform 0.2s;
}

.table {
    border-radius: 0.75rem;
    overflow: auto;
    background: var(--bs-table-bg, var(--bs-body-bg));
}
.table th, .table td {
    border-color: var(--bs-border-color-translucent);
}
.table-hover tbody tr:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}
.btn-primary, .btn-outline-primary {
    border-radius: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: background 0.2s, color 0.2s;
}
.btn-primary {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
    border: none;
}
.btn-outline-primary {
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}
.form-control, .form-select {
    border-radius: 0.5rem;
    background: var(--bs-form-control-bg, var(--bs-body-bg));
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color-translucent);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem var(--bs-primary-bg-subtle);
}
.nav-link {
    color: var(--bs-body-color) !important;
    font-weight: 500;
}
.nav-link:hover {
    color: var(--bs-primary) !important;
}
.gradient-title {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
@media (max-width: 768px) {
    .container {
        padding: 0.5rem;
        overflow: auto;
    }
    .card {
        margin-bottom: 1rem;
    }
}