/**
 * @file
 * Color module base stylesheet for LFK Bootstrap theme.
 *
 * This file defines CSS Custom Properties that override Bootstrap variables.
 * The Color module will rewrite the hex values in this file when colors are changed.
 *
 * DO NOT MINIFY - Color module needs to parse hex color codes.
 */

:root {
  /* IMPORTANT: Order of variables MUST match order of fields in color.inc */
  /* Color module maps by POSITION, not by variable name */
  /* Each color MUST be unique for Color module to work correctly */
  /* Variables customizables via l'interface admin Color */

  /* Position 1 → 'primary' field */
  --lfk-primary: #2198fd;

  /* Position 2 → 'primarylight' field */
  --lfk-primary-light: #ebf5fe;

  /* Position 3 → 'secondary' field */
  --lfk-secondary: #2198fd;

  /* Position 4 → 'success' field */
  --lfk-success: #5dc597;

  /* Position 5 → 'warning' field */
  --lfk-warning: #fdb816;

  /* Position 6 → 'danger' field */
  --lfk-danger: #e5434f;

  /* Position 7 → 'info' field */
  --lfk-info: #2198fc;

  /* Position 8 → 'link' field */
  --lfk-link-color: #2198fb;

  /* Position 9 → 'linkhover' field */
  --lfk-link-hover-color: #2198fa;

  /* Position 10 → 'text' field */
  --lfk-body-color: #667080;

  /* Position 11 → 'headings' field */
  --lfk-headings-color: #58595a;

  /* Position 12 → 'border' field */
  --lfk-border-color: #8e98a8;

  /* Position 13 → 'formtext' field */
  --lfk-form-text-color: #8e98a7;

  /* Position 14 → 'darkbg' field */
  --lfk-dark-bg: #66707f;

  /* Position 15 → 'titledeco' field */
  --lfk-title-decoration: #2198ff;
}

/*  */

/* Variables constantes non modifiables */
:root {
  --lfk-white: #ffffff;
  --lfk-dark-text: #667082;
}

/* Apply CSS Custom Properties to Elements */

/* Primary color applications */
.btn-primary,
.bg-primary,
.badge-primary {
  background-color: var(--lfk-primary) !important;
  border-color: var(--lfk-primary) !important;
}

.btn-primary.btn-outline,
.bg-primary.btn-outline,
.badge-primary.btn-outline {
  background-color: var(--lfk-white) !important;
  border-color: var(--lfk-primary) !important;
  color: var(--lfk-primary) !important;
}

.text-primary,
.link-primary {
  color: var(--lfk-primary) !important;
}

/* Secondary color applications */
.btn-secondary,
.bg-secondary {
  background-color: var(--lfk-secondary) !important;
  border-color: var(--lfk-secondary) !important;
}

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

/* Success color applications */
/* .btn-success,
.bg-success,
.alert-success {
  background-color: var(--lfk-success) !important;
  border-color: var(--lfk-success) !important;
} */

.text-success {
  color: var(--lfk-success) !important;
}

/* Warning color applications */
/* .btn-warning,
.bg-warning,
.alert-warning {
  background-color: var(--lfk-warning) !important;
  border-color: var(--lfk-warning) !important;
} */

.text-warning {
  color: var(--lfk-warning) !important;
}

/* Danger color applications */
/* .btn-danger,
.bg-danger,
.alert-danger {
  background-color: var(--lfk-danger) !important;
  border-color: var(--lfk-danger) !important;
} */

.text-danger {
  color: var(--lfk-danger) !important;
}

/* Info color applications */
.btn-info,
.bg-info,
.alert-info {
  /* background-color: var(--lfk-info) !important; */
  border-color: var(--lfk-info) !important;
}

.text-info {
  color: var(--lfk-info) !important;
}

/* Links */
a {
  color: var(--lfk-link-color);
}

a:hover,
a:focus {
  color: var(--lfk-link-hover-color);
}

a.wrapper-speed-nav {
  color: var(--lfk-body-color) !important;
}

a.wrapper-speed-nav:hover,
a.wrapper-speed-nav:focus {
  color: var(--lfk-link-hover-color) !important;
}


/* Body and text */
body {
  color: var(--lfk-body-color);
  background-color: var(--lfk-primary-light);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--lfk-headings-color) !important;
}

/* Borders */
.border,
.card,
.form-control,
.table {
  border-color: var(--lfk-border-color) !important;
}

#userDropdown {
  border-color: var(--lfk-primary) !important;
  ;
}

/* Navigation and header elements */
.navbar-light .navbar-nav .nav-link {
  color: var(--lfk-body-color);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--lfk-link-hover-color);
}

/* Pagination */
.pagination .page-link {
  color: var(--lfk-link-color);
  border-color: var(--lfk-border-color);
}

.pagination .page-link:hover {
  color: var(--lfk-link-hover-color);
  background-color: var(--lfk-primary-light);
  border-color: var(--lfk-border-color);
}

.pagination .page-item.active .page-link {
  background-color: var(--lfk-primary);
  border-color: var(--lfk-primary);
  color: var(--lfk-white);
}

/* Breadcrumbs */
.breadcrumb-item.active {
  color: var(--lfk-dark-text);
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--lfk-secondary);
}

/* Forms */
.form-control:focus {
  border-color: var(--lfk-primary);
}

.form-label {
  color: var(--lfk-form-text-color);
}

/* Cards */
.card {
  background-color: white;
  border-color: var(--lfk-border-color);
}

/* Accordion */
.accordion-button {
  color: var(--lfk-dark-text);
  background-color: var(--lfk-primary-light);
}

.accordion-button:not(.collapsed) {
  color: var(--lfk-dark-text);
  background-color: var(--lfk-primary-light);
}

/* Tables */
.table-hover tbody tr:hover {
  background-color: var(--lfk-primary-light);
}

/* ========================================================================== */
/* Overrides pour nouvelles variables (Phase 2) */
/* ========================================================================== */

/* Form text descriptions */
.form-text,
.form-item__description {
  color: var(--lfk-form-text-color) !important;
}

/* Light/Dark backgrounds */
.bg-light {
  background-color: var(--lfk-primary-light) !important;
}

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

.text-dark {
  color: var(--lfk-dark-bg) !important;
}

/* ========================================================================== */
/* Overrides additionnels pour classes Bootstrap courantes */
/* ========================================================================== */

/* Badges */
.badge-secondary {
  background-color: var(--lfk-secondary) !important;
}

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

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

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

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

/* List groups */
.list-group-item-primary {
  background-color: var(--lfk-primary-light) !important;
  border-color: var(--lfk-primary) !important;
  color: var(--lfk-dark-bg);
}

.list-group-item-secondary {
  background-color: var(--lfk-primary-light) !important;
  border-color: var(--lfk-secondary) !important;
}

/* Buttons hover states - important pour feedback visuel */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lfk-primary) !important;
  border-color: var(--lfk-primary) !important;
  opacity: 0.9;
}

.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus {
  background-color: var(--lfk-primary) !important;
  border-color: var(--lfk-primary) !important;
  color: var(--lfk-white) !important;
}


.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--lfk-secondary) !important;
  border-color: var(--lfk-secondary) !important;
  opacity: 0.9;
}

/* Alert variants */
.alert-success {
  border-color: var(--lfk-success) !important;
  color: var(--lfk-success) !important;
}

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

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