/* ===== RetroRoads theme pour Roundcube elastic — DEBUT ===== */
/* Principe calque sur l'admin CMS RetroRoads V12 :
   - colonne des icones (taskmenu) : TEAL DEEP dans les deux modes
   - 2e colonne + contenu : suit le mode (clair = crème/blanc, sombre = teal)
   - accents / boutons : DORE  */

/* Palette */
:root {
  --rr-teal-deep:#0e2a35;
  --rr-teal-dark:#143842;
  --rr-teal:#20697C;
  --rr-gold:#BB7F4D;
  --rr-gold-l:#DDAA72;
  --rr-orange:#E97D35;
  --rr-ivory:#f0ece2;
}

/* ---------- COLONNE DES ICONES (toujours teal deep, comme la sidebar admin) ---------- */
#layout #layout-menu, #layout-menu, #taskmenu,
#layout-menu #taskmenu {
  background-color: var(--rr-teal-deep) !important;
}
/* largeur colonne elargie (+1/3) sur grand ecran */
@media screen and (min-width: 1200px) {
  #layout #layout-menu, #layout-menu { width: 139px !important; }
}
/* zone du logo en haut : meme fond teal, pas de gris (clair ET sombre) */
#layout #layout-menu .popover-header,
html #layout-menu .popover-header,
html:not(.dark-mode) #layout-menu .popover-header,
:root:not(.dark-mode) #layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  background-color: var(--rr-teal-deep) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* bloc du bas (Mode sombre / A propos / Deconnexion) : teal, plus de gris */
#taskmenu .special-buttons, #layout-menu .special-buttons {
  background-color: var(--rr-teal-deep) !important;
}
/* tous les items : fond transparent = on voit le teal deep de la colonne */
#taskmenu a, #layout-menu a,
#taskmenu .action-buttons a, #taskmenu .special-buttons a {
  background-color: transparent !important;
  color: rgba(240,236,226,.8) !important;
}
#taskmenu a .inner, #layout-menu a .inner { color: rgba(240,236,226,.8) !important; }
#taskmenu a:hover, #layout-menu a:hover {
  color:#fff !important;
  background-color: rgba(255,255,255,.06) !important;
}
/* item selectionne : teal */
#taskmenu a.selected, #layout-menu a.selected,
#taskmenu a.compose.selected {
  color:#fff !important;
  background-color: var(--rr-teal) !important;
}
#taskmenu a.selected .inner { color:#fff !important; }
/* deconnexion en rouge doux comme l'admin */
#taskmenu a.logout .inner { color:#E98A6E !important; }

/* items + surbrillance selection : pleine largeur de la colonne (139px), bord a bord */
@media screen and (min-width: 1200px) {
  #layout-menu #taskmenu a,
  #taskmenu a,
  #taskmenu .action-buttons a,
  #taskmenu .special-buttons a {
    width: 139px !important;
    min-width: 139px !important;
    max-width: 139px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #taskmenu a .inner { text-align: center !important; width: 100% !important; }
  #layout-menu #taskmenu,
  #taskmenu .action-buttons,
  #taskmenu .special-buttons,
  #layout-menu .popover-header {
    width: 139px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important;
  }
}

/* ---------- MODE CLAIR : 2e colonne + contenu = clair ---------- */
:root:not(.dark-mode) {
  --rr-bg:#F3F3F0; --rr-panel:#ffffff; --rr-text:#181E2A;
  --rr-muted:#6b6b6b; --rr-border:#e5e3dc;
}
/* ---------- MODE SOMBRE : 2e colonne + contenu = teal ---------- */
html.dark-mode {
  --rr-bg:#0e2a35; --rr-panel:#143842; --rr-text:#f0ece2;
  --rr-muted:#a5a8a0; --rr-border:#1e4a55;
}

/* Applique le mode a tout SAUF la colonne icones */
#layout-content, #layout-sidebar, #layout-list,
#layout-content .scroller, #layout-list .scroller,
.content, .boxlist, .listing, .messagelist,
.formcontainer, .uibox, .iframe-wrapper {
  background-color: var(--rr-panel) !important;
  color: var(--rr-text);
}
#layout, body { background-color: var(--rr-bg) !important; color: var(--rr-text); }

/* Entetes de colonne (bandeau "Parametres", "Actions"...) : suit le mode, pas de teal isole */
.header, #layout-sidebar .header, #layout-list .header,
.boxtitle, .header-title {
  background-color: var(--rr-panel) !important;
  color: var(--rr-text) !important;
  border-bottom: 1px solid var(--rr-border) !important;
}

/* Liste de gauche (Preferences/Dossiers/Identites...) */
#settings-menu li a, .listing td, .listing a { color: var(--rr-text); }
#settings-menu li.selected a, .listing tr.selected td, .listing li.selected > a {
  background-color: var(--rr-gold) !important;
  color:#fff !important;
}

/* Boutons primaires -> dore, avec reaction au survol/focus (calque admin CMS) */
.btn-primary, button.primary, .formbuttons .button.mainaction,
.pagenav a.button.selected, a.button.create, .btn.create,
button.btn.btn-primary, input.button.mainaction {
  background-color: var(--rr-gold) !important;
  border-color: var(--rr-gold) !important;
  color:#fff !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.btn-primary:hover, button.primary:hover, .formbuttons .button.mainaction:hover,
a.button.create:hover, button.btn.btn-primary:hover {
  background-color: var(--rr-gold-l) !important;
  border-color: var(--rr-gold-l) !important;
  box-shadow: 0 4px 12px rgba(187,127,77,.35) !important;
}
.btn-primary:active, button.primary:active { transform: translateY(1px) !important; }
.btn-primary:focus, button.primary:focus { box-shadow: 0 0 0 3px rgba(221,170,114,.4) !important; }

/* Boutons secondaires : hover teal discret */
.btn-secondary:hover, button.btn:not(.btn-primary):not(.delete):not(.btn-danger):hover {
  border-color: var(--rr-teal) !important;
  color: var(--rr-teal) !important;
}

/* Actions destructives (supprimer) -> rouge RetroRoads au survol */
.btn-danger, button.delete, a.button.delete, .btn.delete {
  color: var(--rr-red, #D74B37) !important;
}
.btn-danger:hover, button.delete:hover, a.button.delete:hover, .btn.delete:hover {
  background-color: #D74B37 !important;
  border-color: #D74B37 !important;
  color:#fff !important;
}

/* Liens */
a { color: var(--rr-teal); }
html.dark-mode a { color: var(--rr-gold-l); }

/* ---------- CHAMPS & FORMULAIRES : suivent le mode ---------- */
/* Clair = fond blanc, texte fonce, bordure claire */
:root:not(.dark-mode) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
:root:not(.dark-mode) textarea,
:root:not(.dark-mode) select,
:root:not(.dark-mode) .form-control,
:root:not(.dark-mode) .ac-input,
:root:not(.dark-mode) .recipient-input,
:root:not(.dark-mode) #composebody,
:root:not(.dark-mode) .mce-content-body,
:root:not(.dark-mode) .html-editor,
:root:not(.dark-mode) .propform,
:root:not(.dark-mode) .compose-headers,
:root:not(.dark-mode) #compose-content,
:root:not(.dark-mode) .formcontent {
  background-color:#ffffff !important;
  color:#181E2A !important;
  border-color:#e5e3dc !important;
}
:root:not(.dark-mode) .compose-editor, :root:not(.dark-mode) .messageview {
  background-color:#ffffff !important; color:#181E2A !important;
}

/* Sombre = fond teal fonce, texte ivoire */
html.dark-mode input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode #composebody,
html.dark-mode .mce-content-body,
html.dark-mode .compose-headers,
html.dark-mode #compose-content {
  background-color:#0e2a35 !important;
  color:#f0ece2 !important;
  border-color:#1e4a55 !important;
}

/* Barre d'outils de l'editeur (icone image en haut du corps) : suit le mode */
:root:not(.dark-mode) .editor-toolbar, :root:not(.dark-mode) .mce-toolbar,
:root:not(.dark-mode) .toolbar.editor-toolbar {
  background-color:#f0eee7 !important; border-color:#e5e3dc !important;
}

/* Colonne de droite (options d'envoi : Avis d'ouverture, Priorite...) : suit le mode */
:root:not(.dark-mode) #compose-options, :root:not(.dark-mode) .compose-options,
:root:not(.dark-mode) #layout-sidebar {
  background-color:#F3F3F0 !important; color:#181E2A !important;
}

/* Colonne des icones un peu plus large (+1/3) pour aerer le logo */
@media screen and (min-width: 1200px) {
  #layout-menu { width: 139px !important; }
  #layout { padding-left: 0 !important; }
}
/* Logo : profite de la largeur, du blanc autour */
#layout-menu .popover-header img {
  max-width: 120px !important;
  max-height: 74px !important;
  padding: .5rem .35rem !important;
}
#layout-menu .popover-header { padding: .35rem 0 !important; }

/* ---------- BARRE D'OUTILS DU HAUT (Selectionner/Options/Repondre/Supprimer...) ---------- */
/* Clair = creme, plus de gris */
:root:not(.dark-mode) .toolbar,
:root:not(.dark-mode) #messagelistcontainer .toolbar,
:root:not(.dark-mode) #layout-list .header,
:root:not(.dark-mode) #layout-content .header {
  background-color:#F3F3F0 !important;
  border-bottom:1px solid #e5e3dc !important;
  color:#181E2A !important;
}
:root:not(.dark-mode) .toolbar a, :root:not(.dark-mode) .toolbar .inner { color:#374549 !important; }
:root:not(.dark-mode) .toolbar a:hover { background-color:#e9e6dd !important; }

/* Sombre = teal */
html.dark-mode .toolbar,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
  background-color:#0e2a35 !important;
  border-bottom:1px solid #1e4a55 !important;
  color:#f0ece2 !important;
}
html.dark-mode .toolbar a, html.dark-mode .toolbar .inner { color:#f0ece2 !important; }
html.dark-mode .toolbar a:hover { background-color:#143842 !important; }

/* barre de recherche : suit le mode */
:root:not(.dark-mode) .searchbar, :root:not(.dark-mode) .searchbar input { background-color:#fff !important; color:#181E2A !important; }
html.dark-mode .searchbar, html.dark-mode .searchbar input { background-color:#0e2a35 !important; color:#f0ece2 !important; }

/* Masque le bouton "A propos de" de la colonne */
#taskmenu a.about, #layout-menu a.about { display: none !important; }

/* Page de connexion : liseré dore */
.login-form { border-top: 3px solid var(--rr-gold); }


/* la plaque longue ne rentre pas dans la colonne : on met le badge RR compact,
   qui s adapte a la largeur de la colonne (78 / 104 / 139px selon l etat) */
#layout-menu .popover-header img { display: none !important; }
#layout #layout-menu .popover-header,
html #layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  background-image: url(../images/retroroads-badge-rr.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  min-height: 54px !important;
  height: 58px !important;
  background-color: var(--rr-teal-deep) !important;
}
/* la page de connexion garde la plaque complete (large) */
#login-form .popover-header img,
.login-form img#logo { display: inline-block !important; }

/* ================= PAGE DE LOGIN (modele admin RetroRoads) ================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

html:has(body.task-login) { background:#0e2a35 !important; }
body.task-login {
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color:#f0ece2 !important;
  background:linear-gradient(175deg, #0a1e28 0%, #0e2a35 40%, #163a48 100%) !important;
}
body.task-login #layout, body.task-login #layout-content { background:transparent !important; }

/* barre arc-en-ciel en haut */
body.task-login::before {
  content:''; position:fixed; top:0; left:0; right:0; height:4px; z-index:9999;
  background:linear-gradient(90deg,#D74B37,#E97D35,#EEC439,#20697C,#BB7F4D);
}

/* conteneur centre */
body.task-login .rr-login-wrap {
  max-width:440px; margin:0 auto; padding:24px 20px;
  display:flex; flex-direction:column; align-items:center;
}

/* logo */
body.task-login #logo {
  width:240px !important; max-width:70vw !important; height:auto !important;
  max-height:none !important; object-fit:contain !important;
  border-radius:16px !important; box-shadow:0 16px 48px rgba(0,0,0,.4) !important;
  margin:0 auto 1rem auto !important; display:block !important;
}

/* filet anime */
body.task-login .rr-bar { display:flex; gap:4px; justify-content:center; margin:0 0 2rem; }
body.task-login .rr-bar span {
  width:32px; height:3px; border-radius:2px; background:rgba(187,127,77,.3);
  animation:rrPulse 1.8s ease-in-out infinite;
}
body.task-login .rr-bar span:nth-child(2){animation-delay:.2s}
body.task-login .rr-bar span:nth-child(3){animation-delay:.4s}
body.task-login .rr-bar span:nth-child(4){animation-delay:.6s}
body.task-login .rr-bar span:nth-child(5){animation-delay:.8s}
@keyframes rrPulse { 0%,100%{opacity:.3} 50%{opacity:1;background:#BB7F4D} }

/* card */
body.task-login .rr-card {
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(187,127,77,.18);
  border-radius:16px; padding:36px 32px;
  backdrop-filter:blur(20px);
}
body.task-login .rr-welcome {
  font-family:'Oswald', 'DIN Condensed', 'Arial Narrow', sans-serif !important;
  font-size:30px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  color:#DDAA72; text-align:center; margin:0 0 8px;
}
body.task-login .rr-sub {
  text-align:center; font-size:11px; color:rgba(255,255,255,.4);
  letter-spacing:2px; text-transform:uppercase; margin:0 0 28px;
}

/* le form : plein largeur, table transparente */
body.task-login #login-form table, body.task-login #login-form tbody,
body.task-login #login-form tr, body.task-login #login-form td { display:block; width:100%; }
body.task-login #login-form tr.form-group { margin-bottom:18px; }

/* labels visibles facon admin */
body.task-login #login-form td.title { display:block !important; }
body.task-login #login-form td.title label {
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.45); margin-bottom:6px;
}

/* pas de pictos */
body.task-login .input-group-prepend, body.task-login .input-group-text { display:none !important; }

/* champs (valeurs admin) */
body.task-login input:not([type=submit]):not([type=button]):not([type=hidden]) {
  width:100% !important; padding:13px 16px !important;
  border-radius:10px !important; border:1.5px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important; color:#fff !important;
  font-size:14px !important; box-shadow:none !important;
}
body.task-login input:focus:not([type=submit]):not([type=button]) {
  outline:none !important; border-color:#BB7F4D !important;
  box-shadow:0 0 0 3px rgba(187,127,77,.12) !important; background:rgba(255,255,255,.08) !important;
}
body.task-login input::placeholder { color:rgba(255,255,255,.4) !important; }

/* AUTOFILL : Chrome/Safari (webkit) ET Firefox */
body.task-login input:-webkit-autofill,
body.task-login input:-webkit-autofill:hover,
body.task-login input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #14313c inset !important;
  caret-color:#fff !important;
}
body.task-login input:autofill { background:#14313c !important; color:#fff !important; }
@-moz-document url-prefix() {
  body.task-login input:not([type=submit]):not([type=button]) {
    background-color:#14313c !important; color:#fff !important;
    filter:none !important;
  }
}

/* bouton "Se connecter" (identique admin) */
body.task-login .formbuttons .button.mainaction,
body.task-login button.btn-primary, body.task-login button.mainaction,
body.task-login input.btn-primary {
  display:block !important; width:100% !important; padding:14px 26px !important;
  border:0 !important; border-radius:10px !important;
  background:linear-gradient(135deg,#BB7F4D,#DDAA72) !important;
  color:#fff !important; font-size:14px !important; font-weight:600 !important;
  letter-spacing:1px !important; margin-top:14px !important; cursor:pointer !important;
  box-shadow:none !important; transition:all .25s !important;
}
body.task-login .formbuttons .button.mainaction:hover,
body.task-login button.btn-primary:hover {
  transform:translateY(-1px) !important; box-shadow:0 8px 20px rgba(187,127,77,.3) !important;
}

/* pied */
body.task-login #login-footer {
  text-align:center; margin-top:18px; font-size:12px; color:rgba(255,255,255,.4) !important;
  font-family:'Playfair Display', Georgia, serif !important;
}

/* --- login : corrige le placement (bouton dans le flux, pas de vide) --- */
body.task-login #login-content, body.task-login .formcontent { position:static !important; }
body.task-login .formbuttons {
  position:static !important; margin-top:8px !important; padding:0 !important;
  bottom:auto !important; right:auto !important; left:auto !important; text-align:center !important;
}
body.task-login #login-form { position:static !important; }
body.task-login #login-form table { border-spacing:0 !important; }
body.task-login #login-form tr.form-group { margin-bottom:16px !important; }
/* la card contient tout, hauteur naturelle */
body.task-login .rr-card { min-height:0 !important; }
/* wrap : logo au-dessus, pas de chevauchement */
body.task-login .rr-login-wrap { padding-top:32px !important; }
body.task-login #layout-content { display:block !important; overflow:auto !important; }

/* --- login : empeche le chevauchement logo / card --- */
body.task-login #layout-content { display:flex !important; align-items:center; justify-content:center; }
body.task-login .rr-login-wrap {
  display:flex !important; flex-direction:column !important; align-items:center !important;
  position:relative !important;
}
body.task-login #logo { position:relative !important; flex:0 0 auto !important; z-index:2; }
body.task-login .rr-bar { flex:0 0 auto !important; }
body.task-login .rr-card { position:relative !important; z-index:1; flex:0 0 auto !important; margin-top:0 !important; }

/* --- login : flux vertical simple, plus de chevauchement (override final) --- */
body.task-login #layout-content {
  display:block !important;
  padding:48px 16px !important;
  overflow-y:auto !important;
}
body.task-login .rr-login-wrap {
  display:block !important;
  max-width:400px !important; margin:0 auto !important;
}
body.task-login #logo {
  position:static !important; display:block !important;
  margin:0 auto 1rem auto !important; width:220px !important;
}
body.task-login .rr-bar { display:flex !important; margin:0 auto 1.8rem auto !important; }
body.task-login .rr-card {
  position:static !important; display:block !important; clear:both !important; margin:0 !important;
}

/* --- login : TUE tout fond blanc (table, form-control, conteneurs) --- */
body.task-login #login-form,
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td,
body.task-login #login-form .form-control,
body.task-login .propform,
body.task-login .formcontent,
body.task-login #login-content {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* le td des champs ne doit pas avoir de fond */
body.task-login #login-form td.input { background:transparent !important; }

/* AUTOFILL Firefox : le fond jaune vient de :autofill — on le recouvre par un inset opaque teal */
body.task-login input:not([type=submit]):not([type=button]):not([type=hidden]),
body.task-login input:-moz-autofill,
body.task-login input:autofill {
  background-color:#14313c !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 0 0 1000px #14313c inset !important;
  -webkit-box-shadow:0 0 0 1000px #14313c inset !important;
  border:1.5px solid rgba(255,255,255,.12) !important;
  filter:none !important;
}
body.task-login input:focus:not([type=submit]):not([type=button]) {
  background-color:#173a46 !important;
  box-shadow:0 0 0 1000px #173a46 inset, 0 0 0 3px rgba(187,127,77,.18) !important;
  -webkit-box-shadow:0 0 0 1000px #173a46 inset, 0 0 0 3px rgba(187,127,77,.18) !important;
  border-color:#BB7F4D !important;
}

/* ---------- FORM LOGIN facon admin (classes rr-*) ---------- */
body.task-login .rr-field { margin-bottom:16px; }
body.task-login .rr-field label {
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.45); margin-bottom:6px;
}
body.task-login .rr-field input,
body.task-login #rcmloginuser, body.task-login #rcmloginpwd {
  width:100% !important; padding:12px 16px !important;
  border-radius:10px !important; border:1.5px solid rgba(255,255,255,.1) !important;
  background:#14313c !important; color:#fff !important; font-size:14px !important;
  font-family:inherit !important; box-shadow:none !important;
}
body.task-login .rr-field input:focus {
  outline:none !important; border-color:#BB7F4D !important;
  box-shadow:0 0 0 3px rgba(187,127,77,.12) !important; background:#173a46 !important;
}
body.task-login .rr-field input::placeholder { color:rgba(255,255,255,.35) !important; }

/* autofill (Chrome + Firefox) */
body.task-login .rr-field input:-webkit-autofill,
body.task-login .rr-field input:-webkit-autofill:hover,
body.task-login .rr-field input:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #14313c inset !important;
  caret-color:#fff !important;
}
body.task-login .rr-field input:autofill { background:#14313c !important; color:#fff !important; }

/* oeil afficher/masquer */
body.task-login .rr-pw-wrap { position:relative; }
body.task-login .rr-pw-wrap input { padding-right:42px !important; }
body.task-login .rr-pw-eye {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:30px; height:30px; background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  border-radius:50%; padding:0;
}
body.task-login .rr-pw-eye:hover { background:rgba(255,255,255,.08); color:#DDAA72; }

/* bouton (identique admin) */
body.task-login .rr-btn {
  display:block; width:100%; padding:13px 26px; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer; border:none;
  transition:transform .2s, box-shadow .2s; font-family:inherit;
  background:linear-gradient(135deg,#BB7F4D,#DDAA72); color:#fff; margin-top:8px;
}
body.task-login .rr-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(187,127,77,.3); }

/* lien retour */
body.task-login .rr-footer-link { text-align:center; margin-top:20px; font-size:12px; }
body.task-login .rr-footer-link a { color:rgba(255,255,255,.4); text-decoration:none; letter-spacing:1px; }
body.task-login .rr-footer-link a:hover { color:#DDAA72; }

/* ====== AJUSTEMENTS FINAUX LOGIN ====== */
/* police DM Sans sur toute la card + labels */
body.task-login .rr-card, body.task-login .rr-card *,
body.task-login .rr-field, body.task-login .rr-field label,
body.task-login .rr-field input, body.task-login .rr-btn {
  font-family:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body.task-login .rr-welcome { font-family:'Oswald', 'DIN Condensed', 'Arial Narrow', sans-serif !important; }

/* logo plus grand + plus d air autour */
body.task-login #logo { width:270px !important; margin:0 auto 2.4rem auto !important; }
body.task-login .rr-bar { margin:0 auto 4.8rem auto !important; }
body.task-login .rr-login-wrap { padding-top:56px !important; }
body.task-login .rr-card { margin-top:0 !important; padding:38px 32px !important; }

/* JAUNE FIREFOX : parade robuste par transition-delay tres long
   (Firefox n applique le fond autofill qu au chargement, la transition l empeche de persister) */
body.task-login .rr-field input {
  transition: background-color 100000s ease-in-out 0s, color 100000s ease-in-out 0s !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
}
/* et pour Chrome/Safari : inset opaque */
body.task-login .rr-field input:-webkit-autofill,
body.task-login .rr-field input:-webkit-autofill:hover,
body.task-login .rr-field input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #14313c inset !important;
  -webkit-text-fill-color:#fff !important;
}

/* ================= RESPONSIVE LOGIN (mobile / tablette / desktop) ================= */
/* TABLETTE (<= 768px) */
@media screen and (max-width:768px) {
  body.task-login .rr-login-wrap { max-width:380px !important; padding-top:40px !important; }
  body.task-login #logo { width:210px !important; margin:0 auto 1.8rem auto !important; }
  body.task-login .rr-bar { margin:0 auto 3.4rem auto !important; }
  body.task-login .rr-card { padding:30px 24px !important; }
  body.task-login .rr-welcome { font-size:21px !important; }
}
/* MOBILE (<= 480px) */
@media screen and (max-width:480px) {
  body.task-login #layout-content { padding:24px 14px !important; }
  body.task-login .rr-login-wrap { max-width:100% !important; padding-top:24px !important; }
  body.task-login #logo { width:170px !important; margin:0 auto 1.4rem auto !important; }
  body.task-login .rr-bar { margin:0 auto 2.4rem auto !important; gap:3px !important; }
  body.task-login .rr-bar span { width:26px !important; }
  body.task-login .rr-card { padding:26px 20px !important; border-radius:14px !important; }
  body.task-login .rr-welcome { font-size:20px !important; }
  body.task-login .rr-sub { font-size:10px !important; letter-spacing:1.5px !important; }
  body.task-login .rr-field input { font-size:16px !important; } /* 16px = pas de zoom iOS */
  body.task-login .rr-btn { padding:14px 20px !important; }
  /* le badge RR de la colonne ne concerne pas le login : rien a faire ici */
}

/* sous-titre login : sur une seule ligne, pas d accent capitale */
body.task-login .rr-sub {
  white-space:nowrap !important;
  font-size:10px !important;
  letter-spacing:1.5px !important;
}
/* sur tres petit ecran, on autorise le retour a la ligne pour ne pas deborder */
@media screen and (max-width:420px) {
  body.task-login .rr-sub { white-space:normal !important; }
}

/* ================= LOGO / BADGE COLONNE ================= */
#layout-menu .popover-header img { display:none !important; }
#layout-menu .popover-header {
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:var(--rr-teal-deep) !important;
}

/* COLONNE LARGE (fenetre >=1025px) : PLAQUE avec espace (ne touche pas les bords) */
@media screen and (min-width:1025px) {
  #layout #layout-menu .popover-header,
  html #layout-menu .popover-header {
    background-image:url(../images/retroroads-logo.png) !important;
    background-size:78% auto !important;   /* < 100% => espace gauche/droite */
    height:64px !important; min-height:64px !important;
    padding:8px 12px !important;
  }
}

/* COLONNE REDUITE (fenetre <=1024px) : BADGE CARRE avec espace tournant */
@media screen and (max-width:1024px) {
  #layout #layout-menu .popover-header,
  html #layout-menu .popover-header {
    background-image:none !important;   /* colonne reduite : rien, juste le fond teal */
    height:20px !important; min-height:20px !important;
    padding:0 !important;
  }
}

/* ================= SOMBRE : remplace tous les gris residuels par le teal ================= */
/* bandeau du haut de la 2e colonne (nom d utilisateur + 3 points), headers, zones vides */
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #messagelist-header,
html.dark-mode .boxtitle,
html.dark-mode .header.tablink,
html.dark-mode #folderlist-header,
html.dark-mode .listing thead th,
html.dark-mode .listing thead td {
  background-color:#0e2a35 !important;
  color:#f0ece2 !important;
  border-color:#1e4a55 !important;
}
/* zone de lecture / contenu vide a droite */
html.dark-mode #layout-content,
html.dark-mode #messagecontframe,
html.dark-mode .iframe-wrapper,
html.dark-mode #messagelist,
html.dark-mode .messagelist,
html.dark-mode .watermark,
html.dark-mode #preview-frame,
html.dark-mode .contentframe,
html.dark-mode .content {
  background-color:#0e2a35 !important;
}
/* panneaux/boites diverses restees en gris */
html.dark-mode .uibox,
html.dark-mode .scroller,
html.dark-mode .boxcontent,
html.dark-mode .formcontent,
html.dark-mode .propform,
html.dark-mode .record,
html.dark-mode .menu.toolbar,
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui.dialog,
html.dark-mode .ui-dialog {
  background-color:#143842 !important;
  color:#f0ece2 !important;
}
/* lignes de la liste des dossiers/mails */
html.dark-mode .listing tr td,
html.dark-mode .listing li a { color:#f0ece2 !important; }

/* ================= SOMBRE : zone de LECTURE a droite + boites = teal ================= */
html.dark-mode #layout-content,
html.dark-mode #layout-content > *,
html.dark-mode #messagelist-content,
html.dark-mode #messagecontent,
html.dark-mode #messagecontframe,
html.dark-mode .iframe-wrapper,
html.dark-mode #messagepartframe,
html.dark-mode .messageview,
html.dark-mode .message-part,
html.dark-mode .message-htmlpart,
html.dark-mode .contentframe,
html.dark-mode #preview-frame,
html.dark-mode .watermark {
  background-color:#0e2a35 !important;
  color:#f0ece2 !important;
}
/* la barre d outils du haut (Repondre/Transferer/Supprimer...) : teal en dark */
html.dark-mode .toolbar,
html.dark-mode #messagetoolbar,
html.dark-mode .menu.toolbar,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-list > .header {
  background-color:#0e2a35 !important;
  border-color:#1e4a55 !important;
}

/* ================= SOMBRE : grand container de droite (specificite max) ================= */
html.dark-mode body #layout #layout-content,
html.dark-mode #layout #layout-content,
html.dark-mode #layout-content.selected,
html.dark-mode #layout > #layout-content {
  background-color:#0e2a35 !important;
}
/* le wrapper de l iframe + l iframe elle-meme (fond visible) */
html.dark-mode #layout-content .iframe-wrapper,
html.dark-mode #layout-content iframe,
html.dark-mode iframe.contentframe,
html.dark-mode #messagecontframe,
html.dark-mode #preview-frame {
  background-color:#0e2a35 !important;
}
/* idem pour contacts et parametres (meme #layout-content) : deja couvert ci-dessus */

/* ================= SOMBRE : iframe vide de droite (fond par defaut gris) ================= */
/* quand aucun contenu n est charge, l iframe montre son fond gris : on le force teal */
html.dark-mode iframe,
html.dark-mode #preferences-frame,
html.dark-mode #messagecontframe,
html.dark-mode #contacts-frame,
html.dark-mode #identity-frame,
html.dark-mode #responseframe,
html.dark-mode #filter-frame,
html.dark-mode .iframe-wrapper > iframe,
html.dark-mode #layout-content > iframe {
  background-color:#0e2a35 !important;
}
/* le conteneur derriere l iframe (visible si l iframe est transparente/plus petite) */
html.dark-mode #layout-content,
html.dark-mode #layout-content > div,
html.dark-mode .iframe-wrapper {
  background-color:#0e2a35 !important;
}

/* ================= Supprime les BLEUS Roundcube residuels ================= */
/* liens, boutons-liens, icones bleues -> teal (clair) / dore (sombre) */
:root:not(.dark-mode) a,
:root:not(.dark-mode) a.button.icon,
:root:not(.dark-mode) .btn-link,
:root:not(.dark-mode) a[href],
:root:not(.dark-mode) .extwin,
:root:not(.dark-mode) a.extwin,
:root:not(.dark-mode) #openextwinlink,
:root:not(.dark-mode) .boxfooter a {
  color:#20697C !important;
}
html.dark-mode a,
html.dark-mode a.button.icon,
html.dark-mode .btn-link,
html.dark-mode a.extwin,
html.dark-mode #openextwinlink,
html.dark-mode .boxfooter a {
  color:#DDAA72 !important;
}
/* icones bleues (before pseudo / svg fill) */
:root:not(.dark-mode) a.extwin:before,
:root:not(.dark-mode) #openextwinlink:before,
:root:not(.dark-mode) .btn-link:before { color:#20697C !important; }
html.dark-mode a.extwin:before,
html.dark-mode #openextwinlink:before,
html.dark-mode .btn-link:before { color:#DDAA72 !important; }
/* selection/toolbar bleu-vert Roundcube (41b849) -> dore */
.toolbar a.selected, .menu.toolbar a.selected { color:#BB7F4D !important; }

/* ================= INTERRUPTEURS (toggles) : bleu -> teal/dore ================= */
/* etat active */
input.form-check-input:checked,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
input[type=checkbox].switch:checked,
.pretty input:checked ~ .state label:before {
  background-color:#20697C !important;
  border-color:#20697C !important;
}
html.dark-mode input.form-check-input:checked,
html.dark-mode .custom-control-input:checked ~ .custom-control-label::before {
  background-color:#DDAA72 !important; border-color:#DDAA72 !important;
}
/* focus des toggles/inputs : halo dore au lieu de bleu */
input.form-check-input:focus,
.custom-control-input:focus ~ .custom-control-label::before,
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color:#BB7F4D !important;
  box-shadow:0 0 0 .2rem rgba(187,127,77,.25) !important;
}
/* la petite pastille du toggle reste blanche */
.custom-control-input:checked ~ .custom-control-label::after { background-color:#fff !important; }

/* ================= DIALOGUES (popups) : header/footer/boutons ================= */
/* barre de titre + zone des boutons : teal (au lieu de gris #21292c/#4d6066) */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane,
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-buttonpane {
  background-color:#0e2a35 !important;
  border-color:#1e4a55 !important;
  color:#f0ece2 !important;
}
:root:not(.dark-mode) .ui-dialog .ui-dialog-titlebar,
:root:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane {
  background-color:#F3F3F0 !important; color:#181E2A !important; border-color:#e5e3dc !important;
}
/* corps du dialogue */
html.dark-mode .ui-dialog, html.dark-mode .ui-dialog-content { background-color:#143842 !important; color:#f0ece2 !important; }
:root:not(.dark-mode) .ui-dialog, :root:not(.dark-mode) .ui-dialog-content { background-color:#fff !important; color:#181E2A !important; }

/* bouton "Annuler" / secondaire : neutre teal (au lieu de gris) */
.btn-secondary,
html.dark-mode .btn-secondary,
.ui-dialog button.btn-secondary,
button.cancel, a.button.cancel {
  background-color:#143842 !important;
  border:1px solid #1e4a55 !important;
  color:#f0ece2 !important;
}
.btn-secondary:hover,
html.dark-mode .btn-secondary:hover,
button.cancel:hover {
  background-color:#20697C !important; border-color:#20697C !important; color:#fff !important;
}
:root:not(.dark-mode) .btn-secondary, :root:not(.dark-mode) button.cancel {
  background-color:#fff !important; border:1px solid #e5e3dc !important; color:#181E2A !important;
}
:root:not(.dark-mode) .btn-secondary:hover { background-color:#f0eee7 !important; border-color:#20697C !important; color:#20697C !important; }

/* bouton "Parcourir" (upload) */
.input-group .btn.btn-outline-secondary, .filerec .btn, .attachment-list .btn {
  background-color:#143842 !important; border-color:#1e4a55 !important; color:#f0ece2 !important;
}
:root:not(.dark-mode) .input-group .btn.btn-outline-secondary {
  background-color:#f0eee7 !important; border-color:#e5e3dc !important; color:#181E2A !important;
}

/* ================= SCROLLBAR : teal/dore (au lieu de bleu/gris) ================= */
html:not(.touch) ::-webkit-scrollbar-thumb { background-color:#20697C !important; border-radius:4px !important; }
html:not(.touch) ::-webkit-scrollbar-track { background-color:transparent !important; }
html.dark-mode ::-webkit-scrollbar-thumb { background-color:#BB7F4D !important; }
* { scrollbar-color:#20697C transparent; }
html.dark-mode * { scrollbar-color:#BB7F4D transparent; }
/* ===== RetroRoads theme — FIN ===== */