:root {
    --bg-success: #478578;
    --bg-secondary: #ebeff7;
    --bg-primary: #5a67a2;
    --bg-danger: #eb716b;
    --bg-danger-light: #ED9995;
    --bg-warning: #f0ad4e;
    --bg-info: #5bc0de;
    --bg-body: #f3f3f3;
    --bg-white: #fdfdfd;
    --bg-blue-jiliti: #1e233d;
    --bg-main: #ebeff7;
    --bg-purple: #7e5bef;
    --bg-input: #f1f1f1;
}


.nav-item .nav-link {
    color: black;
    font-weight: bold;
}

.nav-link {
    border-radius: 24px !important;
}


.nav-item .nav-link.active {
    color: white;
    border-radius: 24px;
    background-color: var(--bg-blue-jiliti);
}

.nav-link-error {
    color: var(--bg-danger) !important;
}

.nav-link-error.active {
    color: white !important;
    background-color: var(--bg-danger) !important;
}


.bg-success {
    background-color: var(--bg-success) !important;
}

.bg-warning {
    background-color: var(--bg-warning) !important;
}

.bg-info {
    background-color: var(--bg-info) !important;
}

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

.bg-main {
    background-color: var(--bg-main) !important;
}

.bg-danger {
    background-color: var(--bg-danger) !important;
}

.bg-danger-light {
    background-color: var(--bg-danger-light) !important;
}

.bg-body {
    background-color: var(--bg-body) !important;
}

.bg-white {
    background-color: var(--bg-white) !important;
}

.bg-blue-jiliti {
    background-color: var(--bg-blue-jiliti) !important;
}

.btn-success {
    background-color: var(--bg-success) !important;
    color: #fff;
    border: 1px solid var(--bg-success);
}

.btn-success:hover {
    background-color: var(--bg-success);
    filter: brightness(90%);
}

.btn-secondary {
    background-color: var(--bg-secondary) !important;
    color: #fff;
    border: 1px solid var(--bg-secondary);
}

.btn-secondary:hover {
    background-color: var(--bg-secondary);
    filter: brightness(90%);
}

.btn-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--bg-primary);
    border: none;
}

.btn-secondary:hover {
    background-color: var(--bg-secondary);
    filter: brightness(90%);
}

/* Danger */
.btn-danger {
    background-color: var(--bg-danger);
    color: #fff;
    border: 1px solid var(--bg-danger);
}

.btn-danger:hover {
    filter: brightness(90%);
}

/* Danger Light */
.btn-danger-light {
    background-color: var(--bg-danger-light);
    color: #fff;
    border: 1px solid var(--bg-danger-light);
}

.btn-danger-light:hover {
    filter: brightness(90%);
}

/* Primary */
.btn-primary {
    background-color: var(--bg-primary);
    color: #fff;
    border: 1px solid var(--bg-primary);
}

.btn-primary:hover {
    filter: brightness(90%);
}

.btn-warning {
    background-color: var(--bg-warning);
    color: #382100;
    border: 1px solid var(--bg-warning);
}

.btn-warning:hover {
    filter: brightness(90%);
}

.btn-outline-action {
    border: 2px solid var(--bg-danger) !important;
    color: black !important;
}

.btn-outline-action:hover {
    border: 2px solid var(--bg-danger) !important;
    color: white !important;
    background-color: var(--bg-danger);
}

.btn-info {
    background-color: var(--bg-info);
    color: var(--bg-blue-jiliti);
    border: 1px solid var(--bg-info);
}

.btn-info:hover {
    filter: brightness(90%);
}

/* Blue Jiliti */
.btn-blue-jiliti {
    background-color: var(--bg-blue-jiliti);
    color: #fff;
    border: 1px solid var(--bg-blue-jiliti);
}

.btn-blue-jiliti:hover {
    filter: brightness(115%);
}

/* Body (clair) */
.btn-body {
    background-color: var(--bg-body);
    color: #333;
    border: 1px solid #ccc;
}

.btn-body:hover {
    filter: brightness(95%);
}

/* White */
.btn-white {
    background-color: var(--bg-white);
    color: #333;
    border: 1px solid #ddd;
}

.btn-white:hover {
    filter: brightness(95%);
}


.border-success {
    border-color: var(--bg-success) !important;
}

.border-primary {
    border-color: var(--bg-primary) !important;
}

.border-danger {
    border-color: var(--bg-danger) !important;
}

.border-warning {
    border-color: var(--bg-warning) !important;
}

.border-info {
    border-color: var(--bg-info) !important;
}

.border-danger-light {
    border-color: var(--bg-danger-light) !important;
}

.border-body {
    border-color: var(--bg-body) !important;
}

.border-white {
    border-color: var(--bg-white) !important;
}

.border-blue-jiliti {
    border-color: var(--bg-blue-jiliti) !important;
}


.btn-outline-success {
    background-color: transparent;
    color: var(--bg-success);
    border: 1px solid var(--bg-success);
}

.btn-outline-success:hover {
    background-color: var(--bg-success);
    color: #fff;
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
}

.btn-outline-primary:hover {
    background-color: var(--bg-primary);
    color: #fff;
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--bg-danger);
    border: 1px solid var(--bg-danger);
}

.btn-outline-danger:hover {
    background-color: var(--bg-danger);
    color: #fff;
}

.btn-outline-danger-light {
    background-color: transparent;
    color: var(--bg-danger-light);
    border: 1px solid var(--bg-danger-light);
}

.btn-outline-danger-light:hover {
    background-color: var(--bg-danger-light);
    color: #fff;
}

.btn-outline-warning {
    background-color: transparent;
    color: var(--bg-warning);
    border: 1px solid var(--bg-warning);
}

.btn-outline-warning:hover {
    background-color: var(--bg-warning);
    color: #212529; /* text dark for better contrast */
}

.btn-outline-info {
    background-color: transparent;
    color: var(--bg-info);
    border: 1px solid var(--bg-info);
}

.btn-outline-info:hover {
    background-color: var(--bg-info);
    color: #fff;
}

.btn-outline-blue-jiliti {
    background-color: transparent;
    color: var(--bg-blue-jiliti);
    border: 1px solid var(--bg-blue-jiliti);
}

.btn-outline-blue-jiliti:hover {
    background-color: var(--bg-blue-jiliti);
    color: #fff;
}

.btn-success:disabled {
    background-color: var(--bg-success);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-secondary:disabled {
    background-color: var(--bg-secondary);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-primary:disabled {
    background-color: var(--bg-primary);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-danger:disabled {
    background-color: var(--bg-danger);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-danger-light:disabled {
    background-color: var(--bg-danger-light);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-warning:disabled {
    background-color: var(--bg-warning);
    opacity: 0.65;
    color: #212529;
    cursor: not-allowed;
}

.btn-info:disabled {
    background-color: var(--bg-info);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-body:disabled {
    background-color: var(--bg-body);
    opacity: 0.65;
    color: #212529;
    cursor: not-allowed;
}

.btn-white:disabled {
    background-color: var(--bg-white);
    opacity: 0.65;
    color: #212529;
    cursor: not-allowed;
}

.btn-blue-jiliti:disabled {
    background-color: var(--bg-blue-jiliti);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.btn-purple:disabled {
    background-color: var(--bg-purple);
    opacity: 0.65;
    color: #fff;
    cursor: not-allowed;
}

.text-bg-success {
    background-color: var(--bg-success) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: #fff !important;
}

.text-bg-primary {
    background-color: var(--bg-primary) !important;
    color: #fff !important;
}

.text-bg-danger {
    background-color: var(--bg-danger) !important;
    color: #fff !important;
}

.text-bg-danger-light {
    background-color: var(--bg-danger-light) !important;
    color: #fff !important;
}

.text-bg-warning {
    background-color: var(--bg-warning) !important;
    color: #212529 !important;
}

.text-bg-info {
    background-color: var(--bg-info) !important;
    color: #fff !important;
}

.text-bg-body {
    background-color: var(--bg-body) !important;
    color: #212529 !important;
}

.text-bg-white {
    background-color: var(--bg-white) !important;
    color: #212529 !important;
}

.text-bg-blue-jiliti {
    background-color: var(--bg-blue-jiliti) !important;
    color: #fff !important;
}

.text-bg-purple {
    background-color: var(--bg-purple) !important;
    color: #fff !important;
}

.btn {
    border-radius: 24px;
}

.form-control, .form-select, .ts-control {
    border: none !important;
    background-color: var(--bg-input) !important;
    border-radius: 24px !important;
    padding: 0.8rem 1.5rem !important;
}

.input-group .form-control:first-of-type {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}

.navbar {
    border: none;
    border-radius: 32px;
    padding: 0.4rem 1.5rem;
}

.navbar .navbar-brand {
    color: #2c385b;
}

.card, .modal-content {
    border: none;
    border-radius: 24px;
    padding: 2rem;
}

.card-header, .modal-header {
    padding: 0;
    margin-bottom: 0;
    color: black;
    background-color: unset;
    border-bottom: unset;
}

.card-title, .modal-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.bg-purple {
    background-color: var(--bg-purple);
}

.list-group-pill {
    background-color: var(--bg-secondary);
    border-radius: 24px;
    margin-bottom: 1px;
}

.alert {
    border-radius: 32px;
}

.btn-square {
    border-radius: 4px !important;
}

.nav-pills .nav-link {
    color: black;
    border: unset !important;
}

.nav-pills .nav-link.active {
    font-weight: bold;
    color: white !important;
    background-color: var(--bg-blue-jiliti);
    border-radius: 24px;
}

.nav-tabs .nav-link {
    margin-bottom: unset !important;
    border: 2px solid transparent !important;
    border-radius: 24px;
}

.nav-tabs .nav-link:hover:not(.active) {
    border: 2px solid var(--bg-danger) !important;
}

.card-actions {
    display: flex;
    justify-content: space-between;
}

.card-actions .nav-actions {
    display: flex;
    align-items: center;
}

.card-actions .nav-actions .nav-actions-link {
    color: black;
    font-size: 1.8rem;
}

.card-actions a {
    color: black;
    text-decoration: unset !important;
}

.card-actions .btn-card-action {
    background-color: white;
    border-radius: 18px;
    padding: 0.8rem;
    border: none !important;
}

.dropdown-menu {
    position: absolute;
    width: 400px;
    padding: 1rem;
    border-radius: 24px;
    border: unset;
}

.dropdown-item {
    border-radius: 24px;
}

.dropdown-item.active {
    background-color: var(--bg-blue-jiliti);
    color: white;
    font-weight: bold;
}


.nav-link.active.tab-btn {
    border: 2px solid var(--bg-danger) !important;
}

.floating-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
}