/* OVERRIDE BOOTSTRAP STYLE */
body {
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}


/* Texte */
.text-primary {
    color: var(--md-sys-color-primary) !important;
}
.text-muted {
    color: var(--md-sys-color-on-surface-variant-hover) !important;
}

.img-thumbnail {
    width: 70px;
    height: 70px;
    font-size: 50px;
    padding-top: 10px;
    border-radius: 0.5rem;
    color: var(--md-sys-color-on-surface-variant);
    background-color: var(--md-sys-color-surface-bright);
    border-color: var(--md-sys-color-outline-variant);
}

.border-right {
    border-right: 1px solid var(--md-sys-color-outline-variant) !important;
}


/* Table */
.table {
    background-color: var(--md-sys-color-surface-bright);
    color: var(--md-sys-color-on-surface);
}
.table-bordered {
    border-color: var(--md-sys-color-outline-variant);
}
table.dataTable.table-bordered {
    border-top: 0px;
}
.table-bordered thead td, .table-bordered thead th {
    border-bottom-width: 0px;
}
.table-bordered td, .table-bordered th {
    border-color: var(--md-sys-color-outline-variant);
}


/* Lien */
a {
    color: var(--md-sys-color-primary);
}
a:hover {
    color: var(--md-sys-color-primary-hover);
}
a:active {
    color: var(--md-sys-color-primary-active);
}


/* Boutons */
/* Primary button  */
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-primary);
}
.btn-primary:not(:disabled):not(.disabled).hover, .btn-primary:not(:disabled):not(.disabled):hover {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary-hover);
    background-color: var(--md-sys-color-primary-hover);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary-active);
    background-color: var(--md-sys-color-primary-active);
}

.btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled).hover, .btn-outline-primary:not(:disabled):not(.disabled):hover {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary-active);
    background-color: var(--md-sys-color-primary-active);
}

/* Secondary button  -> Utilisation du gris de bootstrap */
/* .btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary);
    background-color: var(--md-sys-color-tertiary);
}
.btn-secondary:not(:disabled):not(.disabled).hover, .btn-secondary:not(:disabled):not(.disabled):hover {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-hover);
    background-color: var(--md-sys-color-tertiary-hover);
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-active);
    background-color: var(--md-sys-color-tertiary-active);
}
.btn-outline-secondary, .btn-outline-secondary.disabled, .btn-outline-prisecondarymary:disabled {
    color: var(--md-sys-color-tertiary);
    border-color: var(--md-sys-color-tertiary);
}
.btn-outline-secondary:not(:disabled):not(.disabled).hover, .btn-outline-secondary:not(:disabled):not(.disabled):hover {
    color: var(--md-sys-color-on-tertiary);
    background-color: var(--md-sys-color-tertiary);
    border-color: var(--md-sys-color-tertiary);
}
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-active);
    background-color: var(--md-sys-color-tertiary-active); 
}*/

/* Info button  */
.btn-info, .btn-info.disabled, .btn-info:disabled {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary);
    background-color: var(--md-sys-color-tertiary);
}
.btn-info:not(:disabled):not(.disabled).hover, .btn-info:not(:disabled):not(.disabled):hover {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-hover);
    background-color: var(--md-sys-color-tertiary-hover);
}
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-active);
    background-color: var(--md-sys-color-tertiary-active);
}
.btn-outline-info, .btn-outline-info.disabled, .btn-outline-priinfomary:disabled {
    color: var(--md-sys-color-tertiary);
    border-color: var(--md-sys-color-tertiary);
}
.btn-outline-info:hover {
    color: var(--md-sys-color-on-tertiary);
    background-color: var(--md-sys-color-tertiary);
    border-color: var(--md-sys-color-tertiary);
}
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
    color: var(--md-sys-color-on-tertiary);
    border-color: var(--md-sys-color-tertiary-active);
    background-color: var(--md-sys-color-tertiary-active);
}


/* Pagination */
.page-item.active .page-link {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-primary);
}
.page-link {
    color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-outline-variant);
}
.page-link:hover {
    color:  var(--md-sys-color-primary-hover);
}
.page-item.disabled .page-link {
    color: var(--md-sys-color-on-surface-disabled);
    background-color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-outline-variant);
}


/* Badge */
.badge-primary {
    color: var(--md-sys-color-on-primary);
    background-color: var(--md-sys-color-primary);
}
.badge-secondary {
    color: var(--md-sys-color-on-secondary);
    background-color: var(--md-sys-color-secondary);
}
.badge-info {
    color: var(--md-sys-color-on-tertiary);
    background-color: var(--md-sys-color-tertiary);
}
.badge-disabled {
    color: var(--md-sys-color-surface-bright);
    background-color: var(--md-sys-color-on-surface-variant-hover);
}
.badge-danger {
    color: var(--md-sys-color-on-error);
    background-color: var(--md-sys-color-error);
}
.badge-warning {
    color: var(--md-sys-color-on-warning);
    background-color: var(--md-sys-color-warning);
}


/* Input */
.input-group-text, .form-control, .custom-select {
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
}
.form-control::placeholder {
    color: var(--md-sys-color-on-surface-disabled);
}
.input-group-text, .form-control:disabled {
    background-color: var(--md-sys-color-surface-container);
}


/* Checkbox */
.custom-control-input:disabled ~ .custom-control-label {
    color: var(--md-sys-color-on-surface-disabled);
}
.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--md-sys-color-surface-container);
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: var(--md-sys-color-primary);
    opacity: 0.5;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
    background-color: var(--md-sys-color-primary);
}
.custom-control-label::before {
    border-color: var(--md-sys-color-outline-variant);
}


/* List group */
.list-group-item {
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline-variant);
}
.list-group-item:hover {
    color: var(--md-sys-color-on-surface);
}
.list-group-item.active {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-primary);
}


/* Card */
.card {
    background-color: var(--md-sys-color-surface-bright);
    border-color: var(--md-sys-color-outline-variant);
}

.card-header {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}

.card-footer {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}


/* Modal */
.modal-header, .modal-footer {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-outline-variant);
}
.modal-body {
    background-color: var(--md-sys-color-surface);
}


/* Navbar Header */
.navbar-light .navbar-brand {
    color: var(--md-sys-color-on-surface);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--md-sys-color-on-surface-variant-hover);
}
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link:hover {
    color: var(--md-sys-color-on-surface);
}
.navbar-light .navbar-text {
    color: var(--md-sys-color-on-surface-variant);
}
.nav-tabs {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface-bright);
    border-color: var(--md-sys-color-outline-variant) var(--md-sys-color-outline-variant) var(--md-sys-color-surface-bright);
}

.nav-tabs .nav-link:not(.active) {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-outline-variant) var(--md-sys-color-outline-variant) var(--md-sys-color-outline-variant);
}

.nav-tabs .nav-link:not(.active):hover {
    border-color: var(--md-sys-color-outline) var(--md-sys-color-outline) var(--md-sys-color-outline);
}

/* Dropdown */
.dropdown-menu{
    background-color: var(--md-sys-color-surface);
}
.dropdown-item {
    color: var(--md-sys-color-on-surface);
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}


/* Alertes */
.alert-danger {
    color: var(--md-sys-color-on-error-container);
    background-color: var(--md-sys-color-error-container);
    border-color: var(--md-sys-color-error-outline);
}

.alert-danger hr {
    border-top-color: var(--md-sys-color-error-outline);
}

.alert-warning {
    color: var(--md-sys-color-on-warning-container);
    background-color: var(--md-sys-color-warning-container);
    border-color: var(--md-sys-color-warning-outline);
}

.alert-warning hr {
    border-top-color: var(--md-sys-color-warning-outline);
}