/* SynMail : surcharge ZRS du skin Elastic (Roundcube 1.7). Direction A (clair), tokens de
   06_Marketing/REFONTE_IMAGE_2026-09/TOKENS.css. Un seul rouge par écran (l'action principale).
   Le logo client vient de $config['skin_logo'] (par nom d'hôte) ; ZRS n'apparaît qu'en pied, discret. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-700-800.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --zrs-ink: #262B31;
  --zrs-ink-2: #4D5560;
  --zrs-mute: #7C858F;
  --zrs-line: #E3E6EA;
  --zrs-bg: #FFFFFF;
  --zrs-bg-2: #F5F6F8;
  --zrs-bg-3: #EEF0F3;
  --zrs-red: #C53137;
  --zrs-red-hover: #A9282E;
  --zrs-ok: #1D7A3E;
  --zrs-warn: #B8791A;
  --zrs-r: 8px;
  --zrs-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --zrs-font-text: Inter, system-ui, sans-serif;
}

/* ---------- typographie ---------- */
body, .form-control, .btn, input, select, textarea {
  font-family: var(--zrs-font-text);
  color: var(--zrs-ink);
}
h1, h2, h3, .header .header-title, #layout-content .header .header-title, #login-form h1 {
  font-family: var(--zrs-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- couleur principale : le bleu Elastic devient le rouge ZRS, avec parcimonie ---------- */
a, .link { color: var(--zrs-ink-2); }
a:hover { color: var(--zrs-red); }

.btn-primary, .btn-primary:focus,
#layout-content .toolbar a.button.send,
.form-control:focus + .input-group-append .btn {
  background-color: var(--zrs-red);
  border-color: var(--zrs-red);
  color: #fff;
}
.btn-primary:hover, .btn-primary:active { background-color: var(--zrs-red-hover); border-color: var(--zrs-red-hover); }
.btn-secondary { background: var(--zrs-bg); border: 1.5px solid var(--zrs-ink); color: var(--zrs-ink); }
.btn-secondary:hover { border-color: var(--zrs-red); color: var(--zrs-red); background: var(--zrs-bg); }
.btn, .form-control, .custom-select { border-radius: var(--zrs-r); }
.form-control:focus, .custom-select:focus { border-color: var(--zrs-ink); box-shadow: 0 0 0 .15rem rgba(38,43,49,.15); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--zrs-ink); border-color: var(--zrs-ink); }

/* ---------- structure : menu de gauche anthracite, listes claires ---------- */
#layout-menu { background: var(--zrs-ink); position: relative; }
#layout-menu .header { background: var(--zrs-ink); border-bottom: 1px solid rgba(255,255,255,.08); }
#layout-menu .menu a { color: #B4BCC5; }
#layout-menu .menu a:hover { color: #fff; background: rgba(255,255,255,.06); }
#layout-menu .menu a.selected { color: #fff; background: rgba(255,255,255,.10); border-left: 3px solid var(--zrs-red); }
#layout-menu .menu a::before { color: inherit; }

#layout-sidebar, #layout-sidebar .header,
#layout-list .header, #layout-content .header { background: var(--zrs-bg-2); border-color: var(--zrs-line); }
#layout-sidebar, #layout-list { border-right: 1px solid var(--zrs-line); }
.listing tbody td, .listing li { border-color: var(--zrs-line); }
.listing tbody tr.selected td, .listing li.selected, .listing tbody tr.selected:hover td {
  background-color: var(--zrs-bg-3); color: var(--zrs-ink); border-left: 3px solid var(--zrs-red);
}
.listing tbody tr.unread td.subject { font-weight: 700; }
.listing tbody tr:hover td { background-color: var(--zrs-bg-2); }
.listing .flagged td.subject, .listing .flagged td.flag { color: var(--zrs-red); }
.messagelist tr.selected td.subject span.subject a, .listing tr.selected td a { color: var(--zrs-ink); }

.toolbar a.button, .toolbar a.button:hover { color: var(--zrs-ink-2); }
.toolbar a.button:hover { color: var(--zrs-red); }
.searchbar, .searchbar input { background: var(--zrs-bg); }
.searchbar input:focus { border-color: var(--zrs-ink); }

/* Cartes / boîtes de dialogue / notifications */
.ui-dialog, .popover, .popupmenu, .card { border-radius: 12px; border: 1px solid var(--zrs-line); box-shadow: 0 8px 24px rgba(38,43,49,.10); }
#messagestack div.confirmation { background: var(--zrs-ok); }
#messagestack div.error { background: var(--zrs-red); }
#messagestack div.warning { background: var(--zrs-warn); }
#messagestack div.notice, #messagestack div.loading { background: var(--zrs-ink); }

/* ---------- page de connexion ---------- */
body.task-login { background: var(--zrs-bg-2); }
#layout-content.login, #login-form { background: transparent; }
#login-form { max-width: 26rem; }
#login-form #logo { max-width: 16rem; max-height: 5rem; margin-bottom: 1.5rem; }
#login-form .form-control { background: var(--zrs-bg); border: 1.5px solid var(--zrs-line); }
#login-form .form-control:focus { border-color: var(--zrs-ink); }
#login-form .btn-primary { width: 100%; font-weight: 700; }

/* « Propulsé par » ZRS, en pied, discret (lockup fond clair, hauteur 20 px) */
#login-footer, .task-login #layout-content .footer {
  color: var(--zrs-mute); font-size: .8rem;
}
#login-footer::before {
  content: '';
  display: block;
  margin: 1.25rem auto .4rem;
  width: 66px; height: 20px;
  background: url('../images/zrs-lockup.svg') no-repeat center / contain;
}
#login-footer::after { content: 'Propulsé par SynMail, ZRS-Holding'; display: block; color: var(--zrs-mute); }
#login-footer a { color: var(--zrs-mute); }

/* Logo client dans le menu de gauche : fond blanc léger pour un logo pensé sur blanc */
#layout-menu .header a.logo { display: flex; align-items: center; justify-content: center; padding: .5rem; }
#layout-menu .header a.logo img { max-height: 2.4rem; max-width: 90%; background: #fff; border-radius: 6px; padding: 4px 8px; }


/* ---------- mobile ---------- */
@media (max-width: 767px) {
  #login-form { padding: 0 1rem; }
}

/* ---------- restes de bleu Elastic ---------- */
.floating-action-buttons a.button, .floating-action-buttons a.button:focus { background-color: var(--zrs-red); }
.floating-action-buttons a.button:hover { background-color: var(--zrs-red-hover); }
.listing .unreadcount, span.badge.badge-primary, .badge-primary { background-color: var(--zrs-ink); color: #fff; }
.listing tbody tr.selected td .unreadcount, .listing li.selected .unreadcount { background-color: var(--zrs-red); }
#layout-sidebar .listing li.selected > a { background: var(--zrs-bg-3); border-left: 3px solid var(--zrs-red); }
.toolbar a.button.selected { color: var(--zrs-red); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--zrs-ink); border-color: var(--zrs-ink); }
.nav-tabs .nav-link.active { border-bottom-color: var(--zrs-red); color: var(--zrs-ink); }
.ui-dialog .ui-dialog-titlebar { font-family: var(--zrs-font-display); }

/* ---------- V1 : finitions ---------- */
/* Un seul rouge par écran : Déconnexion en gris, rouge au survol seulement */
#layout-menu a.logout, #taskmenu a.logout, #taskmenu a.button-logout { color: #B4BCC5 !important; }
#layout-menu a.logout:hover, #taskmenu a.logout:hover { color: #fff !important; }
/* Focus des champs : anthracite, pas de halo bleu */
.form-control:focus, input:focus, textarea:focus, select:focus, .input-group:focus-within .form-control {
  border-color: var(--zrs-ink) !important; box-shadow: 0 0 0 .15rem rgba(38,43,49,.15) !important; outline: none;
}
.input-group > .form-control:focus { z-index: 3; }
/* Menu de gauche : logo client plus lisible sur la colonne étroite */
#layout-menu .header a.logo img { max-height: 2.8rem; padding: 5px 6px; }
/* Liens et boutons de la barre d'outils : anthracite, rouge au survol seulement */
a.button.icon, .toolbar a.button { color: var(--zrs-ink-2); }
/* Lecture d'un message : en-tête sobre */
#layout-content .header, #messageheader { background: var(--zrs-bg-2); }
#messageheader .subject { font-family: var(--zrs-font-display); font-weight: 800; color: var(--zrs-ink); }
/* Boîte « 2FA » du plugin : mêmes composants */
#twofactor_gauthenticator-form .btn-primary { background: var(--zrs-red); border-color: var(--zrs-red); }