/* Nowa OYA Mail : surcharge du thème Elastic de Roundcube */

:root {
  --nowaoya-brand: #4B17C2;
  --nowaoya-brand-dark: color-mix(in srgb, var(--nowaoya-brand) 70%, #000);
  --nowaoya-brand-deep: color-mix(in srgb, var(--nowaoya-brand) 55%, #000);
  --nowaoya-tint: color-mix(in srgb, var(--nowaoya-brand) 12%, #fff);
  --nowaoya-ring: color-mix(in srgb, var(--nowaoya-brand) 30%, transparent);
}

/* ---------- Boutons principaux ---------- */
.btn-primary,
.btn.btn-primary,
button.mainaction,
.button.mainaction,
input.button.mainaction {
  background-color: var(--nowaoya-brand) !important;
  border-color: var(--nowaoya-brand) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
button.mainaction:hover,
.button.mainaction:hover {
  background-color: var(--nowaoya-brand-dark) !important;
  border-color: var(--nowaoya-brand-dark) !important;
}

/* ---------- Liens et champs ---------- */
html:not(.dark-mode) a,
html:not(.dark-mode) .link {
  color: var(--nowaoya-brand);
}
.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--nowaoya-brand) !important;
  box-shadow: 0 0 0 .2rem var(--nowaoya-ring) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--nowaoya-brand) !important;
  border-color: var(--nowaoya-brand) !important;
}

/* ---------- Menu principal (colonne de gauche) ---------- */
#layout-menu {
  background-color: var(--nowaoya-brand-deep) !important;
}
#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a:hover,
#layout-menu #taskmenu a:focus {
  background-color: var(--nowaoya-brand) !important;
  color: #fff !important;
}
#layout-menu #taskmenu a.compose {
  background-color: var(--nowaoya-brand) !important;
}
#layout-menu .popover-header #logo {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
}

/* ---------- Listes : élément sélectionné ---------- */
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) table.listing tr.selected td,
html:not(.dark-mode) table.records-table tr.selected td,
html:not(.dark-mode) .treelist li.selected > div,
html:not(.dark-mode) .treelist li.selected > a {
  background-color: var(--nowaoya-tint) !important;
}
.listing li.selected > a,
.treelist li.selected > div a,
.treelist li.selected > a {
  border-left-color: var(--nowaoya-brand) !important;
}
.unread .subject a,
table.messagelist tr.unread .subject a {
  color: var(--nowaoya-brand-deep);
}

/* ---------- Écran de connexion ---------- */
body.task-login {
  background-color: #F7F5FB;
}
body.task-login #layout-content {
  background: transparent;
}
body.task-login #logo {
  max-width: 280px;
  max-height: 110px;
  margin-bottom: 1.5rem;
}
body.task-login #login-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 21, 48, .06), 0 12px 32px rgba(27, 21, 48, .08);
  padding: 2rem 2rem 1.5rem;
}
.nowaoya-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
  font-size: .8rem;
  color: #5B5470;
}
.nowaoya-powered strong {
  color: #4B17C2;
  font-weight: 600;
}
html.dark-mode body.task-login {
  background-color: #14101F;
}
html.dark-mode body.task-login #login-form {
  background: #1D1730;
  box-shadow: none;
}
/* Un logo client est presque toujours dessiné pour un fond clair : en mode
   sombre, on lui rend son fond, comme pour la pastille du menu. Elastic
   l'atténue aussi (html.dark-mode #logo { opacity: .8 }), ce qui ternissait
   la pastille. */
html.dark-mode body.task-login #logo {
  background-color: #F7F5FB;
  border-radius: 16px;
  padding: 12px 20px;
  opacity: 1;
}
/* Elastic donne à cet encadré un fond gris clair (#F1F3F4) par la règle
   « #login-footer > div », qu'il garde en mode sombre : le texte clair y
   devenait illisible. L'identifiant dans le sélecteur est nécessaire pour
   l'emporter sur cette règle. */
html.dark-mode #login-footer > div.nowaoya-powered {
  background-color: rgba(255, 255, 255, .06);
  color: #B8B0CC;
}
html.dark-mode .nowaoya-powered strong {
  color: #FFA41B;
}