/* =============================
   🎨 Thème personnalisé MYFact
   Pour Bootstrap 5.1.3
   ============================= */

:root {
  --bs-primary: #4a6fa5;
  --bs-secondary: #94c973;
  --bs-light: #f2f5f9;
  --bs-dark: #2d2d2d;
  --bs-body-bg: var(--bs-light);
  --bs-body-color: var(--bs-dark);
  --bs-card-bg: #ffffff;
  --bs-border-color: #dee2e6;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #3e5e88;
  --bs-btn-hover-bg: #3e5e88;
}

/* ==== Base & Typo ==== */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}
a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* ==== Navbar & Sidebar ==== */
.navbar, .offcanvas, .sidebar, .bg-primary {
  background-color: var(--bs-primary) !important;
  color: #fff;
}
.navbar a, .sidebar a {
  color: #fff;
}
.navbar a:hover, .sidebar a:hover {
  color: #dbe4f2;
}

.navbar-secondary{
  background-color: #FFFFFF !important;
  color: var(--bs-primary) !important;
}

.navbar-secondary a{
  color: var(--bs-primary) !important;
  text-decoration: none !important;
}

.navbar-secondary a:hover{
  color: var(--bs-btn-hover-bg) !important;
  text-decoration: none !important;
}

.dd_mnu{
  color: var(--bs-primary) !important;
}

.dd_mnu:hover{
  color: var(--bs-btn-hover-bg) !important;
}

/* ==== Buttons ==== */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-bg);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}
.btn-secondary:hover {
  background-color: #7fb05d;
  border-color: #7fb05d;
}

/* ==== Cards ==== */
.card {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}
.card-header, .card-footer {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

/* ==== Forms ==== */
.form-control, .form-select {
  background-color: #fff;
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
}

/* ==== Alerts ==== */
.alert-primary {
  background-color: #e6ecf6;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.alert-secondary {
  background-color: #e8f4e3;
  color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

/* ==== Badges ==== */
.badge-primary {
  background-color: var(--bs-primary);
}
.badge-secondary {
  background-color: var(--bs-secondary);
}

/* ==== Tables ==== */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(74, 111, 165, 0.03);
}
.table-hover > tbody > tr:hover {
  background-color: rgba(74, 111, 165, 0.05);
}

/* ==== Pagination ==== */
.page-link {
  color: var(--bs-primary);
}
.page-link:hover {
  background-color: var(--bs-light);
  color: var(--bs-primary);
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ==== Progress Bar ==== */
.progress-bar {
  background-color: var(--bs-secondary);
}

/* ==== Modal ==== */
.modal-content {
  background-color: var(--bs-card-bg);
  /* border: 1px solid var(--bs-border-color); */
}

/* ==== Tooltip ==== */
.tooltip-inner {
  background-color: var(--bs-dark);
  color: #fff;
}

/* ==== Toast ==== */
.toast {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

/* ==== Utility overrides ==== */
.bg-light {
  background-color: var(--bs-light) !important;
}
.text-primary {
  color: var(--bs-primary) !important;
}
.text-secondary {
  color: var(--bs-secondary) !important;
}
.border-primary {
  border-color: var(--bs-primary) !important;
}
.border-secondary {
  border-color: var(--bs-secondary) !important;
}

/* ==== Accordion, Tabs, Navs, List Groups etc. ==== */
.accordion-button:not(.collapsed) {
  background-color: var(--bs-light);
  color: var(--bs-primary);
}
.nav-tabs .nav-link.active {
  background-color: var(--bs-light);
  border-color: var(--bs-border-color) var(--bs-border-color) #fff;
  color: var(--bs-primary);
}
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* === MY CUSTOM CSS === */

.pointer{
    cursor: pointer;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.custom-control-label {
    color: #000000 !important;
    font-weight: 400 !important;
}

.custom-control-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 1rem;
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
    background-size: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #dee2e6;
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4a6fa5 !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.modal-header{
  background: var(--bs-primary);
  color: #FFFFFF !important;
}

.btn-close{
  background-color: #FFFFFF !important;
}