/* ==========================================================================
   Portail agents imkiz : pont entre Bootstrap 5.1 et le theme v2 (www/_platform/css/theme.css).
   Les couleurs, la police et les formes viennent de ces jetons (--bg, --card, --surface, --ink, --line, --brand,
   --imkiz...), qui basculent en mode nuit via data-theme="dark" sur <html> : aucune couleur n'est donc a
   dupliquer ici. Charge par index.php apres bootstrap.min.css et jquery-ui.css.
   bootstrap.min.css est un vendor compile sans source Sass : surcharge par selecteurs explicites.
   ========================================================================== */

:root {
  --bs-font-sans-serif: var(--font);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body); /* meme taille de texte par defaut que le suivi de bien */
  color: var(--ink);
  background-color: var(--bg);
}

/* Convention du suivi de bien : lien sans soulignement, souligne au survol */
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand);
  text-decoration: underline;
}

hr {
  color: var(--line-strong);
}

.text-dark {
  color: var(--ink) !important;
}
.text-muted,
.text-gray-600,
.text-gray-500 {
  color: var(--ink-2) !important;
}
.text-gray-800,
.text-gray-900 {
  color: var(--ink) !important;
}
.bg-white {
  background-color: var(--bg) !important;
}
.border,
.border-bottom,
.border-top {
  border-color: var(--line) !important;
}

/* --- Champs ------------------------------------------------------------ */

.form-control,
.form-select,
textarea {
  border-radius: var(--radius-field) !important;
  border: 1px solid var(--field-line);
  background-color: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.form-control::placeholder {
  color: var(--ink-3);
}
.form-control:focus,
.form-select:focus,
.form-control-user:focus {
  border-color: var(--brand);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 25%, transparent);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--field-disabled-bg);
  color: var(--ink-2);
}
.form-check-input {
  background-color: var(--surface);
  border-color: var(--line-strong);
}
.form-check-input:checked {
  background-color: var(--imkiz);
  border-color: var(--imkiz);
}
.form-check-label {
  color: inherit;
}
/* Navigateurs qui remplissent les champs : evite le fond jaune clair en mode nuit */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--ink);
}

/* Mode nuit : fleche des listes et bouton du commutateur en clair (images integrees a bootstrap.min.css) */
:root[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AAB4C8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.55%29'/%3e%3c/svg%3e");
}

/* --- Boutons ----------------------------------------------------------- */

/* Taille unique des boutons, la meme que dans le suivi de bien (btn-sm compris) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
/* Pas de surbrillance de toucher (iOS) ni d'anneau de focus apres un simple toucher : sur mobile ils laissaient un aplat
   dans le bouton touche. Les etats survol / focus ci-dessous ne s'appliquent qu'a une vraie souris (hover: hover) ou au clavier. */
.btn {
  -webkit-tap-highlight-color: transparent;
}
.btn:focus:not(:focus-visible) {
  box-shadow: none;
}
/* Bouton accole a un champ : il prend la hauteur du champ */
.input-group > .btn {
  height: auto;
}

.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--imkiz) !important;
  border-color: var(--imkiz) !important;
  color: var(--on-accent) !important;
}
.btn-primary:not(:disabled):not(.disabled):focus-visible {
  background-color: var(--imkiz-hover) !important;
  border-color: var(--imkiz-hover) !important;
}
@media (hover: hover) {
  .btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--imkiz-hover) !important;
    border-color: var(--imkiz-hover) !important;
  }
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--imkiz);
  border-color: var(--imkiz);
  color: var(--on-accent);
  opacity: .45;
  filter: saturate(.55);
}

/* Etats de base repetes pour :hover / :focus / :active : bootstrap.min.css leur donne un fond clair (#f9fafb) qui,
   colle apres un toucher sur mobile, faisait un aplat blanc dans le bouton. Le vrai survol est redonne plus bas. */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--ink);
}
.btn-secondary:focus-visible,
.btn-light:focus-visible,
.btn-outline-secondary:focus-visible {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-line-hover);
  color: var(--ink);
}
@media (hover: hover) {
  .btn-secondary:hover,
  .btn-light:hover,
  .btn-outline-secondary:hover {
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-line-hover);
    color: var(--ink);
  }
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: transparent;
  border-color: var(--imkiz);
  color: var(--imkiz);
}
.btn-outline-primary:focus-visible {
  background-color: var(--imkiz);
  border-color: var(--imkiz);
  color: var(--on-accent);
}
@media (hover: hover) {
  .btn-outline-primary:hover {
    background-color: var(--imkiz);
    border-color: var(--imkiz);
    color: var(--on-accent);
  }
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--on-accent);
}
.btn-danger:hover {
  filter: brightness(1.1);
}
.btn-success,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--ok);
  border-color: var(--ok);
  color: var(--on-accent);
}
.btn-warning,
.btn-warning:hover {
  background-color: var(--warn-soft);
  border-color: var(--warn-soft);
  color: var(--warn);
}

/* Croix des modales et alertes : image noire dans bootstrap.min.css, inversee en mode nuit */
:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Cartes, modales, listes, menus ------------------------------------ */

.card {
  background-color: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--ink);
}
.card.shadow,
.card.shadow-lg {
  box-shadow: none;
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.modal-content {
  background-color: var(--modal-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
}
.modal-header,
.modal-footer {
  border-color: var(--line);
}
.modal-footer {
  background-color: var(--modal-footer-bg);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.list-group-item {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.list-group-item.disabled,
.list-group-item:disabled {
  background-color: var(--surface-2);
  color: var(--ink-3);
}
.list-group-item[onclick]:hover {
  background-color: var(--btn-hover-bg);
}

.dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.dropdown-item {
  color: var(--ink);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--btn-hover-bg);
  color: var(--ink);
}

.table {
  color: var(--ink);
  border-color: var(--line);
}

/* --- Alertes ----------------------------------------------------------- */

.alert {
  border-radius: 10px;
}
.alert-danger {
  background-color: var(--danger-soft);
  border-color: var(--danger-soft);
  color: var(--danger);
}
.alert-info {
  background-color: var(--info-soft);
  border-color: var(--info-soft);
  color: var(--info);
}
.alert-warning {
  background-color: var(--warn-soft);
  border-color: var(--warn-soft);
  color: var(--warn);
}
.alert-success {
  background-color: var(--ok-soft);
  border-color: var(--ok-soft);
  color: var(--ok);
}
.alert-link {
  color: inherit;
  text-decoration: underline;
}

/* --- Composants tiers -------------------------------------------------- */

/* jQuery UI (liste de l'autocompletion) */
.ui-widget-content {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.ui-widget-content .ui-state-active,
.ui-widget-content .ui-state-hover,
.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
  border: 1px solid var(--line-strong);
  background: var(--btn-hover-bg);
  color: var(--ink);
}

/* Selecteur de date et heure (jquery.datetimepicker, charge apres ce fichier : on double le selecteur) */
:root[data-theme="dark"] .xdsoft_datetimepicker.xdsoft_datetimepicker {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
  color: var(--ink-3);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td:hover,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: var(--btn-hover-bg) !important;
  color: var(--ink) !important;
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--imkiz);
  color: var(--on-accent);
  box-shadow: none;
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label,
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
  background: var(--imkiz);
  color: var(--on-accent);
}

/* Graphiques Chartist (trafic du lien de partage) */
.ct-label {
  color: var(--ink-3);
  fill: var(--ink-3);
}
.ct-grid {
  stroke: var(--line);
}