:root {
  /* Green Maroc */
  --green-maroc: #006233;
  --green-maroc-rgb: 0, 98, 51;          /* for rgba() usage */
  --green-maroc-light: #00874a;          /* lighter variant */
  --green-maroc-lighter: #00a85c;        /* hover/accent */
  --green-maroc-dark: #004d28;           /* darker variant */
  --green-maroc-subtle: #e6f2ec;         /* background tint */
  --green-maroc-subtle-border: #b3d9c4;  /* subtle border */
  --green-maroc-emphasis: #003d1f;       /* text on light bg */
  /* Red Maroc */
  --red-maroc: #c1272d;
  --red-maroc-rgb: 193, 39, 45;
  --red-maroc-light: #d93b42;
  --red-maroc-lighter: #e85a60;
  --red-maroc-dark: #9e1f24;
  --red-maroc-subtle: #faeaeb;
  --red-maroc-subtle-border: #f0b8ba;
  --red-maroc-emphasis: #7a1518;

  /* Gradients */
  --green-maroc-gradient: linear-gradient(135deg, var(--green-maroc) 0%, var(--green-maroc-light) 100%);
  --green-maroc-gradient-subtle: linear-gradient(135deg, var(--green-maroc-subtle) 0%, #ccead8 100%);
  --green-maroc-gradient-dark: linear-gradient(135deg, var(--green-maroc-dark) 0%, var(--green-maroc) 100%);

  /* Red gradients */
  --red-maroc-gradient: linear-gradient(135deg, var(--red-maroc) 0%, var(--red-maroc-light) 100%);
  --red-maroc-gradient-subtle: linear-gradient(135deg, var(--red-maroc-subtle) 0%, #f7d0d1 100%);
  --red-maroc-gradient-dark: linear-gradient(135deg, var(--red-maroc-dark) 0%, var(--red-maroc) 100%);

  /* Combined Moroccan flag gradient */
  --maroc-gradient: linear-gradient(135deg, var(--red-maroc) 0%, var(--red-maroc-dark) 50%, var(--green-maroc-dark) 80%, var(--green-maroc) 100%);
}

/* Text */
.text-green-maroc         { color: var(--green-maroc); }
.text-green-maroc-light   { color: var(--green-maroc-light); }
.text-green-maroc-emphasis{ color: var(--green-maroc-emphasis); }

/* Background */
.bg-green-maroc           { background-color: var(--green-maroc); color: #fff; }
.bg-green-maroc-subtle    { background-color: var(--green-maroc-subtle); color: var(--green-maroc-emphasis); }

/* Green gradient backgrounds */
.bg-green-maroc-gradient        { background: var(--green-maroc-gradient); color: #fff; }
.bg-green-maroc-gradient-subtle { background: var(--green-maroc-gradient-subtle); color: var(--green-maroc-emphasis); }
.bg-green-maroc-gradient-dark   { background: var(--green-maroc-gradient-dark); color: #fff; }

/* Border */
.border-green-maroc       { border-color: var(--green-maroc); }
.border-green-maroc-subtle{ border-color: var(--green-maroc-subtle-border); }

/* Badge / pill pattern like CoreUI */
.badge-green-maroc {
  background-color: var(--green-maroc-subtle);
  color: var(--green-maroc-emphasis);
  border: 1px solid var(--green-maroc-subtle-border);
}

/* Green button */
.btn-green-maroc {
  background-color: var(--green-maroc-light);
  border-color: var(--green-maroc-light);
  color: #fff;
}

.btn-green-maroc:hover,
.btn-green-maroc:focus,
.btn-green-maroc:active,
.btn-green-maroc.active,
.btn-green-maroc.show,
.btn-green-maroc.dropdown-toggle.show {
  background-color: var(--green-maroc);
  border-color: var(--green-maroc);
  color: #fff;
}

.btn-green-maroc:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(var(--green-maroc-rgb), 0.4);
}

.btn-outline-green-maroc {
  color: var(--green-maroc);
  border-color: var(--green-maroc);
}
.btn-outline-green-maroc:hover {
  background-color: var(--green-maroc);
  color: #fff;
}

/* Gradient buttons */
.btn-green-maroc-gradient {
  background: var(--green-maroc-gradient);
  border: none;
  color: #fff;
}
.btn-green-maroc-gradient:hover {
  background: var(--green-maroc-gradient-dark);
  color: #fff;
}

/* ----- RED MAROC ----- */

/* Text */
.text-red-maroc {color: var(--red-maroc); }
.text-red-maroc-light {color: var(--red-maroc-light); }
.text-red-maroc-emphasis {color: var(--red-maroc-emphasis); }

/* Background */
.bg-red-maroc {background-color: var(--red-maroc); color: #fff; }
.bg-red-maroc-subtle {background-color: var(--red-maroc-subtle); color: var(--red-maroc-emphasis); }

/* Red gradient backgrounds */
.bg-red-maroc-gradient          { background: var(--red-maroc-gradient); color: #fff; }
.bg-red-maroc-gradient-subtle   { background: var(--red-maroc-gradient-subtle); color: var(--red-maroc-emphasis); }
.bg-red-maroc-gradient-dark     { background: var(--red-maroc-gradient-dark); color: #fff; }

/* Border */
.border-red-maroc {
  border-color: var(--red-maroc);
}

.border-red-maroc-subtle {
  border-color: var(--red-maroc-subtle-border);
}

/* Badge / pill pattern */
.badge-red-maroc {
  background-color: var(--red-maroc-subtle);
  color: var(--red-maroc-emphasis);
  border: 1px solid var(--red-maroc-subtle-border);
}

/* Red buttons */
.btn-red-maroc {
    background-color: var(--red-maroc-light);
    border-color: var(--red-maroc-light);
    color: #fff;
}
.btn-red-maroc:hover,
.btn-red-maroc:focus,
.btn-red-maroc:active,
.btn-red-maroc.active,
.btn-red-maroc.show,
.btn-red-maroc.dropdown-toggle.show {
    background-color: var(--red-maroc);
    border-color: var(--red-maroc);
    color: #fff;
}
.btn-red-maroc:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--red-maroc-rgb), 0.4);
}

.btn-outline-red-maroc {
  color: var(--red-maroc);
  border-color: var(--red-maroc);
}

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

/* Gradient buttons */
.btn-red-maroc-gradient {
  background: var(--red-maroc-gradient);
  border: none;
  color: #fff;
}
.btn-red-maroc-gradient:hover {
  background: var(--red-maroc-gradient-dark);
  color: #fff;
}

/* Moroccan flag gradient */
.bg-maroc-gradient {
  background: var(--maroc-gradient);
  color: #fff;
}

/* ----- HTMX Indicator ----- */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator{ display:inline; }

/* ----- Multiselect ----- */
/* Force the dropdown options list to scroll */
.form-multi-select-options {
  max-height: 260px !important; /* Set your desired height */
  overflow-y: auto !important;
}

/* Keep the input box height fixed and scroll selected tags */
.form-multi-select-selection {
  max-height: 110px;
  overflow-y: auto;
}

#sidebar.sidebar-narrow-unfoldable .d-sidebar-narrow-unfoldable-none {
    display: none !important;
}