/*
 * components.css — Système de composants Rock's Cool
 *
 * Chargé après theme.css. Utilise exclusivement les variables CSS définies
 * dans theme.css (:root et [data-theme="light"]).
 *
 * CE FICHIER EST LA SOURCE DE VÉRITÉ pour le style visuel de tous les
 * composants de l'application. Ne pas dupliquer ces règles dans theme.css
 * ou dans des styles inline Twig.
 *
 * Ordre des sections :
 *   1. Boutons
 *   2. Formulaires (inputs, selects, textareas, checkboxes, radios)
 *   3. Input groups
 *   4. Dropdowns
 *   5. Badges & Labels
 *   6. Alertes
 *   7. Pagination
 *   8. List groups
 *   9. Breadcrumb
 *  10. Panels / Cards
 *  11. Tables
 *  12. Modals
 *  13. Navbar éléments
 */

/* ==========================================================================
   1. BOUTONS
   Hauteurs standardisées :
     .btn-xs  → 28px  (actions discrètes dans les tableaux)
     .btn-sm  → 32px  (actions secondaires)
     .btn     → 40px  (bouton standard)
     .btn-lg  → 48px  (CTA principal, formulaires)
   ========================================================================== */

/* Base commune à tous les boutons */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  height:          40px;
  padding:         0 16px;
  border-radius:   var(--radius-md);
  font-size:       14px;
  font-weight:     600;
  letter-spacing:  0.01em;
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      background var(--transition-base),
                   border-color var(--transition-base),
                   color var(--transition-base),
                   opacity var(--transition-base),
                   transform var(--transition-fast),
                   box-shadow var(--transition-base);
  white-space:     nowrap;
  vertical-align:  middle;
  user-select:     none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Tailles */
.btn-xs {
  height:        28px;
  padding:       0 10px;
  font-size:     12px;
  border-radius: var(--radius-sm);
}

.btn-sm {
  height:        32px;
  padding:       0 12px;
  font-size:     13px;
}

.btn-lg {
  height:        48px;
  padding:       0 24px;
  font-size:     16px;
  font-weight:   700;
  border-radius: var(--radius-lg);
}

/* Bouton primaire — gradient signature violet→cyan */
.btn-primary {
  background:     var(--gradient-primary) !important;
  border-color:   transparent !important;
  color:          #ffffff !important;
  letter-spacing: 0.02em;
}

.btn-primary:hover {
  background:  var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
  opacity:      0.88;
  transform:    translateY(-1px);
  box-shadow:   0 6px 20px var(--gradient-primary-glow) !important;
}

.btn-primary:focus {
  background:  var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
  outline:      2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary:active {
  opacity:   1 !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Ancre stylée en bouton primary — la cascade globale `a { color }` peut passer avant .btn-primary */
a.btn-primary,
a.btn.btn-primary {
  color: #ffffff !important;
}
a.btn-primary:hover,
a.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus {
  color: #ffffff !important;
}

/* Bouton succès */
.btn-success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background: color-mix(in srgb, var(--color-success) 88%, black) !important;
  border-color: color-mix(in srgb, var(--color-success) 88%, black) !important;
  color: #ffffff !important;
}

/* Bouton danger */
.btn-danger {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background: color-mix(in srgb, var(--color-danger) 88%, black) !important;
  border-color: color-mix(in srgb, var(--color-danger) 88%, black) !important;
  color: #ffffff !important;
}

/* Bouton warning */
.btn-warning {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background: color-mix(in srgb, var(--color-warning) 88%, black) !important;
  border-color: color-mix(in srgb, var(--color-warning) 88%, black) !important;
  color: #ffffff !important;
}

/* Bouton info */
.btn-info {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #0d141f !important;
}

[data-theme="light"] .btn-info {
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
  background:  var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
  color: #ffffff !important;
}

/* Bouton défaut (secondaire) */
.btn-default {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

.btn-default:hover,
.btn-default:focus {
  background:   var(--color-surface-deep) !important;
  border-color: var(--color-primary) !important;
  color:        var(--color-text) !important;
}

[data-theme="light"] .btn-default {
  background:   #ffffff !important;
  border-color: var(--color-border) !important;
  color:        var(--color-text) !important;
}

[data-theme="light"] .btn-default:hover,
[data-theme="light"] .btn-default:focus {
  background:   rgba(123, 92, 184, 0.08) !important;
  border-color: var(--color-primary) !important;
  color:        var(--color-primary) !important;
}

/* Bouton outline primaire */
.btn-outline-primary,
.btn-primary-outline {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-primary-outline:hover {
  background:   var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
  opacity:      0.92;
}

/* Bouton lien */
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--color-accent) !important;
  text-decoration: none;
  padding: 0 8px;
}

.btn-link:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* Groupes de boutons — uniformisation de la hauteur */
.btn-group > .btn {
  height: 36px;
}

.btn-group-sm > .btn,
.btn-group > .btn-sm {
  height: 32px;
}

/* ==========================================================================
   2. FORMULAIRES
   ========================================================================== */

/* Input, select, textarea */
.form-control {
  height:           44px;
  padding:          0 12px;
  background-color: var(--color-surface-deep) !important;
  border:           1px solid var(--color-border) !important;
  border-radius:    var(--radius-md) !important;
  color:            var(--color-text) !important;
  font-size:        14px;
  line-height:      1.5;
  transition:       border-color var(--transition-base),
                    box-shadow var(--transition-base);
  box-shadow:       none !important;
}

.form-control:focus {
  border-color: var(--color-accent) !important;
  box-shadow:   0 0 0 3px rgba(46, 197, 211, 0.15) !important;
  outline:      none;
}

[data-theme="light"] .form-control {
  background-color: var(--color-surface) !important;
}

[data-theme="light"] .form-control:focus {
  border-color: var(--color-accent-dark) !important;
  box-shadow:   0 0 0 3px rgba(26, 157, 170, 0.18) !important;
}

.form-control::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1;
}

/* Textarea */
textarea.form-control {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  resize: vertical;
}

/* Select natif */
select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239f7ce1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px;
}

/* Labels */
label {
  color:          var(--color-text-muted);
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom:  6px;
  display:        block;
}

/* Form group */
.form-group {
  margin-bottom: 16px;
}

/* Tranches dégressives — condensées : supprime le <br> redondant et réduit les marges */
.plan-step-row .form-group {
  margin-bottom: 4px;
}
.plan-step-row label {
  margin-bottom: 1px;
  line-height: 1.2;
}
.plan-step-row label + br {
  display: none;
}

/* Checkbox et radio — visuel cohérent */
.checkbox label,
.radio label {
  text-transform: none;
  font-weight:    400;
  font-size:      14px;
  letter-spacing: 0;
  color:          var(--color-text);
  cursor:         pointer;
}

/* Pretty-check — adaptation aux tokens du thème (remplace les couleurs hardcodées
   de custom.min.css : #2ec5d3 cyan et #1d2b45 inset-shadow) */
.pretty-check__box {
  border-color:  var(--color-primary) !important;
  background:    transparent !important;
  /* Dimensions absolues — empêche Bootstrap .checkbox label de les écraser */
  width:         18px !important;
  height:        18px !important;
  min-width:     18px !important;
  min-height:    18px !important;
  max-width:     18px !important;
  max-height:    18px !important;
  flex-shrink:   0 !important;
  flex-grow:     0 !important;
  align-self:    center !important;
  box-sizing:    content-box !important;
}

/* Correction layout quand .pretty-check est dans un .checkbox Bootstrap 3
   — Bootstrap a .checkbox label { padding-left:20px; min-height:20px } (0,2,0)
     qui écrase .pretty-check (0,1,0) */
.checkbox label.pretty-check,
.radio   label.pretty-check {
  display:      inline-flex !important;
  align-items:  center !important;
  padding-left: 0 !important;
  gap:          8px !important;
  min-height:   0 !important;
}

/* Input caché — Bootstrap .checkbox input[type=checkbox] { position:absolute; margin-left:-20px }
   a spécificité (0,2,1) > pretty-check__input (0,1,0). On le ré-écrase. */
.checkbox .pretty-check__input,
.radio   .pretty-check__input {
  position:       absolute !important;
  opacity:        0 !important;
  width:          1px !important;
  height:         1px !important;
  pointer-events: none !important;
  margin:         0 !important;
}

.pretty-check.is-checked .pretty-check__box {
  background:   var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  box-shadow:   none !important;
}

/* Vrai checkmark via ::after — remplace l'inset box-shadow opaque */
.pretty-check.is-checked .pretty-check__box::after {
  content:       '';
  display:       block;
  width:         5px;
  height:        9px;
  border:        2px solid #ffffff;
  border-top:    none;
  border-left:   none;
  transform:     rotate(45deg) translateY(-1px);
}

/* Radio checked — point central blanc à la place du checkmark */
.pretty-check--radio.pretty-check.is-checked .pretty-check__box {
  box-shadow: none !important;
}
.pretty-check--radio.pretty-check.is-checked .pretty-check__box::after {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #ffffff;
  border:        none;
  transform:     none;
}

.pretty-check.is-focused .pretty-check__box {
  border-color: var(--color-primary) !important;
  box-shadow:   0 0 0 3px rgba(159, 124, 225, 0.25) !important;
}

/* body.outside — accent-color natif aligné sur le token primary */
body.outside input[type="checkbox"],
body.outside input[type="radio"] {
  accent-color: var(--color-primary) !important;
}
body.outside input[type="checkbox"]:focus,
body.outside input[type="radio"]:focus {
  outline-color: rgba(159, 124, 225, 0.45) !important;
}

/* Texte lead — flatifytheme l'écrase avec une couleur trop claire */
.lead {
  color: var(--color-text) !important;
}

/* Messages d'aide */
.help-block {
  color:     var(--color-text-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* État d'erreur */
.has-error .form-control {
  border-color: var(--color-danger) !important;
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(236, 94, 105, 0.2) !important;
}

.has-error .help-block,
.has-error label {
  color: var(--color-danger) !important;
}

/* État succès */
.has-success .form-control {
  border-color: var(--color-success) !important;
}

.has-success .form-control:focus {
  box-shadow: 0 0 0 3px rgba(153, 207, 82, 0.2) !important;
}

/* ==========================================================================
   3. INPUT GROUPS
   ========================================================================== */

.input-group .form-control {
  border-radius: 0 !important;
}

.input-group .form-control:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.input-group .form-control:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.input-group-addon {
  background:      var(--color-surface-alt) !important;
  border:          1px solid var(--color-border) !important;
  color:           var(--color-text-muted) !important;
  padding:         0 12px;
  height:          44px;
  display:         table-cell !important;
  vertical-align:  middle;
  font-size:       14px;
  transition:      background var(--transition-base), border-color var(--transition-base);
  white-space:     nowrap;
}

.input-group-addon:first-child {
  border-right:  none;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.input-group-addon:last-child {
  border-left:   none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.input-group-btn .btn {
  height:        44px;
  border-radius: 0 !important;
}

.input-group-btn:last-child .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* Override flatifytheme — em { color:#ccc } global qui rend le texte illisible */
em {
  color: var(--color-text) !important;
}

/* ==========================================================================
   4. DROPDOWNS
   ========================================================================== */

.dropdown-menu {
  background:    var(--color-surface) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-md) !important;
  padding:       8px 0 !important;
  min-width:     180px;
  animation:     dropdown-appear var(--transition-base);
}

@keyframes dropdown-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu > li > a {
  color:      var(--color-text) !important;
  padding:    8px 16px !important;
  font-size:  14px;
  display:    flex;
  align-items: center;
  gap:        8px;
  transition: background var(--transition-fast), color var(--transition-fast);
  border-radius: var(--radius-sm);
  margin:     0 4px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--color-surface-alt) !important;
  color:      var(--color-primary) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--color-primary) !important;
  color:      #ffffff !important;
}

.dropdown-menu .divider {
  background:  var(--color-border) !important;
  margin:      6px 0;
}

.dropdown-header {
  color:          var(--color-text-muted) !important;
  font-size:      11px !important;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        8px 16px 4px;
}

/* ==========================================================================
   5. BADGES & LABELS
   ========================================================================== */

.badge {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      20px;
  height:         20px;
  padding:        0 6px;
  border-radius:  var(--radius-pill);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.02em;
  background:     var(--gradient-primary) !important;
  color:          #ffffff !important;
}

/* Variants sémantiques — double-classe (.badge.badge-danger) pour une
   spécificité (0,0,2,0) qui bat la règle générique .badge (0,0,1,0),
   même avec !important et même si .badge est déclaré après. */
.badge.badge-danger  { background: var(--color-danger)    !important; }
.badge.badge-success { background: var(--color-success)   !important; }
.badge.badge-primary { background: var(--gradient-primary) !important; }
.badge.badge-warning { background: var(--color-warning) !important; color: #1a2332 !important; }
.badge.badge-info    { background: var(--color-accent)  !important; color: #0d141f  !important; }

[data-theme="light"] .badge.badge-info    { color: #ffffff !important; }
[data-theme="light"] .badge.badge-warning { background: #f1c205 !important; color: #1a2332 !important; }

.label {
  display:        inline-flex;
  align-items:    center;
  padding:        2px 8px;
  border-radius:  var(--radius-sm);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height:    1.4;
}

.label-default  { background: var(--color-surface-alt) !important; color: var(--color-text-muted) !important; }
.label-primary  { background: var(--gradient-primary)  !important; color: #ffffff !important; }
.label-success  { background: var(--color-success)     !important; color: #ffffff !important; }
.label-info     { background: var(--color-accent)      !important; color: #0d141f !important; }
.label-warning  { background: var(--color-warning)     !important; color: #0d141f !important; }
.label-danger   { background: var(--color-danger)      !important; color: #ffffff !important; }

[data-theme="light"] .label-info    { color: #ffffff !important; }
[data-theme="light"] .label-warning { background: #f1c205 !important; color: #1a2332 !important; }

/* ==========================================================================
   6. ALERTES
   ========================================================================== */

.alert {
  border-radius: var(--radius-md) !important;
  padding:       12px 16px !important;
  border-width:  1px;
  border-style:  solid;
  font-size:     14px;
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
}

.alert-info {
  background:   rgba(46, 197, 211, 0.12)  !important;
  border-color: rgba(46, 197, 211, 0.3)   !important;
  color:        var(--color-accent)        !important;
}

.alert-success {
  background:   rgba(153, 207, 82, 0.12)  !important;
  border-color: rgba(153, 207, 82, 0.3)   !important;
  color:        var(--color-success)       !important;
}

.alert-warning {
  background:   rgba(241, 194, 5, 0.12)   !important;
  border-color: rgba(241, 194, 5, 0.3)    !important;
  color:        var(--color-warning)       !important;
}

.alert-danger {
  background:   rgba(236, 94, 105, 0.12)  !important;
  border-color: rgba(236, 94, 105, 0.3)   !important;
  color:        var(--color-danger)        !important;
}

/* Light — alertes plus conventionnelles (meilleur contraste) */
[data-theme="light"] .alert-info    { background: #d1ecf1 !important; border-color: #bee5eb !important; color: #0c5460 !important; }
[data-theme="light"] .alert-success { background: #d4edda !important; border-color: #c3e6cb !important; color: #155724 !important; }
[data-theme="light"] .alert-warning { background: #fff3cd !important; border-color: #ffc107 !important; color: #856404 !important; }
[data-theme="light"] .alert-danger  { background: #f8d7da !important; border-color: #f5c6cb !important; color: #721c24 !important; }

/* ==========================================================================
   7. PAGINATION
   ========================================================================== */

.pagination {
  display:     flex;
  flex-wrap:   wrap;
  gap:         4px;
  padding:     0;
  margin:      16px 0;
  list-style:  none;
}

.pagination > li > a,
.pagination > li > span {
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-width:     36px;
  height:        36px;
  padding:       0 10px;
  border-radius: var(--radius-md) !important;
  border:        1px solid var(--color-border) !important;
  background:    var(--color-surface) !important;
  color:         var(--color-text) !important;
  font-size:     13px;
  font-weight:   500;
  transition:    background var(--transition-fast),
                 border-color var(--transition-fast),
                 color var(--transition-fast);
}

.pagination > li > a:hover {
  background:    var(--color-surface-alt) !important;
  border-color:  var(--color-primary) !important;
  color:         var(--color-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
  background:   var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
  font-weight:  700;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  opacity:       0.4;
  cursor:        not-allowed;
}

/* ==========================================================================
   8. LIST GROUPS
   ========================================================================== */

.list-group {
  border-radius: var(--radius-lg) !important;
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}

.list-group-item {
  background:    var(--color-surface) !important;
  border-color:  var(--color-border) !important;
  color:         var(--color-text) !important;
  padding:       12px 16px;
  transition:    background var(--transition-fast);
}

.list-group-item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }

a.list-group-item:hover,
a.list-group-item:focus {
  background: var(--color-surface-alt) !important;
  color:      var(--color-primary) !important;
}

.list-group-item.active,
.list-group-item.active:hover {
  background:   var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color:        #ffffff !important;
}

/* ==========================================================================
   9. BREADCRUMB
   ========================================================================== */

.breadcrumb {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           4px;
  background:    transparent !important;
  padding:       8px 0 !important;
  margin-bottom: 16px;
  border-radius: 0;
  font-size:     13px;
}

.breadcrumb > li {
  display:     flex;
  align-items: center;
}

.breadcrumb > li + li::before {
  content:     "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size:   8px;
  color:       var(--color-text-muted) !important;
  padding:     0 6px;
}

.breadcrumb > li > a {
  color:      var(--color-accent) !important;
  transition: color var(--transition-fast);
}

[data-theme="light"] .breadcrumb > li > a {
  color: #157585 !important;
}

.breadcrumb > li > a:hover {
  color: var(--color-primary) !important;
}

.breadcrumb > .active {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   10. PANELS / CARDS + PANEL-HEADING STANDARD UNIFIÉ
   ========================================================================== */

/*
 * Standard panel-heading — une seule ligne, toujours flex, toujours cohérent.
 * Structure HTML attendue :
 *
 *   <div class="panel-heading">
 *     <span class="fas fa-icon panel-heading-icon"></span>
 *     <span class="panel-heading-title">Titre</span>
 *     [opt] <span class="panel-heading-stat">42</span>       ← KPI number
 *     [opt] <span class="badge panel-heading-badge">5</span> ← count badge
 *     [opt] <div class="panel-heading-actions">...btns</div> ← right-side actions
 *   </div>
 */

.panel-heading {
  display:         flex !important;
  align-items:     center !important;
  flex-wrap:       nowrap !important;
  gap:             10px !important;
  padding:         11px 16px !important;
  min-height:      48px !important;
  background:      transparent !important;
  border-bottom:   1px solid var(--color-border) !important;
  border-left:     3px solid var(--color-accent) !important;
  border-radius:   0 !important;
}

/* Reset Bootstrap clearfix et floats */
.panel-heading.clearfix::after,
.panel-heading.clearfix::before { display: none !important; }
.panel-heading .pull-left,
.panel-heading .pull-right      { float: none !important; }
.panel-heading .pull-right      { margin-left: auto !important; }

/* Reset h* hérités qui ajoutent margin/padding */
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5 {
  margin:      0 !important;
  padding:     0 !important;
  font-size:   inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  color:       inherit !important;
  border:      none !important;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Icône */
.panel-heading-icon {
  font-size:   13px !important;
  color:       var(--color-text-muted) !important;
  width:       16px !important;
  text-align:  center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Titre — uppercase, compact, prend l'espace restant */
.panel-heading-title {
  font-size:      12px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color:          var(--color-text-muted) !important;
  flex:           1 !important;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.3 !important;
}

/* Grand nombre KPI */
.panel-heading-stat {
  font-size:   1.25rem !important;
  font-weight: 700 !important;
  color:       var(--color-accent) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Badge compteur (ex: nombre d'alertes) */
.panel-heading-badge {
  font-size:       10px !important;
  font-weight:     700 !important;
  min-width:       20px !important;
  height:          20px !important;
  padding:         0 5px !important;
  border-radius:   var(--radius-pill) !important;
  background:      var(--color-danger) !important;
  color:           #ffffff !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
}

/* Zone d'actions (boutons) — poussée à droite */
.panel-heading-actions {
  margin-left: auto !important;
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  flex-shrink: 0 !important;
}

.panel-heading-actions .btn {
  height:  30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

/* Variante danger : icône rouge */
.panel-danger .panel-heading-icon,
.panel-red .panel-heading-icon {
  color: var(--color-danger) !important;
}

/* Stat rows dans panel-body (remplacement du <br/> dans le heading) */
.panel-stat-row {
  display:       flex;
  align-items:   baseline;
  gap:           6px;
  margin-bottom: 8px;
}

.panel-stat-row:last-child { margin-bottom: 0; }

.panel-stat-value {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--color-text);
  line-height: 1.2;
  white-space: nowrap;
}

.panel-stat-value--large {
  font-size: 1.5rem;
  color:     var(--color-accent);
}

.panel-stat-value--muted {
  font-size: 0.9375rem;
  color:     var(--color-text-muted);
}

.panel-stat-label {
  font-size:      11px;
  color:          var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

/* ========================================================================== */

.panel {
  background:    var(--color-surface) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-md) !important;
  margin-bottom: 24px;
  overflow:      hidden;
}

.panel-heading {
  background:    transparent !important;
  border:        none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding:       15px 25px !important;
}

.panel-title {
  color:       var(--color-text) !important;
  font-size:   14px !important;
  font-weight: 700 !important;
  margin:      0;
}

.panel-body {
  background: transparent !important;
  padding:    16px;
}

.panel-footer {
  background:    var(--color-surface-alt) !important;
  border-top:    1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding:       10px 16px;
}


/* Tables dans les panels — supprimer le double fond */
.panel > .table,
.panel > .table-responsive > .table {
  margin-bottom: 0;
  background:    transparent !important;
}

.panel > .table-responsive {
  border:        none !important;
  margin-bottom: 0;
}

/* ==========================================================================
   11. TABLES
   ========================================================================== */

.table {
  color:         var(--color-text) !important;
  border-color:  var(--color-border) !important;
  margin-bottom: 0;
}

.table > thead > tr > th {
  background:    var(--color-surface-alt) !important;
  border-bottom: 2px solid var(--color-border) !important;
  color:         var(--color-text-muted) !important;
  font-size:     11px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:       10px 12px;
  white-space:   nowrap;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top:  1px solid var(--color-border) !important;
  padding:     10px 12px;
  color:       var(--color-text) !important;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.025) !important;
}

[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--color-surface-alt) !important;
}

.table-hover > tbody > tr:hover {
  background: rgba(159, 124, 225, 0.06) !important;
}

[data-theme="light"] .table-hover > tbody > tr:hover {
  background: rgba(123, 92, 184, 0.06) !important;
}

/* Liens dans les tables — exclut badges, labels, boutons et occupied_place
   (ce dernier a son propre style dédié dans theme.css : ne pas lui disputer la couleur) */
.table td a:not(.badge):not(.label):not(.btn):not(.occupied_place),
.table th a:not(.badge):not(.label):not(.btn):not(.occupied_place) {
  color:       var(--color-accent) !important;
  font-weight: 500;
  transition:  color var(--transition-fast);
}

[data-theme="light"] .table td a:not(.badge):not(.label):not(.btn):not(.occupied_place),
[data-theme="light"] .table th a:not(.badge):not(.label):not(.btn):not(.occupied_place) {
  color: #157585 !important;
}

.table td a:not(.badge):not(.label):not(.btn):not(.occupied_place):hover,
.table th a:not(.badge):not(.label):not(.btn):not(.occupied_place):hover {
  color: var(--color-primary) !important;
}

/* Tableau responsive — bordure + coins arrondis */
.table-responsive {
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-md);
  overflow-x:     auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom:  20px;
}

/* Quand .table-responsive contient un DataTable, sa bordure devient celle
   du .dataTables_wrapper. On supprime le double-cadre via :has(). */
.table-responsive:has(.dataTables_wrapper) {
  border:         none;
  border-radius:  0;
  overflow:       visible;
  margin-bottom:  0;
}

/* ==========================================================================
   12. MODALS
   ========================================================================== */

.modal-content {
  background:    var(--color-surface) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow:    var(--shadow-lg) !important;
  color:         var(--color-text) !important;
  overflow:      hidden;
}

.modal-header {
  background:    var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding:       16px 20px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  /* pas de justify-content: space-between — le title prend l'espace via flex:1 */
}

.modal-title {
  color:       var(--color-text) !important;
  font-size:   16px !important;
  font-weight: 700 !important;
  margin:      0;
  flex:        1; /* occupe tout l'espace, ferme le close à droite */
}

/* Bootstrap 3 place le .close AVANT le .modal-title dans le DOM.
   On le renvoie en fin de ligne avec order:2 + float:none. */
.modal-header .close {
  order:       2;
  float:       none !important;
  flex-shrink: 0;
  color:       var(--color-text-muted) !important;
  opacity:     1;
  font-size:   22px;
  line-height: 1;
  width:       32px;
  height:      32px;
  padding:     0;
  background:  transparent;
  border:      none;
  border-radius: var(--radius-sm);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color var(--transition-fast), background var(--transition-fast);
}

.modal-header .close:hover {
  color:      var(--color-text) !important;
  background: var(--color-border);
}

.modal-body {
  background: transparent !important;
  padding:    24px;
  color:      var(--color-text) !important;
}

.modal-footer {
  background:  var(--color-surface-alt) !important;
  border-top:  1px solid var(--color-border) !important;
  padding:     16px 24px;
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  gap:         8px;
}

.modal-footer .btn {
  min-width: 100px;
}

/* .close en dehors d'un modal-header (ex: alertes) — style discret */
.close {
  color:          var(--color-text-muted) !important;
  opacity:        0.6;
  font-size:      20px;
  line-height:    1;
  background:     none;
  border:         none;
  cursor:         pointer;
  transition:     opacity var(--transition-fast);
}

.close:hover {
  opacity: 1;
}

/* Mobile — modal plein écran */
@media (max-width: 767px) {
  .modal-dialog {
    margin: 8px;
    width:  calc(100% - 16px) !important;
    max-width: none;
  }

  .modal-content {
    border-radius: var(--radius-lg) !important;
  }

  /* Colonnes dans les modals — empilement */
  .modal-dialog .col-md-8,
  .modal-dialog .col-md-4,
  .modal-dialog .col-md-6 {
    width: 100% !important;
    float: none !important;
  }
}

/* ==========================================================================
   13. LIENS — couleurs et contraste
   Surcharge Bootstrap 3 et flatifytheme pour garantir la lisibilité
   dans les deux modes.
   ========================================================================== */

/*
 * Lien par défaut — exclut les composants qui ont leur propre couleur
 * (.btn, .badge, .label, .navbar-*, .logo-box) pour éviter que l'override
 * global n'écrase le texte blanc sur fond coloré (ex: a.badge.badge-danger).
 */
a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item) {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item):hover,
a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item):focus {
  color: var(--color-primary);
  text-decoration: none;
}

[data-theme="light"] a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item) {
  color: #157585;
}

[data-theme="light"] a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item):hover,
[data-theme="light"] a:not(.btn):not(.badge):not(.label):not([class*="navbar"]):not(.logo-box):not(.dropdown-toggle):not(.list-group-item):focus {
  color: var(--color-primary);
}

/* Liens dans les listes (panels, sidebar, "Liens utiles") */
.list-unstyled a,
.panel-body ul li a,
.panel-body ol li a {
  color: var(--color-accent) !important;
  transition: color var(--transition-fast);
}

.list-unstyled a:hover,
.panel-body ul li a:hover,
.panel-body ol li a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

[data-theme="light"] .list-unstyled a,
[data-theme="light"] .panel-body ul li a,
[data-theme="light"] .panel-body ol li a {
  color: #157585 !important;
}

/* Liens dans les alertes — héritent la couleur de l'alerte, gras + souligné */
.alert a:not(.btn):not(.badge):not(.label),
.alert a:not(.btn):not(.badge):not(.label):link,
.alert a:not(.btn):not(.badge):not(.label):visited {
  color: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  opacity: 0.9;
}

.alert a:not(.btn):not(.badge):not(.label):hover,
.alert a:not(.btn):not(.badge):not(.label):focus {
  opacity: 1 !important;
  text-decoration: underline !important;
}

/* Badges cliquables (a.badge, a.label) — texte blanc sur fond coloré
   Priorité absolue : doit battre tous les overrides de couleur de liens */
a.badge,
a.badge-danger,
a.badge-success,
a.badge-primary,
a.badge-warning,
a.badge-info,
a.label,
a.label-primary,
a.label-success,
a.label-danger,
a.label-info {
  color: #ffffff !important;
  text-decoration: none !important;
}

a.badge:hover,
a.badge:focus,
a.label:hover,
a.label:focus {
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  filter: brightness(1.1);
}

/* Exceptions fond clair — texte sombre */
a.label-warning,
a.label-default {
  color: #1a2332 !important;
}

a.label-warning:hover,
a.label-default:hover {
  color: #1a2332 !important;
}

/* Même règle pour les modes light et dark — le fond du badge prime toujours */
[data-theme="light"] a.badge,
[data-theme="light"] a.label-primary,
[data-theme="light"] a.label-success,
[data-theme="light"] a.label-danger,
[data-theme="light"] a.label-info {
  color: #ffffff !important;
}

[data-theme="light"] a.label-warning {
  background: #f1c205 !important;
  color: #1a2332 !important;
}

[data-theme="light"] a.label-default {
  color: #1a2332 !important;
}

/* ==========================================================================
   14. UTILITAIRES BOOTSTRAP 3 — surcharge text-* pour respect du thème
   Bootstrap 3 : text-primary=#337ab7, text-warning=#8a6d3b, text-success=#3c763d
   Ces couleurs sont illisibles en dark mode. On les remplace par nos tokens.
   ========================================================================== */

.text-primary { color: var(--color-primary)   !important; }
.text-success { color: var(--color-success)   !important; }
.text-info    { color: var(--color-accent)    !important; }
.text-warning { color: var(--color-warning)   !important; }
.text-danger  { color: var(--color-danger)    !important; }
.text-muted   { color: var(--color-text-muted) !important; }

/* Light mode — ajuster pour le contraste WCAG sur fond clair */
[data-theme="light"] .text-primary { color: var(--color-primary)     !important; } /* #7b5cb8 — 5.5:1 sur blanc */
[data-theme="light"] .text-success { color: var(--color-success)     !important; } /* #3e7214 — 6.8:1 sur blanc */
[data-theme="light"] .text-info    { color: var(--color-accent-dark) !important; } /* #157e89 — 5.1:1 sur blanc */
[data-theme="light"] .text-warning { color: var(--color-warning)     !important; } /* #a07800 — 5.8:1 sur blanc */
[data-theme="light"] .text-danger  { color: var(--color-danger)      !important; } /* #c9303d — 5.0:1 sur blanc */
[data-theme="light"] .text-muted   { color: var(--color-text-muted)  !important; } /* #6c757d — 4.6:1 sur blanc */

/* ==========================================================================
   15. DATATABLES
   Plugin : datatables.bootstrap4.min.css (BS4 classes) dans une app BS3.
   On reprend toute la mise en forme pour coller aux design tokens.

   Structure HTML générée :
     .dataTables_wrapper.dt-bootstrap4
       .row  ← barre de contrôles (length + filter)
       .row  ← table
       .row  ← info + pagination
   ========================================================================== */

/* ── Carte générale ────────────────────────────────────────────────────── */
.dataTables_wrapper {
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-md);
  overflow:       hidden;
  background:     var(--color-surface);
  color:          var(--color-text);
  margin-bottom:  20px;
  box-shadow:     var(--shadow-md);
}

/* ── Ligne de contrôles (1ère .row) ─────────────────────────────────────── */
.dataTables_wrapper > .row:first-child {
  background:    var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  margin:        0;
  padding:       4px 0;
  align-items:   center;
}

/* ── Ligne table (2ème .row) ────────────────────────────────────────────── */
.dataTables_wrapper > .row:not(:first-child):not(:last-child) {
  margin: 0;
}

/* ── Ligne info + pagination (dernière .row) ────────────────────────────── */
.dataTables_wrapper > .row:last-child {
  background:  var(--color-surface-alt);
  border-top:  1px solid var(--color-border);
  margin:      0;
  padding:     4px 0;
  align-items: center;
}

/* datatables.bootstrap4.min.css supprime le padding des colonnes quand
   .dataTables_wrapper est dans .table-responsive — on remet une marge correcte */
.dataTables_wrapper > .row > div[class^="col-"]:first-child {
  padding-left:  16px !important;
}
.dataTables_wrapper > .row > div[class^="col-"]:last-child {
  padding-right: 16px !important;
}

/* ── Labels + libellés ──────────────────────────────────────────────────── */
.dataTables_length label,
.dataTables_filter label {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       var(--color-text-muted);
  font-size:   13px;
  font-weight: 400;
  margin:      0;
  white-space: nowrap;
}

/* ── Champs search + select length ─────────────────────────────────────── */
.dataTables_length select,
.dataTables_filter input[type="search"] {
  background:    var(--color-surface)  !important;
  border:        1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  color:         var(--color-text) !important;
  font-size:     13px !important;
  height:        32px !important;
  padding:       4px 8px !important;
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
  outline:       none;
  width:         auto !important;
}

.dataTables_length select:focus,
.dataTables_filter input[type="search"]:focus {
  border-color: var(--color-primary) !important;
  box-shadow:   0 0 0 2px rgba(159, 124, 225, 0.18) !important;
}

/* ── Info (count résultats) ─────────────────────────────────────────────── */
.dataTables_info {
  color:     var(--color-text-muted);
  font-size: 13px;
  padding:   6px 0;
}

/* ── Lignes de la table — flatifytheme force #24344d sur tbody tr ────────── */
table.dataTable tbody tr {
  background-color: var(--color-surface) !important;
}
table.dataTable.table-striped  tbody tr:nth-of-type(odd),
table.dataTable.display        tbody tr.odd,
table.dataTable.stripe         tbody tr.odd {
  background-color: var(--color-surface-alt) !important;
}
table.dataTable tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.hover   tbody tr:hover {
  background-color: rgba(46, 197, 211, 0.06) !important;
}
/* Colonne de tri active — flatifytheme la surteinte, on neutralise */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3 {
  background-color: transparent !important;
}

/* ── Pagination : reset du <li class="paginate_button"> ─────────────────── *
 * flatifytheme force background:#23324e !important sur .paginate_button
 * et .dataTables_wrapper .dataTables_paginate .paginate_button.
 * On monte la spécificité pour les deux patterns.                           */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background:       transparent !important;
  background-color: transparent !important;
  border:           none !important;
  padding:          0 !important;
  box-shadow:       none !important;
  font-size:        inherit !important;
  border-radius:    0 !important;
  color:            inherit !important;
}

/* ── Pagination (classes Bootstrap 4 : .page-item / .page-link) ─────────── */
.dataTables_paginate .pagination {
  margin:     0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        3px;
  list-style: none;
  padding:    0;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  background:    var(--color-surface) !important;
  border:        1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  color:         var(--color-text-muted) !important;
  font-size:     13px !important;
  line-height:   1.4 !important;
  min-width:     32px;
  padding:       5px 10px !important;
  text-align:    center;
  transition:    background var(--transition-fast),
                 color var(--transition-fast),
                 border-color var(--transition-fast);
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
  background:   var(--color-surface-alt) !important;
  border-color: var(--color-primary) !important;
  color:        var(--color-text) !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background:   var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
  font-weight:  700;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  opacity:        0.35;
  pointer-events: none;
}

/* ── Icônes de tri dans les en-têtes ────────────────────────────────────── */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  color:   var(--color-text-muted);
  opacity: 0.3;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
  color:   var(--color-primary);
  opacity: 0.9;
}

/* ── Pas de double bordure basse sur la table ───────────────────────────── */
table.dataTable.no-footer {
  border-bottom: none !important;
}

/* ── Mode clair ─────────────────────────────────────────────────────────── */
[data-theme="light"] .dataTables_wrapper {
  background:   #ffffff;
  border-color: var(--color-border);
}

[data-theme="light"] .dataTables_wrapper > .row:first-child {
  background: var(--color-surface-alt);
}

/* Footer plus sombre pour que les boutons de pagination (#fff) se détachent */
[data-theme="light"] .dataTables_wrapper > .row:last-child {
  background: var(--color-surface-deep) !important;
}

[data-theme="light"] .dataTables_info {
  color: var(--color-text) !important;
}

[data-theme="light"] .dataTables_length select,
[data-theme="light"] .dataTables_filter input[type="search"] {
  background: #ffffff !important;
  color:      var(--color-text) !important;
}

[data-theme="light"] table.dataTable tbody tr {
  background-color: #ffffff !important;
}
[data-theme="light"] table.dataTable.table-striped  tbody tr:nth-of-type(odd),
[data-theme="light"] table.dataTable.display        tbody tr.odd,
[data-theme="light"] table.dataTable.stripe         tbody tr.odd {
  background-color: var(--color-surface-alt) !important;
}
[data-theme="light"] table.dataTable tbody tr:hover,
[data-theme="light"] table.dataTable.display tbody tr:hover,
[data-theme="light"] table.dataTable.hover   tbody tr:hover {
  background-color: rgba(123, 92, 184, 0.05) !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  background:   #ffffff !important;
  border-color: #b0bac9 !important;
  color:        var(--color-text) !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background:   var(--gradient-primary) !important;
  border-color: transparent !important;
  color:        #ffffff !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
  background:   var(--color-surface-alt) !important;
  border-color: var(--color-primary) !important;
  color:        var(--color-text) !important;
}

/* ==========================================================================
   16. EN-TÊTE DE PAGE (page-header-bar)
   Remplace le pattern Bootstrap 3 <h1> + bouton pull-right par un
   flex-row : titre à gauche, actions à droite.
   Usage :
     <div class="page-header-bar">
       <h1 class="page-header-title"><i class="fas fa-X"></i> Titre</h1>
       <div class="page-header-actions">
         <a class="btn btn-primary" href="..."><i class="fas fa-plus"></i> Créer</a>
       </div>
     </div>
   ========================================================================== */

.page-header-bar {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   20px;
  flex-wrap:       wrap;
}

.page-header-bar h1,
.page-header-title {
  flex:        1;
  margin:      0;
  font-size:   1.375rem;
  font-weight: 700;
  color:       var(--color-text);
  min-width:   0;
  display:     flex;
  align-items: center;
  gap:         10px;
}

.page-header-bar h1 i,
.page-header-title i {
  color:      var(--color-text-muted);
  font-size:  1rem;
  flex-shrink: 0;
}

.page-header-actions {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}

/* ==========================================================================
   16. NAVBAR ÉLÉMENTS
   ========================================================================== */

/* Bouton toggle dark/light dans la navbar */
.theme-toggle-nav-item {
  display:     flex !important;
  align-items: center;
}

/* Bouton user avatar */
/* Spécificité calquée sur Bootstrap 3 (.navbar-default .navbar-nav > li > a = 0,3,1)
   On ajoute .navbar-user-btn pour atteindre 0,4,1 et battre tous les overrides flatifytheme */
.navbar-default .navbar-nav > li > a.navbar-user-btn,
.navbar-default .navbar-nav > .open > a.navbar-user-btn {
  display:       flex !important;
  align-items:   center !important;
  gap:           8px !important;
  height:        36px !important;
  border-radius: var(--radius-md) !important;
  background:    var(--color-primary) !important;
  color:         #ffffff !important;
  padding:       0 12px !important;
  margin:        0 4px !important;
  transition:    opacity var(--transition-base), transform var(--transition-fast);
}

.navbar-default .navbar-nav > li > a.navbar-user-btn:hover,
.navbar-default .navbar-nav > li > a.navbar-user-btn:focus,
.navbar-default .navbar-nav > .open > a.navbar-user-btn:hover,
.navbar-default .navbar-nav > .open > a.navbar-user-btn:focus {
  opacity:       0.85;
  transform:     translateY(-1px);
  background:    var(--color-primary) !important;
  color:         #ffffff !important;
}

.navbar-user-btn .fas.fa-user {
  font-size:   14px !important;
  flex-shrink: 0;
}

/* ==========================================================================
   17. SELECT2
   ========================================================================== */

/* ── Hauteur normalisée pour correspondre au .form-control 44px ─────────── */
.select2-container--default .select2-selection--single {
  height:      44px !important;
  line-height: 44px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-top: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
}

/* ── Light mode : override des couleurs sombres imposées par flatifytheme ─── */
html[data-theme="light"] .select2-container--default .select2-selection--single,
html[data-theme="light"] .select2-container--default .select2-selection--multiple {
  background-color: var(--color-surface) !important;
  border:           1px solid var(--color-border) !important;
  border-radius:    var(--radius-sm) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color:       var(--color-text) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-muted) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--color-text-muted) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background:   rgba(123, 92, 184, 0.15) !important;
  border-color: var(--color-primary) !important;
  color:        var(--color-text) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-text-muted) !important;
  border-right-color: var(--color-primary) !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color:      var(--color-danger) !important;
  background: transparent !important;
}

html[data-theme="light"] .select2-container--default .select2-selection--multiple .select2-search__field {
  color: var(--color-text) !important;
}

html[data-theme="light"] .select2-dropdown {
  background-color: var(--color-surface) !important;
  border-color:     var(--color-border) !important;
  box-shadow:       var(--shadow-md) !important;
}

html[data-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background:   var(--color-surface-deep) !important;
  border-color: var(--color-border) !important;
  color:        var(--color-text) !important;
}

html[data-theme="light"] .select2-results__option {
  color:            var(--color-text) !important;
  background-color: var(--color-surface) !important;
}

html[data-theme="light"] .select2-results__option[aria-disabled="true"] {
  color: var(--color-text-muted) !important;
}

html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
  color:            #ffffff !important;
}

html[data-theme="light"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(123, 92, 184, 0.10) !important;
  color:            var(--color-text) !important;
}

html[data-theme="light"] .select2-results__options {
  background-color: var(--color-surface) !important;
}

html[data-theme="light"] .select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow:   0 0 0 2px rgba(123, 92, 184, 0.18) !important;
}

html[data-theme="light"] .select2-container--focus .select2-selection--multiple {
  border-color: var(--color-primary) !important;
  box-shadow:   0 0 0 2px rgba(123, 92, 184, 0.18) !important;
}

/* ── 18. Specials page ─────────────────────────────────────────────────────── */
.specials-panel .panel-heading {
  font-size:      1rem;
  font-weight:    600;
  letter-spacing: 0.02em;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.specials-panel .panel-heading .fas {
  color:      var(--color-primary);
  width:      18px;
  text-align: center;
}

.specials-body {
  padding: 0 !important;
}

.special-action {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         11px 16px;
  border-bottom:   1px solid var(--color-border);
  transition:      background var(--transition-base);
}

.special-action:last-child {
  border-bottom: none;
}

.special-action:hover {
  background: rgba(159, 124, 225, 0.06);
}

.special-action--disabled {
  opacity:        0.5;
  pointer-events: none;
}

.special-action-info {
  display:     flex;
  align-items: center;
  gap:         10px;
  min-width:   0;
}

.special-action-info .fas {
  color:       var(--color-primary);
  width:       16px;
  text-align:  center;
  flex-shrink: 0;
  opacity:     0.75;
}

.special-action-info span {
  font-size:   0.88rem;
  color:       var(--color-text);
  line-height: 1.3;
}

.special-action-info small {
  color:     var(--color-text-muted);
  font-size: 0.8em;
}

.special-action .btn {
  flex-shrink: 0;
  min-width:   80px;
}

[data-theme="light"] .special-action:hover {
  background: rgba(123, 92, 184, 0.05);
}

/* ── 19. Settings cards ────────────────────────────────────────────────────── */
.settings-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   16px;
  margin-top:            20px;
}

.setting-card {
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-md);
  padding:        14px 16px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  box-shadow:     var(--shadow-sm);
  transition:     box-shadow var(--transition-base), border-color var(--transition-base);
}

.setting-card:hover {
  border-color: var(--color-primary);
  box-shadow:   var(--shadow-md);
}

.setting-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
}

.setting-card-name {
  font-family: monospace;
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--color-text);
  word-break:  break-all;
  line-height: 1.3;
}

.setting-value-code {
  display:     block;
  background:  var(--color-bg);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:     6px 10px;
  font-size:   0.83rem;
  word-break:  break-all;
  color:       var(--color-accent);
  max-height:  80px;
  overflow-y:  auto;
  white-space: pre-wrap;
}

.setting-card-help {
  display:     flex;
  gap:         7px;
  align-items: flex-start;
  font-size:   0.78rem;
  color:       var(--color-text-muted);
  line-height: 1.4;
}

.setting-card-help .fas {
  color:       var(--color-accent);
  flex-shrink: 0;
  margin-top:  2px;
  opacity:     0.8;
}

[data-theme="light"] .setting-card {
  background: #ffffff;
}

[data-theme="light"] .setting-value-code {
  background: #f5f6fa;
  color:      #157585;
}

/* ── 20. Dashboard alert items ─────────────────────────────────────────────── */
.alert-items {
  padding: 4px 0;
}

.alert-item {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  padding:     10px 16px;
  border-bottom: 1px solid var(--color-border);
  transition:  background var(--transition-base);
}

.alert-item:last-child {
  border-bottom: none;
}

.alert-item:hover {
  background: rgba(236, 94, 105, 0.05);
}

.alert-item-icon {
  flex-shrink:     0;
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      rgba(236, 94, 105, 0.14);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  color:           #ec5e69;
  margin-top:      2px;
}

.alert-item-body {
  flex:      1;
  min-width: 0;
}

.alert-item-type {
  font-size:      0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--color-text-muted);
  margin-bottom:  3px;
  line-height:    1.2;
}

.alert-item-detail {
  font-size:   0.85rem;
  color:       var(--color-text);
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px;
  line-height: 1.4;
}

/* ── 21. Dashboard todo scroll ─────────────────────────────────────────────── */
.todo-table-scroll {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
}

/* ── 22. Tracks table (teacher-index) ──────────────────────────────────────── */

/* Séparateur inter-morceaux : remplace le #192231 hardcodé (invisible en dark,
   "noir" en light) par la couleur de fond de la page pour une séparation douce */
.track td {
  border-bottom-color: var(--color-bg) !important;
}

/* Carte élève orange (coordinateur) : fond orange + texte blanc */
.studentToAssignToTrack.orange {
  background:   #e67e00 !important;
  border-color: #e67e00 !important;
  color:        #ffffff !important;
}
.studentToAssignToTrack.orange:hover {
  background: #cc7000 !important;
}

/* Label professeur à l'intérieur d'une carte orange : fond blanc + texte orange */
.studentToAssignToTrack.orange .label-teacher {
  background-color: #ffffff !important;
  color:            #e67e00 !important;
}

/* ── 23. Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 8px 15px;
  font-size: 13px;
}
.breadcrumb > li + li::before {
  color: var(--color-text-muted);
}
.breadcrumb > .active {
  color: var(--color-text-muted);
}
.breadcrumb a {
  color: var(--color-primary);
}
.breadcrumb a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* Bannière prix — zone Cours et Antenne (new_student / renew) */
.price-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface-deep);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.price-banner__label {
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.price-banner__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.price-banner__note {
  color: var(--color-text-muted);
  font-size: 12px;
  flex: 1;
  min-width: 180px;
}

[data-theme="light"] .price-banner {
  background: var(--color-surface-alt);
}