@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@300;400;500;600;700&display=swap";

body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    font-family: 'Inter', sans-serif !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html, body {
    background-color: hsl(var(--background));
}

body:not(.no-transitions) {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.no-transitions * {
    transition: none !important;
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: 'DM Sans', sans-serif !important;
    color: hsl(var(--foreground)) !important;
}

.card {
    --bs-card-bg: hsl(var(--card)) !important;
    --bs-card-color: hsl(var(--card-foreground)) !important;
    --bs-card-border-color: hsl(var(--border)) !important;
    --bs-card-border-radius: var(--radius) !important;
    --bs-card-box-shadow: var(--shadow-card) !important;
    background-color: var(--bs-card-bg) !important;
    border: 1px solid var(--bs-card-border-color) !important;
    box-shadow: var(--bs-card-box-shadow) !important;
}

.card-header {
    background-color: hsla(var(--foreground) / 0.03) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

.btn {
    border-radius: calc(var(--radius) - 2px) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary {
    --bs-btn-bg: hsl(var(--primary)) !important;
    --bs-btn-border-color: hsl(var(--primary)) !important;
    --bs-btn-color: hsl(var(--primary-foreground)) !important;
    --bs-btn-hover-bg: hsla(var(--primary) / 0.9) !important;
    --bs-btn-active-bg: hsla(var(--primary) / 0.8) !important;
}

.btn-secondary {
    --bs-btn-bg: hsl(var(--secondary)) !important;
    --bs-btn-border-color: hsl(var(--border)) !important;
    --bs-btn-color: hsl(var(--secondary-foreground)) !important;
    --bs-btn-hover-bg: hsla(var(--secondary) / 0.8) !important;
}

.btn-outline-primary {
    --bs-btn-color: hsl(var(--primary)) !important;
    --bs-btn-border-color: hsl(var(--primary)) !important;
    --bs-btn-hover-bg: hsl(var(--primary)) !important;
    --bs-btn-hover-color: hsl(var(--primary-foreground)) !important;
}

.form-control, .form-select {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: calc(var(--radius) - 2px) !important;
}

.form-control:focus, .form-select:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 0.25rem hsla(var(--primary) / 0.2) !important;
}

.form-check-input {
    background-color: hsl(var(--background)) !important;
    border-color: hsl(var(--primary)) !important;
}

.form-check-input:checked {
    background-color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.table {
    --bs-table-color: hsl(var(--foreground)) !important;
    --bs-table-bg: transparent !important;
    --bs-table-border-color: hsl(var(--border)) !important;
    --bs-table-striped-bg: hsla(var(--foreground) / 0.02) !important;
    --bs-table-hover-bg: hsla(var(--foreground) / 0.04) !important;
}

thead th {
    background-color: hsla(var(--foreground) / 0.03) !important;
    color: hsl(var(--muted-foreground)) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.modal-content, .dropdown-menu {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: var(--shadow-elevated) !important;
}

.dropdown-item {
    color: hsl(var(--foreground)) !important;
    transition: background-color 0.2s;
}

.dropdown-item:hover {
    background-color: hsl(var(--muted)) !important;
}

.sidebar {
    background-color: hsl(var(--sidebar-background)) !important;
    border-right: 1px solid hsl(var(--sidebar-border)) !important;
}

.sidebar-header {
    border-bottom: 1px solid hsl(var(--sidebar-border)) !important;
}

.sidebar .nav-link {
    color: hsl(var(--sidebar-foreground)) !important;
    border-radius: calc(var(--radius) - 4px);
    margin: 2px 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: hsl(var(--sidebar-accent)) !important;
    color: hsl(var(--sidebar-accent-foreground)) !important;
}

.badge.bg-primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.alert-primary {
    background-color: hsla(var(--primary) / 0.1) !important;
    color: hsl(var(--primary)) !important;
    border-color: hsla(var(--primary) / 0.2) !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px hsl(var(--background)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.dark input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px hsl(var(--input)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

.badge-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.badge-primary {
    background-color: hsla(var(--primary) / 0.1);
    color: hsl(var(--primary));
    border-color: hsla(var(--primary) / 0.2);
}

.badge-success {
    background-color: hsla(var(--success) / 0.15);
    color: hsl(var(--success));
    border-color: hsla(var(--success) / 0.2);
}

.badge-warning {
    background-color: hsla(var(--warning) / 0.15);
    color: hsl(var(--warning));
    border-color: hsla(var(--warning) / 0.2);
}

.badge-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-info {
    background-color: hsla(var(--info) / 0.15);
    color: hsl(var(--info));
    border-color: hsla(var(--info) / 0.2);
}

.badge-custom[href]:hover {
    filter: brightness(0.9);
    cursor: pointer;
}

.card-title {
    padding: 15px 0 10px 0 !important;
}


.progress {
    height: 6px !important;
    background-color: hsla(var(--foreground) / 0.05);
    border-radius: 10px;
    margin-bottom: 5px;
}

.progress-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.progress-label-row .name {
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
}

.progress-label-row .value {
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dropdown-item.active, .dropdown-item:active
{
    background-color: var(--color-primary);
}