:root {
  --rz-primary: var(--mk-primary) !important;
  --rz-white: #ffffff;
  --rz-black: #000000;
  --rz-base: #dfe5ec;
  --rz-base-50: #f8fafb;
  --rz-base-100: #f3f6f9;
  --rz-base-200: #e3eaf2;
  --rz-base-300: #dfe5ec;
  --rz-base-400: #dbe0e6;
  --rz-base-500: #d7dbe0;
  --rz-base-600: #c6cbd2;
  --rz-base-700: #74787e;
  --rz-base-800: #45494f;
  --rz-base-900: #1b1d20;
  --rz-grid-border-radius: calc(var(--rz-border-radius) * 3) !important;
  --rz-border-radius: 4px !important;
  --rz-panel-menu-item-active-background-color: var(--mk-sidebar-active-background);
  --rz-panel-menu-item-active-color: var(--mk-sidebar-active-color);
  --rz-panel-menu-item-color: var(--rz-base-800) !important;
  --rz-grid-header-background-color: #f8fafb !important;
  --rz-grid-frozen-cell-background-color: var(--rz-base-100) !important;
  /*MK Custom Colors*/
  --mk-black-color: #2a2a2a;
  --mk-primary-color: var(--mk-primary);
  --mk-secondary-color: var(--mk-secondary);
  --mk-tertiary-color: var(--mk-accent);
  --mk-tertiary-dark: var(--mk-accent-dark);
  --mk-text-color: var(--mk-text);
  --mk-focus-border-color: var(--mk-primary-color);
  /*Text Colors*/
  --mk-text: #040316;
  /* Couleurs primaires - Bleu */
  --mk-primary: #0c2a61;
  --mk-primary-dark: #09214e;
  --mk-primary-light: #1a3c78;
  --mk-primary-lighter: #678bcb42;
  --mk-primary-dark: #091f48;
  --mk-primary-darker: #061530;
  /* Couleurs secondaires - Vert émeraude */
  --mk-secondary: #5a6b8c;
  --mk-secondary-hover: #4e5d7a;
  --mk-secondary-light: #259472;
  --mk-secondary-lighter: #30ab89;
  --mk-secondary-dark: #53617c;
  --mk-secondary-darker: #0e4e37;
  /* Couleurs tertiaires - Ambre doré */
  --mk-accent: #ff6347;
  --mk-accent-hover: #e6583e;
  --mk-accent-light: #e29f3c;
  --mk-accent-lighter: #eab254;
  --mk-accent-dark: #e6583e;
  --mk-accent-darker: #9a6318;
  /* Couleurs de scrollbar - Mode clair */
  --mk-scrollbar-track: #f0f0f0;
  --mk-scrollbar-thumb: #c0c0c0;
  --mk-scrollbar-thumb-hover: #a0a0a0;
  --mk-scrollbar-thumb-active: #909090;
  /* Dimensions */
  --mk-scrollbar-width: 12px;
  --mk-scrollbar-thumb-width: 4px;
  --mk-scrollbar-thumb-height: 80px;
  --mk-scrollbar-border-radius: 4px;
  /* Animation */
  --mk-scrollbar-transition: all 0.2s ease;
  /*Sidebar*/
  --mk-sidebar-active-background: var(--mk-primary-lighter);
  --mk-sidebar-active-color: var(--mk-primary);
}

.rz-layout.rz-material {
  --rz-grid-header-background-color: #f8fafb !important;
  --rz-base-background-color: var(--rz-base-50);
}


  .rz-layout.rz-material .rz-data-row:hover {
    background: #E3EAF2;
  }

/*Fond du row selectionner*/
.rz-layout tr.rz-state-highlight.rz-data-row {
  background: #DFEBFF;
}

/*text row selectionner*/
.rz-layout .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
  color: #3a385d;
}


.rz-dialog {
  --rz-background: radial-gradient(circle, #ffffff, #f3f4f6);
  --rz-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  --rz-border-radius: 12px;
  --rz-padding: 25px;
  --rz-border: 1px solid #e0e0e0;
  --rz-overflow: hidden;
  --rz-animation: fadeIn 0.5s ease-in-out;
  --rz-font-family: 'Poppins', sans-serif;
}



/*
     - =====================================X=====================================
  */
/*
   -Override Bootstrap CSS variables
  */
/*
  -Don't forgot to add !important at end otherwise it won't work
  */
body .modal-backdrop.show {
  opacity: 0 !important;
}

body .text-black {
  color: var(--mk-black-color) !important;
}

body .text-primary {
  color: var(--mk-primary-color) !important;
}

body .text-secondary {
  color: var(--mk-secondary-color) !important;
}

body .text-tertiary {
  color: var(--mk-tertiary-color) !important;
}

.text-sm {
  font-size: 0.65rem !important;
}

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

/*
   -Customize Bootstrap Navpills (Tabs)
  */

.nav-pills {
  border: 2px solid var(--mk-primary-color);
}

  .nav-pills .nav-link {
    border-radius: 30px !important;
    width: auto;
    color: var(--mk-primary-color);
    background: transparent;
  }

    .nav-pills .nav-link:hover {
      color: var(--mk-primary-color);
    }

    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
      color: var(--mk-secondary-color);
      background: var(--mk-primary-color) !important;
      border-bottom: none;
    }

/*
   -Removing the outline on the focus
  */

.btn {
  font-size: 1.03rem;
  padding: 0.55rem auto !important;
  outline: none;
  border: 1px solid var(--mk-primary-color) !important;
}

  /*
      -For Button (in v5.2 and lower)
   */
  .btn:focus,
  .btn:active,
  .btn.active:focus {
    outline: none;
    box-shadow: none !important;
  }

/*
      -For Input (input, checkbox, radio, etc)
  */
body .mk-form-field-content label {
  margin-bottom: 0.2rem;
}

body .mk-form-field-content input {
  caret-color: var(--mk-text-color);
}

body .mk-form-field-content .form-control {
  border: 2px solid var(--mk-secondary-color) !important;
  background: initial;
  color: var(--mk-text-color) !important;
}

  body .mk-form-field-content .form-control:focus,
  body .mk-form-field-content .form-control:active,
  body .mk-form-field-content .form-control.active:focus {
    outline: none;
    box-shadow: none !important;
    border: 2px solid var(--mk-focus-border-color) !important;
  }

.form-check-input:focus,
.form-check-input:active,
.form-check-input.active:focus {
  outline: none;
  box-shadow: none !important;
  border: 2px solid var(--mk-primary-color) !important;
}

.rz-material-dark .form-control:focus, .form-control:active, .form-control.active:focus {
  outline: none;
  box-shadow: none !important;
  border: 2px solid var(--mk-focus-border-color) !important;
}


/*
   -Customize the scrollbar
  */

/* Styles de base pour Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mk-scrollbar-thumb) var(--mk-scrollbar-track);
}

/* Styles pour Webkit (Chrome, Safari, Edge, etc.) */
::-webkit-scrollbar {
  width: var(--mk-scrollbar-width);
  height: var(--mk-scrollbar-width);
  transition: var(--mk-scrollbar-transition);
}

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

::-webkit-scrollbar-thumb {
  background: var(--mk-scrollbar-thumb);
  border-radius: var(--mk-scrollbar-border-radius);
  transition: var(--mk-scrollbar-transition);
  /* Centrer le thumb dans la track */
  border-left: calc((var(--mk-scrollbar-width) - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((var(--mk-scrollbar-width) - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  background-clip: content-box;
  /* Hauteur minimale pour le thumb */
  min-height: var(--mk-scrollbar-thumb-height);
}

  ::-webkit-scrollbar-thumb:hover {
    background: var(--mk-scrollbar-thumb-hover);
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:active {
    background: var(--mk-scrollbar-thumb-active);
    background-clip: content-box;
  }

/* Styles pour les boutons de défilement (flèches haut/bas) */
::-webkit-scrollbar-button {
  display: none;
}

/* Styles pour les coins de scrollbar */
::-webkit-scrollbar-corner {
  background: var(--mk-scrollbar-track);
}

/* Masquer les scrollbars horizontaux par défaut sauf si nécessaire */
::-webkit-scrollbar:horizontal {
  height: 8px;
}

/* Classe utilitaire pour forcer le mode sombre/clair */
.force-dark-scrollbar {
  --mk-scrollbar-track: #1e1e1e !important;
  --mk-scrollbar-thumb: #e0e0e0 !important;
  --mk-scrollbar-thumb-hover: #ffffff !important;
  --mk-scrollbar-thumb-active: #ffffff !important;
}

.force-light-scrollbar {
  --mk-scrollbar-track: #f0f0f0 !important;
  --mk-scrollbar-thumb: #c0c0c0 !important;
  --mk-scrollbar-thumb-hover: #a0a0a0 !important;
  --mk-scrollbar-thumb-active: #909090 !important;
}

/* Classe pour masquer les scrollbars tout en gardant la fonctionnalité */
.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Classe pour des scrollbars plus fins */
.thin-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  --mk-scrollbar-thumb-width: 2px;
  border-left: calc((8px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((8px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
}

/* Classe pour des scrollbars plus épais */
.thick-scrollbar::-webkit-scrollbar {
  width: 16px;
}

.thick-scrollbar::-webkit-scrollbar-thumb {
  --mk-scrollbar-thumb-width: 6px;
  border-left: calc((16px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((16px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
}