/**
 * custom-colors.css - Couleurs completes Yibo Suite
 * 
 * Modules et couleurs :
 * - General     : primary   (#0d6efd) - Bleu
 * - RH          : success   (#198754) - Vert
 * - Finances    : warning   (#ffc107) - Orange/Jaune
 * - Production  : danger    (#dc3545) - Rouge
 * - Gestion     : info      (#0dcaf0) - Cyan
 * - Communication: secondary (#6c757d) - Gris
 * - Utilisateurs: indigo    (#a370f7) - Indigo-300
 * - Documents   : yellow    (#ffcd39) - Yellow-400
 * 
 * Placement: frontend/public/web/assets/css/custom-colors.css
 */

/* ============================================
 * CSS VARIABLES
 * ============================================ */
:root {
  /* Bootstrap colors (reference) */
  --bs-primary: #0d6efd;
  --bs-success: #198754;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-info: #0dcaf0;
  --bs-secondary: #6c757d;
  
  /* Custom colors - Indigo (Utilisateurs) */
  --bs-indigo: #a370f7;
  --bs-indigo-hover: #8540f5;
  --bs-indigo-active: #6610f2;
  --bs-indigo-subtle: #e0cffc;
  --bs-indigo-dark: #4c0eb8;
  
  /* Custom colors - Yellow (Documents) */
  --bs-yellow: #ffcd39;
  --bs-yellow-hover: #ffc107;
  --bs-yellow-active: #e0a800;
  --bs-yellow-subtle: #fff3cd;
  --bs-yellow-dark: #997404;
}


/* ============================================
 * HERO SECTIONS - Tous les modules
 * ============================================ */

.hero-section {
  position: relative;
  overflow: hidden;
}

/* General - Primary (Bleu) */
.hero-section.bg-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
}

/* RH - Success (Vert) */
.hero-section.bg-success {
  background: linear-gradient(135deg, #198754 0%, #146c43 100%) !important;
}

/* Finances - Warning (Orange) */
.hero-section.bg-warning {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
  color: #000 !important;
}
.hero-section.bg-warning .opacity-75 {
  color: rgba(0, 0, 0, 0.75) !important;
}
.hero-section.bg-warning .btn-light {
  background-color: #fff;
  color: #000;
}
.hero-section.bg-warning .btn-outline-light {
  color: #000;
  border-color: rgba(0, 0, 0, 0.5);
}
.hero-section.bg-warning .btn-outline-light:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

/* Production - Danger (Rouge) */
.hero-section.bg-danger {
  background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
}

/* Gestion - Info (Cyan) */
.hero-section.bg-info {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%) !important;
  color: #000 !important;
}
.hero-section.bg-info .opacity-75 {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Communication - Secondary (Gris) */
.hero-section.bg-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #565e64 100%) !important;
}

/* Utilisateurs - Indigo (Violet) */
.hero-section.bg-indigo {
  background: linear-gradient(135deg, #a370f7 0%, #8540f5 100%) !important;
}

/* Documents - Yellow (Yellow-400) */
.hero-section.bg-yellow {
  background: linear-gradient(135deg, #ffcd39 0%, #ffc107 100%) !important;
  color: #212529 !important;
}
.hero-section.bg-yellow .opacity-75 {
  color: rgba(33, 37, 41, 0.75) !important;
}
.hero-section.bg-yellow .btn-light {
  background-color: #fff;
  color: #212529;
}
.hero-section.bg-yellow .btn-outline-light {
  color: #212529;
  border-color: rgba(33, 37, 41, 0.5);
}
.hero-section.bg-yellow .btn-outline-light:hover {
  background-color: rgba(33, 37, 41, 0.1);
  color: #212529;
}

/* Hero icon container */
.hero-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}


/* ============================================
 * MODAL HEADERS - Tous les modules
 * ============================================ */

.modal-header.bg-primary {
  background-color: #0d6efd !important;
  color: #fff;
  border-bottom-color: #0a58ca;
}

.modal-header.bg-success {
  background-color: #198754 !important;
  color: #fff;
  border-bottom-color: #146c43;
}

.modal-header.bg-warning {
  background-color: #ffc107 !important;
  color: #000;
  border-bottom-color: #e0a800;
}
.modal-header.bg-warning .btn-close {
  filter: none;
}

.modal-header.bg-danger {
  background-color: #dc3545 !important;
  color: #fff;
  border-bottom-color: #b02a37;
}

.modal-header.bg-info {
  background-color: #0dcaf0 !important;
  color: #000;
  border-bottom-color: #0aa2c0;
}
.modal-header.bg-info .btn-close {
  filter: none;
}

.modal-header.bg-secondary {
  background-color: #6c757d !important;
  color: #fff;
  border-bottom-color: #565e64;
}

.modal-header.bg-indigo {
  background-color: #a370f7 !important;
  color: #fff;
  border-bottom-color: #8540f5;
}

.modal-header.bg-yellow {
  background-color: #ffcd39 !important;
  color: #212529;
  border-bottom-color: #ffc107;
}

/* Close button white for dark backgrounds */
.modal-header.bg-primary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-danger .btn-close,
.modal-header.bg-secondary .btn-close,
.modal-header.bg-indigo .btn-close {
  filter: brightness(0) invert(1);
}

/* Close button dark for light backgrounds */
.modal-header.bg-yellow .btn-close {
  filter: none;
}


/* ============================================
 * CARD HEADERS - Tous les modules
 * ============================================ */

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-indigo,
.card-header.bg-yellow {
  color: #fff;
}

.card-header.bg-warning,
.card-header.bg-info {
  color: #000;
}

.card-header.bg-indigo {
  background-color: #a370f7 !important;
}

.card-header.bg-yellow {
  background-color: #ffcd39 !important;
}


/* ============================================
 * INDIGO (Violet) - Classes completes
 * ============================================ */

/* Background */
.bg-indigo {
  background-color: #a370f7 !important;
}
.bg-indigo-subtle {
  background-color: #e0cffc !important;
}

/* Text */
.text-indigo {
  color: #a370f7 !important;
}
.text-bg-indigo {
  background-color: #a370f7 !important;
  color: #fff !important;
}

/* Buttons */
.btn-indigo {
  background-color: #a370f7;
  border-color: #a370f7;
  color: #fff;
}
.btn-indigo:hover,
.btn-indigo:focus {
  background-color: #8540f5;
  border-color: #8540f5;
  color: #fff;
}
.btn-indigo:active {
  background-color: #6610f2;
  border-color: #6610f2;
  color: #fff;
}
.btn-indigo:focus {
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5);
}
.btn-indigo:disabled {
  background-color: #a370f7;
  border-color: #a370f7;
  opacity: 0.65;
}

.btn-outline-indigo {
  color: #a370f7;
  border-color: #a370f7;
  background-color: transparent;
}
.btn-outline-indigo:hover,
.btn-outline-indigo:focus,
.btn-outline-indigo:active {
  background-color: #a370f7;
  border-color: #a370f7;
  color: #fff;
}
.btn-outline-indigo:focus {
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.5);
}

/* Badge */
.badge.bg-indigo {
  background-color: #a370f7 !important;
  color: #fff;
}

/* Border */
.border-indigo {
  border-color: #a370f7 !important;
}

/* Alert */
.alert-indigo {
  background-color: #e0cffc;
  border-color: #d4c4f5;
  color: #4c0eb8;
}
.alert-indigo .alert-link {
  color: #36205d;
}

/* Table */
.table-indigo {
  --bs-table-bg: #e0cffc;
  --bs-table-striped-bg: #ddd2f0;
  --bs-table-hover-bg: #d1c5e4;
  --bs-table-border-color: #c5b8d8;
  color: #4c0eb8;
}

/* List Group */
.list-group-item-indigo {
  background-color: #e0cffc;
  color: #4c0eb8;
}
.list-group-item-indigo.list-group-item-action:hover,
.list-group-item-indigo.list-group-item-action:focus {
  background-color: #ddd2f0;
  color: #4c0eb8;
}

/* Spinner */
.spinner-border.text-indigo,
.spinner-grow.text-indigo {
  color: #a370f7 !important;
}

/* Progress Bar */
.progress-bar.bg-indigo {
  background-color: #a370f7 !important;
}

/* Link */
.link-indigo {
  color: #a370f7;
}
.link-indigo:hover,
.link-indigo:focus {
  color: #8540f5;
}

/* Form */
.form-check-input:checked.form-check-indigo {
  background-color: #a370f7;
  border-color: #a370f7;
}
.form-control:focus.border-indigo {
  border-color: #a370f7;
  box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}


/* ============================================
 * YELLOW (Vert-citron) - Classes completes
 * ============================================ */

/* Background */
.bg-yellow {
  background-color: #ffcd39 !important;
}
.bg-yellow-subtle {
  background-color: #fff3cd !important;
}

/* Text */
.text-yellow {
  color: #ffcd39 !important;
}
.text-yellow-dark {
  color: #997404 !important;
}
.text-bg-yellow {
  background-color: #ffcd39 !important;
  color: #fff !important;
}

/* Buttons */
.btn-yellow {
  background-color: #ffcd39;
  border-color: #ffcd39;
  color: #fff;
}
.btn-yellow:hover,
.btn-yellow:focus {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #fff;
}
.btn-yellow:active {
  background-color: #e0a800;
  border-color: #e0a800;
  color: #fff;
}
.btn-yellow:focus {
  box-shadow: 0 0 0 0.25rem rgba(132, 204, 22, 0.5);
}
.btn-yellow:disabled {
  background-color: #ffcd39;
  border-color: #ffcd39;
  opacity: 0.65;
}

.btn-outline-yellow {
  color: #ffc107;
  border-color: #ffcd39;
  background-color: transparent;
}
.btn-outline-yellow:hover,
.btn-outline-yellow:focus,
.btn-outline-yellow:active {
  background-color: #ffcd39;
  border-color: #ffcd39;
  color: #fff;
}
.btn-outline-yellow:focus {
  box-shadow: 0 0 0 0.25rem rgba(132, 204, 22, 0.5);
}

/* Badge */
.badge.bg-yellow {
  background-color: #ffcd39 !important;
  color: #fff;
}

/* Border */
.border-yellow {
  border-color: #ffcd39 !important;
}

/* Alert */
.alert-yellow {
  background-color: #fff3cd;
  border-color: #d9f99d;
  color: #997404;
}
.alert-yellow .alert-link {
  color: #2b4210;
}

/* Table */
.table-yellow {
  --bs-table-bg: #fff3cd;
  --bs-table-striped-bg: #dff0bf;
  --bs-table-hover-bg: #d2e4b3;
  --bs-table-border-color: #c5d8a7;
  color: #997404;
}

/* List Group */
.list-group-item-yellow {
  background-color: #fff3cd;
  color: #997404;
}
.list-group-item-yellow.list-group-item-action:hover,
.list-group-item-yellow.list-group-item-action:focus {
  background-color: #dff0bf;
  color: #997404;
}

/* Spinner */
.spinner-border.text-yellow,
.spinner-grow.text-yellow {
  color: #ffcd39 !important;
}

/* Progress Bar */
.progress-bar.bg-yellow {
  background-color: #ffcd39 !important;
}

/* Link */
.link-yellow {
  color: #ffc107;
}
.link-yellow:hover,
.link-yellow:focus {
  color: #e0a800;
}

/* Form */
.form-check-input:checked.form-check-yellow {
  background-color: #ffcd39;
  border-color: #ffcd39;
}
.form-control:focus.border-yellow {
  border-color: #ffcd39;
  box-shadow: 0 0 0 0.25rem rgba(132, 204, 22, 0.25);
}


/* ============================================
 * ICON CONTAINERS - Tous les modules
 * ============================================ */

.icon-container {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-container-primary {
  background-color: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.icon-container-success {
  background-color: rgba(25, 135, 84, 0.1);
  color: #198754;
}
.icon-container-warning {
  background-color: rgba(255, 193, 7, 0.15);
  color: #997404;
}
.icon-container-danger {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.icon-container-info {
  background-color: rgba(13, 202, 240, 0.15);
  color: #087990;
}
.icon-container-secondary {
  background-color: rgba(108, 117, 125, 0.1);
  color: #6c757d;
}
.icon-container-indigo {
  background-color: rgba(111, 66, 193, 0.1);
  color: #a370f7;
}
.icon-container-yellow {
  background-color: rgba(132, 204, 22, 0.1);
  color: #ffc107;
}


/* ============================================
 * GRADIENT BACKGROUNDS
 * ============================================ */

.bg-gradient-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
  color: #fff;
}
.bg-gradient-success {
  background: linear-gradient(135deg, #198754 0%, #146c43 100%) !important;
  color: #fff;
}
.bg-gradient-warning {
  background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
  color: #000;
}
.bg-gradient-danger {
  background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
  color: #fff;
}
.bg-gradient-info {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%) !important;
  color: #000;
}
.bg-gradient-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #565e64 100%) !important;
  color: #fff;
}
.bg-gradient-indigo {
  background: linear-gradient(135deg, #a370f7 0%, #8540f5 100%) !important;
  color: #fff;
}
.bg-gradient-yellow {
  background: linear-gradient(135deg, #ffcd39 0%, #ffc107 100%) !important;
  color: #fff;
}


/* ============================================
 * SHADOW UTILITIES
 * ============================================ */

.shadow-primary {
  box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.15) !important;
}
.shadow-success {
  box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15) !important;
}
.shadow-warning {
  box-shadow: 0 0.5rem 1rem rgba(255, 193, 7, 0.15) !important;
}
.shadow-danger {
  box-shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.15) !important;
}
.shadow-info {
  box-shadow: 0 0.5rem 1rem rgba(13, 202, 240, 0.15) !important;
}
.shadow-secondary {
  box-shadow: 0 0.5rem 1rem rgba(108, 117, 125, 0.15) !important;
}
.shadow-indigo {
  box-shadow: 0 0.5rem 1rem rgba(111, 66, 193, 0.15) !important;
}
.shadow-yellow {
  box-shadow: 0 0.5rem 1rem rgba(132, 204, 22, 0.15) !important;
}


/* ============================================
 * STAT CARDS - Dashboard modules
 * ============================================ */

.stat-card {
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.border-primary { border-left: 4px solid #0d6efd !important; }
.stat-card.border-success { border-left: 4px solid #198754 !important; }
.stat-card.border-warning { border-left: 4px solid #ffc107 !important; }
.stat-card.border-danger { border-left: 4px solid #dc3545 !important; }
.stat-card.border-info { border-left: 4px solid #0dcaf0 !important; }
.stat-card.border-secondary { border-left: 4px solid #6c757d !important; }
.stat-card.border-indigo { border-left: 4px solid #a370f7 !important; }
.stat-card.border-yellow { border-left: 4px solid #ffcd39 !important; }


/* ============================================
 * NAV TABS & PILLS - Custom colors
 * ============================================ */

.nav-tabs .nav-link.active.bg-indigo,
.nav-pills .nav-link.active.bg-indigo {
  background-color: #a370f7 !important;
  border-color: #a370f7 !important;
  color: #fff !important;
}

.nav-tabs .nav-link.active.bg-yellow,
.nav-pills .nav-link.active.bg-yellow {
  background-color: #ffcd39 !important;
  border-color: #ffcd39 !important;
  color: #fff !important;
}


/* ============================================
 * DROPDOWN ITEMS - Custom colors
 * ============================================ */

.dropdown-item.active.bg-indigo,
.dropdown-item:active.bg-indigo {
  background-color: #a370f7;
  color: #fff;
}

.dropdown-item.active.bg-yellow,
.dropdown-item:active.bg-yellow {
  background-color: #ffcd39;
  color: #fff;
}


/* ============================================
 * PAGINATION - Custom colors
 * ============================================ */

.pagination .page-item.active .page-link.bg-indigo {
  background-color: #a370f7;
  border-color: #a370f7;
  color: #fff;
}

.pagination .page-item.active .page-link.bg-yellow {
  background-color: #ffcd39;
  border-color: #ffcd39;
  color: #fff;
}


/* ============================================
 * TOAST COLORS
 * ============================================ */

.toast.bg-indigo {
  background-color: #a370f7 !important;
  color: #fff;
}

.toast.bg-yellow {
  background-color: #ffcd39 !important;
  color: #fff;
}


/* ============================================
 * MODULE COLORS REFERENCE
 * ============================================
 * 
 * Module         | Classe    | Couleur
 * ---------------|-----------|----------
 * General        | primary   | #0d6efd
 * RH             | success   | #198754
 * Finances       | warning   | #ffc107
 * Production     | danger    | #dc3545
 * Gestion        | info      | #0dcaf0
 * Communication  | secondary | #6c757d
 * Utilisateurs   | indigo    | #a370f7
 * Documents      | yellow      | #ffcd39
 * 
 * ============================================ */