/* =============================================================================
   FiveCore — couche de design webmail (Roundcube / skin elastic)
   Objectif : reprendre le système de design ZhostV2 + vitrine fivecore.fr
   (mêmes polices, couleurs, boutons, champs, cartes, ombres, rayons, transitions)
   pour que webmail.fivecore.fr soit la continuité de fivecore.fr et de l'espace
   client billing.fivecore.fr — et non un thème Roundcube recolorisé.

   Règle : on ne touche PAS au layout flex piloté par le JS d'elastic ni aux
   polices d'icônes (FontAwesome). On restyle uniquement l'apparence des
   composants (boutons, champs, cartes, listes, barre de tâches, lecture,
   paramètres) + la page de connexion (variante du login WHMCS).
   ========================================================================== */

/* ---------- 1. Jetons de design FiveCore (repris de css/style.css vitrine) -- */
:root{
  --fc-blue:#0A84FF;            /* --color-one  */
  --fc-blue-dark:#1E90FF;       /* --color-one-dark (hover) */
  --fc-blue-deep:#1372de;       /* --color-three */
  --fc-blue-rgb:10,132,255;
  --fc-navy:#071A35;            /* rail / titres */
  --fc-navy-2:#0d2748;
  --fc-yellow:#ffd900;          /* --color-two (accent) */
  --fc-green:#16c784;           /* succès (cohérent WHMCS) */
  --fc-light:#f0f7fd;           /* --color-four (fonds doux) */
  --fc-cream:#fbecd8;           /* fond login WHMCS */
  --fc-ink:#0b1f3a;
  --fc-muted:#666866;
  --fc-border:#e6eef7;
  --fc-radius:12px;
  --fc-radius-sm:8px;
  --fc-radius-btn:6px;
  --fc-shadow:rgba(149,157,165,.18) 0 8px 24px;
  --fc-shadow-sm:rgba(100,100,111,.12) 0 4px 14px;
  --fc-trans:all .25s ease;
  --fc-font:'Ubuntu',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;       /* --font-theme */
  --fc-font-2:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;    /* --font-theme-two */
}

/* ---------- 2. Typographie globale (sans casser les icônes FA) -------------- */
/* On pose la police sur body : tout le texte hérite. Les pseudo-éléments
   d'icônes définissent leur propre font-family, donc ils ne sont pas affectés. */
body,
.listing,
input, select, textarea, button,
.form-control,
td, th, label, p, a, span, div{
  font-family:var(--fc-font-2);
}
h1,h2,h3,h4,h5,h6,
legend, .boxtitle, .header-title, #taskmenu,
.popup-header, .menu-title, fieldset legend{
  font-family:var(--fc-font) !important;
  letter-spacing:.1px;
}

/* Liens, sélection, scrollbar = bleu FiveCore (comme la vitrine) */
a{ color:var(--fc-blue); }
a:hover{ color:var(--fc-blue-deep); }
::selection{ background:var(--fc-blue); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:var(--fc-blue) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background-color:var(--fc-blue); border-radius:8px; }

/* ---------- 3. Boutons = .theme-btn ZhostV2 -------------------------------- */
.btn{
  border-radius:var(--fc-radius-btn) !important;
  font-family:var(--fc-font-2) !important;
  font-weight:600 !important;
  transition:var(--fc-trans) !important;
  box-shadow:none !important;
}
.btn-primary,
.btn.mainaction,
button.btn.mainaction,
a.btn.mainaction{
  background:var(--fc-blue) !important;
  border-color:var(--fc-blue) !important;
  color:#fff !important;
}
.btn-primary:hover,
.btn.mainaction:hover,
button.btn.mainaction:hover{
  background:var(--fc-blue-dark) !important;
  border-color:var(--fc-blue-dark) !important;
  color:#fff !important;
}
.btn-secondary,
.btn.btn-secondary{
  background:var(--fc-light) !important;
  border-color:var(--fc-border) !important;
  color:var(--fc-blue-deep) !important;
}
.btn-secondary:hover{ background:#e3effb !important; color:var(--fc-blue-deep) !important; }
.btn-danger{ border-radius:var(--fc-radius-btn) !important; }
.btn-link{ color:var(--fc-blue) !important; }

/* Boutons icônes des barres d'outils : survol bleu FiveCore */
a.button.icon:hover,
.toolbar a.button:hover,
.toolbar-button:hover{ color:var(--fc-blue) !important; }
.toolbar a.button.selected,
a.button.icon.selected{ color:var(--fc-blue) !important; }

/* Bouton flottant (FAB « Écrire » sur mobile) */
.floating-action-buttons a.button{
  background:var(--fc-blue) !important;
  color:#fff !important;
  box-shadow:var(--fc-shadow) !important;
}
.floating-action-buttons a.button:hover{ background:var(--fc-blue-dark) !important; }

/* ---------- 4. Champs de formulaire = style vitrine/WHMCS ------------------ */
.form-control,
input.form-control,
input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=url],
select, textarea, .input-group-text{
  border-radius:var(--fc-radius-sm) !important;
  border:1px solid var(--fc-border) !important;
  transition:var(--fc-trans) !important;
  box-shadow:none !important;
}
.form-control:focus,
input.form-control:focus,
select:focus, textarea:focus{
  border-color:var(--fc-blue) !important;
  box-shadow:0 0 0 .18rem rgba(var(--fc-blue-rgb),.18) !important;
}
input[type=checkbox], input[type=radio]{ accent-color:var(--fc-blue); width:16px; height:16px; }
/* Interrupteurs (paramètres) en bleu FiveCore */
.custom-switch input:checked ~ .custom-control-label::before,
.form-check-input:checked{ background-color:var(--fc-blue) !important; border-color:var(--fc-blue) !important; }
/* Barre de recherche */
.searchbar input,
#mailsearchform{ border-radius:var(--fc-radius-sm) !important; }

/* ---------- 5. Barre de tâches (rail gauche) = identité FiveCore ----------- */
/* Rail bleu nuit + marque FiveCore en haut (icône carrée) sur écrans ≥ small */
@media screen and (min-width:481px){
  #layout-menu{
    background:linear-gradient(180deg,var(--fc-navy) 0%,var(--fc-navy-2) 100%) !important;
  }
}
/* Logo UNIQUE du rail = le logo natif Roundcube (skin_logo), centré. Aucun doublon. */
#layout-menu #logo{
  display:block !important; margin:12px auto 10px !important;
  max-width:36px !important; height:auto !important; float:none !important;
}
#taskmenu a{ color:#c3d2e6; transition:var(--fc-trans); border-radius:8px; }
#taskmenu a:hover{ color:#fff; background:rgba(255,255,255,.06); }
#taskmenu a.selected,
#taskmenu a.active{ color:#fff; }
#taskmenu a.selected:before,
#taskmenu a.active:before{ color:var(--fc-blue) !important; }
#taskmenu a.button.logout:hover{ color:#ff7a7a; }

/* ---------- 6. En-têtes de volets = section FiveCore ----------------------- */
html:not(.dark-mode) #layout > div > .header{
  background:#fff !important;
  color:var(--fc-navy) !important;
  border-bottom:1px solid var(--fc-border) !important;
}
#layout > div > .header .header-title{ color:var(--fc-navy); font-weight:700; }
html:not(.dark-mode) #layout > div > .footer{ background:#fff !important; border-top:1px solid var(--fc-border) !important; }

/* Fonds des volets (mode clair) — blancs nets, liste légèrement teintée */
html:not(.dark-mode) #layout-sidebar{ background:#fff !important; border-right:1px solid var(--fc-border) !important; }
html:not(.dark-mode) #layout-list{ background:#fbfdff !important; border-right:1px solid var(--fc-border) !important; }
html:not(.dark-mode) body:not(.task-login) #layout-content{ background:#fff !important; }

/* ---------- 7. Liste des dossiers = menu latéral FiveCore ------------------ */
.folderlist li a,
.listing.folderlist li a{
  border-radius:8px;
  margin:2px 8px;
  transition:var(--fc-trans);
}
.folderlist li a:hover{ background:var(--fc-light); }
.folderlist li.selected > a,
.folderlist li.selected > div > a{
  background:rgba(var(--fc-blue-rgb),.12) !important;
  color:var(--fc-blue) !important;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--fc-blue);
}
.folderlist li a:before{ color:var(--fc-blue); }              /* icônes dossiers */
.folderlist li.selected > a:before{ color:var(--fc-blue); }
.folderlist li .unreadcount,
.folderlist li span.unreadcount{
  background:var(--fc-blue) !important;
  color:#fff !important;
  border-radius:10px;
  font-weight:600;
}

/* ---------- 8. Liste des e-mails = lignes FiveCore ------------------------- */
.messagelist tbody tr,
table.messagelist tbody tr{ transition:var(--fc-trans); }
html:not(.dark-mode) .messagelist tbody tr:hover{ background:var(--fc-light) !important; }
.messagelist tbody tr.selected,
.messagelist tbody tr.selected td{
  background:rgba(var(--fc-blue-rgb),.10) !important;
  box-shadow:inset 3px 0 0 var(--fc-blue);
}
.messagelist tbody tr.unread{ font-weight:600; }
.messagelist tbody tr.unread .subject,
.messagelist tbody tr.unread .fromto{ color:var(--fc-navy); }
/* Pastille « non lu » bleue (cohérence avec le badge des dossiers) */
.messagelist tbody tr.unread span.msgicon.status.unread:before,
.messagelist span.msgicon.unread:before,
.messagelist .unread .msgicon.status:before,
.messagelist tbody tr.unread td.flag span.unread:before,
.messagelist .unread td.status span.unread:before{ color:var(--fc-blue) !important; }
/* Drapeau / favori */
.messagelist td.flag span.flagged:before{ color:var(--fc-yellow) !important; }
/* Avatar/photo dans la liste (widescreen) */
.messagelist .contactphoto,
.messagelist td.contact span{ border-radius:50%; }

/* ---------- 9. Volet de lecture = carte FiveCore -------------------------- */
html:not(.dark-mode) #messageheader,
html:not(.dark-mode) .message-headers,
html:not(.dark-mode) .messageheaderbox{
  background:var(--fc-light) !important;
  border:1px solid var(--fc-border) !important;
  border-radius:var(--fc-radius) !important;
  margin:10px;
  padding:12px 16px;
}
#messageheader .subject,
.message-headers .subject,
h2.subject{ color:var(--fc-navy) !important; font-family:var(--fc-font) !important; font-weight:700 !important; }
/* Photo de l'expéditeur : ronde, anneau bleu */
.contactphoto,
#messageheader .contactphoto{
  border-radius:50% !important;
  overflow:hidden;
  box-shadow:0 0 0 2px var(--fc-blue);
}
/* Liens d'action sur le mail (répondre, transférer…) déjà couverts par .btn */

/* ---------- 10. Paramètres = listes + cartes FiveCore --------------------- */
.listing.iconized li.selected a,
.settingslist li.selected a,
.listing li.selected > a{
  background:rgba(var(--fc-blue-rgb),.12) !important;
  color:var(--fc-blue) !important;
  box-shadow:inset 3px 0 0 var(--fc-blue);
}
.listing.iconized li a:hover{ background:var(--fc-light); }
.listing.iconized li a:before{ color:var(--fc-blue); }
/* Sections de réglages en cartes blanches arrondies */
html:not(.dark-mode) fieldset.propform,
html:not(.dark-mode) .formcontent fieldset,
html:not(.dark-mode) .propform fieldset,
html:not(.dark-mode) .uibox.listbox,
html:not(.dark-mode) .boxcontent fieldset{
  background:#fff !important;
  border:1px solid var(--fc-border) !important;
  border-radius:var(--fc-radius) !important;
  box-shadow:var(--fc-shadow-sm) !important;
  padding:14px 18px !important;
  margin-bottom:14px;
}
fieldset.propform legend,
.formcontent legend,
.propform legend{ color:var(--fc-navy) !important; font-weight:700 !important; }

/* ---------- 11. Menus, popups, boîtes de dialogue = ombres FiveCore ------- */
html:not(.dark-mode) .popupmenu,
html:not(.dark-mode) .toolbarmenu,
html:not(.dark-mode) .ui-dialog,
html:not(.dark-mode) .popover,
html:not(.dark-mode) .menu.toolbarmenu{
  border-radius:var(--fc-radius) !important;
  box-shadow:var(--fc-shadow) !important;
  border:1px solid var(--fc-border) !important;
}
.popupmenu li a:hover,
.toolbarmenu li a:hover,
.menu li a.active,
.listing li a.active{ background:var(--fc-light) !important; color:var(--fc-blue) !important; }
.ui-dialog .ui-dialog-titlebar,
.ui-dialog-titlebar{ color:var(--fc-navy); font-family:var(--fc-font) !important; }
/* Onglets actifs */
.nav-tabs .nav-link.active,
.tabsbar .tablink.selected a{
  color:var(--fc-blue) !important;
  border-bottom:2px solid var(--fc-blue) !important;
}

/* ---------- 12. Badges / pastilles / alertes ----------------------------- */
.badge, .label{ border-radius:10px; font-family:var(--fc-font-2); }
.badge-primary, .label-primary{ background:var(--fc-blue) !important; }
.boxsuccess, .ui.alert.success{ border-left:3px solid var(--fc-green) !important; }
.boxerror, .ui.alert.error{ border-left:3px solid #e3342f !important; }
.boxconfirmation{ border-left:3px solid var(--fc-blue) !important; }

/* =============================================================================
   13. PAGE DE CONNEXION — variante directe du login WHMCS
   (fond crème, carte blanche, bordure pointillée bleue, logo large)
   ========================================================================== */
html.task-login, .task-login body,
.task-login #layout,
.task-login #layout-content{ background:var(--fc-cream) !important; height:100% !important; }
.task-login #layout{ display:flex !important; min-height:100vh !important; }
.task-login #layout-content{ position:relative !important; width:100% !important; min-height:100vh !important; }
/* centrage PARFAIT (vertical + horizontal) garanti via conteneur dédié, style OVH/Hetzner/Plesk */
.task-login .fc-login-wrap{
  position:fixed !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:92% !important; max-width:560px !important;
  max-height:92vh !important; overflow:auto !important;
  margin:0 !important;
}
/* Logo FiveCore À L'INTÉRIEUR de la carte (comme le login WHMCS) — on neutralise
   le positionnement JS d'elastic (#logo position:relative; top:144px) */
.task-login #logo,
.task-login #login-form #logo{
  position:static !important; top:auto !important; left:auto !important; transform:none !important;
  max-height:56px !important; width:auto !important; max-width:220px !important;
  margin:0 auto 6px !important; display:block !important;
}
/* Sous-titre de la carte (équivalent « Connexion à votre espace client » du WHMCS) */
.task-login .fc-login-title{
  text-align:center !important; color:var(--fc-muted) !important;
  font-family:var(--fc-font-2) !important; font-size:17px !important; font-weight:600 !important;
  margin:0 0 20px !important;
}
.task-login #login-form{
  background:#fff !important;
  border:2px dashed var(--fc-blue) !important;
  border-radius:var(--fc-radius) !important;
  box-shadow:rgba(0,0,0,.10) 0 10px 50px !important;
  padding:30px 28px !important;
  width:100% !important; box-sizing:border-box !important;
  margin:0 !important; position:static !important; transform:none !important;
}
.task-login #login-form .btn,
.task-login #rcmloginsubmit,
.task-login button.btn.mainaction{
  background:var(--fc-blue) !important; border-color:var(--fc-blue) !important;
  color:#fff !important; width:100%; border-radius:var(--fc-radius-btn) !important;
}
.task-login #login-form .btn:hover,
.task-login #rcmloginsubmit:hover{ background:var(--fc-blue-dark) !important; }
.task-login input.form-control{ border-radius:var(--fc-radius-sm) !important; }
.task-login input.form-control:focus{
  border-color:var(--fc-blue) !important;
  box-shadow:0 0 0 .18rem rgba(var(--fc-blue-rgb),.20) !important;
}
/* Carte LARGE identique au login WHMCS : on lève le max-width:320px d'elastic
   et on étire la table interne ; les champs gardent leur flex (icône inline). */
.task-login #login-form{ max-width:100% !important; width:100% !important; }
.task-login #login-form table{ width:100% !important; table-layout:fixed; }
.task-login #login-form td.input,
.task-login #login-form td.input-group{ width:100% !important; }
/* Champs propres pleine largeur, SANS icône prepend (identique au login WHMCS) */
.task-login #login-form .input-group-prepend,
.task-login #login-form .input-group-text{ display:none !important; }
.task-login #login-form .input-group .form-control,
.task-login #login-form td.input .form-control{ width:100% !important; flex:1 1 100% !important; border-radius:var(--fc-radius-sm) !important; }

/* Barre écosystème + copyright (login) */
.fc-webmail-bar{
  position:fixed; left:0; right:0; bottom:36px; z-index:50;
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  font-family:var(--fc-font-2);
}
.fc-webmail-bar a{ color:#1f2937; text-decoration:none; font-size:14px; font-weight:500; }
.fc-webmail-bar a:hover{ color:var(--fc-blue); text-decoration:underline; }
.fc-webmail-copy{
  position:fixed; left:0; right:0; bottom:14px; z-index:50; text-align:center;
  color:#8a7559; font-size:12px; font-family:var(--fc-font-2);
}

/* =============================================================================
   14. RESPONSIVE — on conserve les points de rupture d'elastic, on ajuste
   ========================================================================== */
@media screen and (max-width:768px){
  .fc-webmail-bar{ gap:12px; font-size:13px; padding:0 10px; }
  .task-login #login-form{ padding:24px 18px !important; }
  .task-login .fc-login-wrap{ width:94% !important; }
  html:not(.dark-mode) #messageheader,
  html:not(.dark-mode) .message-headers{ margin:8px; padding:10px 12px; }
}
@media screen and (max-width:480px){
  #layout-menu #logo{ max-width:30px !important; margin:8px auto !important; }
}