/* ============================================================
   DSFR – Banner plugin override
   Adapté pour redmine_banner 0.5.2 / Redmine 7.0.1
   Basé sur les conventions DSFR établies en 0.3.4 (Redmine 6.1.2)
   ============================================================ */

/* Base banner */
div.banner {
  position: relative;
  padding: 1rem 1rem 1rem 2.5rem;
  margin: 0.5rem 0;
  border-left: 4px solid transparent;
  background-color: var(--background-contrast-grey);
  color: var(--text-default-grey);
}

/* ===============================
   INFO
   =============================== */
div.banner_info,
span.banner_info {
  background-color: var(--background-contrast-info);
  border-left-color: var(--border-plain-info);
  color: var(--text-default-info);
}

div.banner_info::before,
span.banner_info::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/information-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/information-line.svg") no-repeat center;
}

/* Variantes span (inline) : nouveau en 0.5.2, pas de bloc plein — padding
   réduit et icône recentrée verticalement plutôt que calée en haut */
span.banner_info,
span.banner_warn,
span.banner_alert {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.5rem 0.15rem 1.75rem;
  border-radius: 0.25rem;
}

span.banner_info::before,
span.banner_warn::before,
span.banner_alert::before {
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
}

/* ===============================
   WARNING
   =============================== */
div.banner_warn,
span.banner_warn {
  background-color: var(--background-contrast-warning);
  border-left-color: var(--border-plain-warning);
  color: var(--text-default-warning);
}

div.banner_warn::before,
span.banner_warn::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/error-warning-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/error-warning-line.svg") no-repeat center;
}

/* ===============================
   ALERT / ERROR
   =============================== */
div.banner_alert,
span.banner_alert {
  background-color: var(--background-contrast-error);
  border-left-color: var(--border-plain-error);
  color: var(--text-default-error);
}

div.banner_alert::before,
span.banner_alert::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/fr--error-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/fr--error-line.svg") no-repeat center;
}

/* ===============================
   NORMAL / DEFAULT
   =============================== */
div.banner_normal {
  background-color: var(--background-default-grey);
  border-left-color: var(--border-default-grey);
}

/* ===============================
   NO DATA
   =============================== */
div.banner_nodata {
  text-align: center;
  background-color: var(--background-contrast-grey);
  border-left-color: var(--border-default-grey);
  color: var(--text-mention-grey);
}

/* ===============================
   TIMER — icône inline, nouveau en 0.5.2
   =============================== */
span.use_timer {
  position: relative;
  display: inline-block;
  padding-right: 1.5rem;
}

span.use_timer::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/timer-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/timer-line.svg") no-repeat center;
}

/* ===============================
   EDIT / ACTIONS
   =============================== */
div.banner_edit {
  background: none;
  text-align: right;
  font-size: 0.75rem;
  color: var(--text-mention-grey);
}

div.banner_area,
div.project_banner_area {
  position: relative;
}

div.banner_area div.banner_edit,
div.project_banner_area div.banner_edit {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  opacity: 0.6;
}

div.banner_area div.banner_edit:hover,
div.project_banner_area div.banner_edit:hover {
  opacity: 1;
}

/* banner_more_info : nouveau en 0.5.2, même traitement que banner_edit,
   centré plutôt qu'aligné à droite */
div.banner_area div.banner_more_info {
  position: absolute;
  bottom: 0.5rem;
  right: 50%;
  font-size: 0.75rem;
  background: none;
  color: var(--text-mention-grey);
  opacity: 0.5;
}

div.banner_area div.banner_more_info:hover {
  opacity: 1;
}

/* ===============================
   ICONES DE BOUTON
   =============================== */
.banner-icon-off,
.banner-icon-edit {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

.banner-icon-off {
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/close-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/system/close-line.svg") no-repeat center;
}

.banner-icon-edit {
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/editor/edit-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/editor/edit-line.svg") no-repeat center;
}

/* ===============================
   BADGES DE RÔLE — nouveau en 0.5.2
   Tokens "flat-*" confirmés présents dans core.min.css de ce thème.
   =============================== */
.banner-role-label {
  display: inline-block;
  margin-right: 0.4rem;
  margin-left: 0.65rem;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.85em;
}

.banner-role-label-default {
  background-color: var(--background-contrast-grey);
  color: var(--text-default-grey);
}

.banner-role-label-1 {
  background-color: var(--background-flat-red-marianne);
  color: #fff;
}

.banner-role-label-2 {
  background-color: var(--background-flat-orange-terre-battue);
  color: #fff;
}

.banner-role-label-3 {
  background-color: var(--background-flat-blue-cumulus);
  color: #fff;
}

.banner-role-label-4 {
  background-color: var(--background-flat-green-emeraude);
  color: #fff;
}

.banner-role-label-5 {
  background-color: var(--background-flat-blue-france);
  color: var(--text-inverted-blue-france);
}

.banner-role-label-6 {
  background-color: var(--background-flat-purple-glycine);
  color: #fff;
}

.banner-role-label-7 {
  background-color: var(--background-flat-grey);
  color: #fff;
}

/* ===============================
   FENÊTRE POPUP — nouveau en 0.5.2
   Fallbacks var(--token, valeur) sur les tokens pas encore vérifiés en
   prod : une seule var() non résolue invalide toute la déclaration
   (vécu sur le gradient du header), autant s'en prémunir ici.
   =============================== */
div.banner-popup-window {
  display: none;
  position: fixed;
  z-index: 200;
  width: 420px;
  min-height: 200px;
  max-height: 90vh;
  box-sizing: border-box;
  background-color: var(--background-raised-grey, #fff);
  border: 1px solid var(--border-default-grey, #ddd);
  border-radius: 0.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  color: var(--text-default-grey, #333);
  resize: vertical;
  overflow: hidden;
}

div.banner-popup-window.banner-popup-open {
  display: flex;
  flex-direction: column;
}

div.banner-popup-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.65rem;
  background-color: var(--background-action-high-blue-france, #000091);
  color: var(--text-inverted-blue-france, #fff);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}

span.banner-popup-title {
  font-weight: bold;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.banner-popup-close {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  padding: 0 0.25rem;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.85;
}

a.banner-popup-close:hover {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

div.banner-popup-content {
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.9em;
  line-height: 1.5;
  word-wrap: break-word;
}

div.banner-popup-content p:first-child { margin-top: 0; }
div.banner-popup-content p:last-child  { margin-bottom: 0; }

div.banner-popup-window.banner-popup-dragging { opacity: .95; }

div.banner-popup-window.banner-popup-dragging div.banner-popup-content {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 899px) {
  div.banner-popup-window { display: none !important; }
}

/* ===============================
   LIEN DÉCLENCHEUR DE LA POPUP
   Icône DSFR (mask SVG du thème) plutôt que le data-URI en dur du stock.
   =============================== */
a[href^="#banner-popup-"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

a[href^="#banner-popup-"]::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/communication/discuss-line.svg") no-repeat center;
  -webkit-mask: url("/themes/redmine_dsfr/stylesheets/dsrt/icons/communication/discuss-line.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

@media (max-width: 899px) {
  a[href^="#banner-popup-"]::after {
    content: "\25BE";
    margin-left: 0.2rem;
    font-size: 0.85em;
    line-height: 1;
  }
  a.banner-popup-trigger-open::after { content: "\25B4"; }
  a.banner-popup-trigger-open { font-weight: bold; }
}

/* ===============================
   ACCORDÉON MOBILE — nouveau en 0.5.2
   =============================== */
div.banner-popup-source.banner-popup-inline-open {
  margin: 0.4rem 0 0.15rem;
  padding: 0.5rem 0.65rem;
  max-height: 50vh;
  overflow-y: auto;
  background-color: var(--background-contrast-grey, rgba(255, 255, 255, .75));
  border: 1px solid var(--border-default-grey, rgba(0, 0, 0, .15));
  border-radius: 0.2rem;
  font-size: 0.9em;
  line-height: 1.5;
  word-wrap: break-word;
}

div.banner-popup-source.banner-popup-inline-open div.banner-popup-body > p:first-child { margin-top: 0; }
div.banner-popup-source.banner-popup-inline-open div.banner-popup-body > p:last-child  { margin-bottom: 0; }

a.banner-popup-inline-close {
  float: right;
  margin: -0.15rem -0.15rem 0 0.4rem;
  padding: 0 0.4rem;
  color: var(--text-action-high-blue-france, #4a5f7a);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  opacity: 0.7;
}

a.banner-popup-inline-close:hover,
a.banner-popup-inline-close:active {
  opacity: 1;
  text-decoration: none;
}

/* ===============================
   RÉGLAGES DU PLUGIN
   =============================== */
.tabular.settings > .settings_for_banner > p {
  padding-left: 200px;
}

.tabular.settings > .settings_for_banner > p > label {
  margin-left: -200px;
  width: 180px;
}

@media (max-width: 899px) {
  #content > div.banner_area {
    margin-bottom: 0.5rem;
  }
}

/* ===============================
   FADE OUT
   =============================== */
.fadeout {
  animation: fadeOut 1s both;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}