/* TABLES */
.table,
table {
  background: var(--table-bg) !important;
  color: var(--table-text) !important;
  border-color: var(--table-border) !important;
}
.table th, .table thead th {
  background: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  border-color: var(--table-border) !important;
}
.table td, .table tr {
  color: var(--table-text) !important;
  border-color: var(--table-border) !important;
  background: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--table-striped-bg) !important;
}
.table-hover > tbody > tr:hover {
  background: var(--table-hover-bg) !important;
}

/* CARDS */
.card {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 1px 10px rgba(20,22,30,0.05);
}
.card-header, .card-footer {
  background: var(--card-header-bg) !important;
  color: var(--card-header-text) !important;
  border-bottom-color: var(--card-border) !important;
  border-top-color: var(--card-border) !important;
}

.modal-content {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
}
.dropdown-menu {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
}
.badge {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color) !important;
}

/* Cards Bootstrap surchargées par variables */
.card,
.bg-light,
.bg-white {
  background: var(--card-bg, #fff) !important;
  color: var(--card-text, #212529) !important;
  transition: background 0.2s, color 0.2s;
}

/* Pour les cards si tu utilises la classe .card seule */
.card {
  background: var(--card-bg, #fff) !important;
  color: var(--card-text, #212529) !important;
  border-color: var(--card-border, #dee2e6) !important;
}

/* Surcharge Bootstrap pour text-muted en dark mode */
body.dark-mode .text-muted,
body.dark-mode .text-secondary {
  color: var(--card-text-muted, #aaa) !important;
}

/* Pour les tableaux Bootstrap .table (optionnel, si tu veux gérer les tables) */
.table {
  background: var(--table-bg, var(--card-bg, #fff)) !important;
  color: var(--table-text, var(--card-text, #212529)) !important;
}

/* Surcharge des backgrounds Bootstrap */
.bg-light {
  background: var(--card-bg, #fff) !important;
  color: var(--card-text, #212529) !important;
}
.bg-white {
  background: var(--card-bg, #fff) !important;
  color: var(--card-text, #212529) !important;
}
.bg-secondary {
  background: var(--card-bg, #23272f) !important;
  color: var(--card-text, #bfc8da) !important;
}

/* Styles généraux pour tous les champs Bootstrap */
select,
input,
textarea,
.form-control {
  background: var(--input-bg, #fff) !important;
  color: var(--input-text, #212529) !important;
  border-color: var(--input-border, #ced4da) !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

select:focus,
input:focus,
textarea:focus,
.form-control:focus {
  background: var(--input-focus-bg, #e9ecef) !important;
  color: var(--input-focus-text, #212529) !important;
  border-color: var(--input-focus-border, #93c7fd) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-shadow, rgba(13,110,253,.25)) !important;
  outline: none;
}

/* Pour la flèche du select natif en dark */
/* Dans theme_extra.css */
select {
  /* Modern browsers: enlever l’arrière-plan par défaut de la flèche */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Utilisez la variable CSS pour la couleur de la flèche */
  background-image: url("data:image/svg+xml;utf8,<svg fill='var(--select-arrow-color)' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M12 6L8 10 4 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem !important;
}

/* Pour .form-select Bootstrap : même logique */
.form-select {
    /* Pour s'assurer que vos couleurs de fond et de texte sont bien appliquées */
    background: var(--input-bg, #fff) !important;
    color: var(--input-text, #212529) !important;
    border-color: var(--input-border, #ced4da) !important;
}

.form-select:focus {
  background: var(--input-focus-bg, #e9ecef) !important;
  color: var(--input-focus-text, #212529) !important;
  border-color: var(--input-focus-border, #93c7fd) !important;
  box-shadow: 0 0 0 0.2rem var(--input-focus-shadow, rgba(13,110,253,.25)) !important;
}

/* Placeholders pour dark mode */
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder, #b0bbcc) !important;
  opacity: 1;
}

/* PAGINATION — Light/Dark mode */
.page-link {
  background-color: var(--pagination-bg, #f9fafb);
  color: var(--pagination-text, #333);
  border: 1px solid var(--pagination-border, #dee2e6);
  transition: all 0.2s;
}
.page-link:hover {
  background-color: var(--pagination-hover-bg, #eef1f4);
  color: var(--pagination-hover-text, #111);
}
.page-item.active .page-link {
  background-color: var(--pagination-active-bg, #d8e1ec);
  color: var(--pagination-active-text, #222);
  border-color: var(--pagination-active-border, #b3d7ff);
  font-weight: bold;
}
.page-item.disabled .page-link {
  color: var(--pagination-disabled-text, #bcbcbc);
  background-color: var(--pagination-disabled-bg, #ececec);
  border-color: var(--pagination-border, #dee2e6);
  pointer-events: none;
  opacity: .65;
}

.planning-table {
    font-size: 0.7rem;
    table-layout: fixed;
    margin-bottom: 2rem;
    background: var(--planning-bg);
    color: var(--planning-text);
    border-color: var(--planning-border);
}
.planning-table th, .planning-table td {
    min-width: 30px;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    background: var(--planning-bg);
    color: var(--planning-text);
    border-color: var(--planning-border);
}
.ferie {
    background-color: var(--planning-ferie-bg) !important;
    color: var(--planning-text) !important;
}
.weekend {
    background-color: var(--planning-weekend-bg) !important;
    color: var(--planning-text) !important;
}
.vacances {
    background-color: var(--planning-vacances-bg) !important;
    color: var(--planning-text) !important;
}
.today {
    background-color: var(--planning-today-bg) !important;
    color: var(--planning-header-text) !important;
    font-weight: bold;
}
.month-title {
    font-weight: bold;
    font-size: 1rem;
    background-color: var(--planning-header-bg);
    color: var(--planning-header-text);
    text-transform: uppercase;
}

/* Menu déroulant user en dark mode */
body.dark-mode .dropdown-menu,
html.dark-mode .dropdown-menu {
  background: var(--card-bg, #23272f) !important;
  color: var(--card-text, #e8e8e8) !important;
  border-color: var(--card-border, #39414b) !important;
}

body.dark-mode .dropdown-menu .dropdown-item {
  color: var(--card-text, #e8e8e8) !important;
}
body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:active {
  background: var(--sidebar-hover-bg, #29303b) !important;
  color: var(--color-primary, #93c7fd) !important;
}
body.dark-mode .dropdown-menu .dropdown-divider {
  border-color: var(--card-border, #39414b) !important;
}

/* Chevron custom UNIQUEMENT quand le select n'est PAS ouvert */
select.form-select:not(:focus),
.form-select:not(:focus),
select:not(:focus) {
  background-image: url("data:image/svg+xml;utf8,<svg fill='dimgray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 6L8 10 4 6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1.25em 1.25em !important;
  padding-right: 2.5rem !important;
}

/* Mode clair */
html:not(.dark-mode) select.form-select:not(:focus),
html:not(.dark-mode) .form-select:not(:focus),
html:not(.dark-mode) select:not(:focus) {
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 6L8 10 4 6z'/></svg>") !important;
}

/* Quand le select est OUVERT (focus), on enlève la flèche custom pour éviter les bugs d'affichage */
select.form-select:focus,
.form-select:focus,
select:focus {
  background-image: none !important;
}

/* Cache l'input natif tout en gardant accessibilité */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1em;
    height: 1em;
    z-index: -1;
}

/* Apparence case à cocher (le carré) */
input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--input-border, #ced4da);
    background-color: var(--input-bg, #fff);
    border-radius: 0.25em;
    margin-right: 0.5em;
    vertical-align: middle;
    transition: background-color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

/* Apparence coche (le V) */
input[type="checkbox"] + label::after {
    content: '';
    display: block;
    position: absolute;
    width: 0.5em;
    height: 0.25em;
    top: 0.38em;
    left: 0.28em;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg) scale(0);
    opacity: 0;
    transition: transform 0.2s, opacity 0.2s;
}

/* Quand la case est cochée */
input[type="checkbox"]:checked + label::before {
    background-color: var(--color-primary, #0d6efd);
    border-color: var(--color-primary, #0d6efd);
}

/* Afficher la coche */
input[type="checkbox"]:checked + label::after {
    border-left-color: var(--color-text, #fff);
    border-bottom-color: var(--color-text, #fff);
    transform: rotate(-45deg) scale(1);
    opacity: 1;
}

/* Mode DARK : case et coche */
html.dark-mode input[type="checkbox"] + label::before {
    background-color: var(--input-bg, #242834);
    border-color: var(--input-border, #39414b);
}
html.dark-mode input[type="checkbox"]:checked + label::before {
    background-color: var(--color-primary, #93c7fd);
    border-color: var(--color-primary, #93c7fd);
}
html.dark-mode input[type="checkbox"]:checked + label::after {
    border-left-color: var(--color-text, #fff);
    border-bottom-color: var(--color-text, #fff);
}

/* Gérer focus pour accessibilité */
input[type="checkbox"]:focus + label::before {
    outline: 2px solid var(--color-primary, #0d6efd);
    outline-offset: 2px;
}

/* Styles pour les notes internes dans ticket/view.php */
.card.card-dark {
    background-color: #343a40; /* Couleur d'arrière-plan sombre */
    color: #f8f9fa; /* Texte clair */
    border-color: #495057;
}

.card.card-dark .card-header {
    background-color: #212529 !important; /* En-tête encore plus sombre */
    color: #f8f9fa;
    border-bottom-color: #495057;
}

.card.card-dark .card-header small.text-muted {
    color: #adb5bd !important; /* Texte de la date/auteur légèrement plus clair */
}

.card.card-dark .badge.bg-secondary {
    background-color: #6c757d !important; /* Badge de la note interne */
}

/* Vous pouvez aussi ajouter une bordure différente ou une icône spécifique */
.messages-list .card {
    transition: all 0.3s ease-in-out; /* Animation pour l'apparition */
}

.messages-list .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

/* Toujours clair dans le cadre de prévisualisation */
.preview-fixed-light{
  background:#fff !important;
  color:#111 !important;
  border-color:#dee2e6 !important; /* gris clair Bootstrap */
}

/* Liens lisibles en clair */
.preview-fixed-light a{
  color:#0d6efd !important; /* primaire BS */
}

/* Si ton dark theme applique des filtres aux images, neutralise-les ici */
.preview-fixed-light img{
  filter:none !important;
}

/* Par sécurité, même si <html> est en dark */
.dark-mode .preview-fixed-light{
  background:#fff !important;
  color:#111 !important;
}

/* (optionnel) Si ton thème utilise des variables CSS, verrouille-les ici */
.preview-fixed-light{
  --card-bg:#fff;
  --card-text:#111;
  --table-bg:#fff;
  --table-text:#111;
  --table-header-bg:#f3f4f6;
  --table-header-text:#111;
}