/* ============================================================
   M3UBridge — Roundcube elastic skin override
   Servi depuis custom/ (durable hors mises à jour du paquet)
   ============================================================ */

/* --- Palette ---------------------------------------------- */
:root {
  --m3ub-primary:       #2563eb;
  --m3ub-primary-hover: #1d4ed8;
  --m3ub-accent:        #3b82f6;
  --m3ub-dark:          #1f2733;
  --m3ub-muted:         #6b7480;
  --m3ub-light:         #f1f5fb;
  --m3ub-border:        #d1d9e6;
  --m3ub-danger:        #b91c1c;
  --m3ub-success:       #15803d;
  --m3ub-sidebar-bg:    #1f2733;
  --m3ub-sidebar-text:  #c8ccd2;
  --m3ub-sidebar-hover: rgba(255,255,255,.07);
  --m3ub-focus-ring:    rgba(37,99,235,.22);
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--m3ub-light);
  color: var(--m3ub-dark);
}
a { color: var(--m3ub-primary); }
a:hover { color: var(--m3ub-primary-hover); }

/* ============================================================
   PAGE DE LOGIN — card flottante centrée
   ============================================================ */
body.task-login {
  background: linear-gradient(135deg, #1e3a6e 0%, #1f2733 60%, #0f172a 100%);
  min-height: 100vh;
}

/* conteneur login occupe toute la hauteur */
body.task-login #layout-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align: center;
}

/* logo en haut de la card */
body.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block;
  margin: 0 auto 1.6rem;
  max-height: 64px;
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

/* la card elle-même */
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  padding: 2rem 2.2rem;
  max-width: 360px;
  width: 100%;
  text-align: left;
}

/* labels */
body.task-login #login-form label {
  font-size: 13px;
  font-weight: 500;
  color: var(--m3ub-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  display: block;
}

/* champs texte/password */
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="password"],
body.task-login #login-form input.form-control {
  width: 100%;
  padding: .55rem .85rem;
  border: 1.5px solid var(--m3ub-border);
  border-radius: 7px;
  font-size: 15px;
  color: var(--m3ub-dark);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
}
body.task-login #login-form input:focus {
  border-color: var(--m3ub-primary);
  box-shadow: 0 0 0 3px var(--m3ub-focus-ring);
}

/* bouton Connexion */
body.task-login #login-form .formbuttons input[type="submit"],
body.task-login #login-form input#rcmloginsubmit,
body.task-login #login-form button[type="submit"] {
  width: 100%;
  margin-top: .8rem;
  padding: .65rem 1rem;
  background-color: var(--m3ub-primary);
  border: none;
  border-radius: 7px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
}
body.task-login #login-form .formbuttons input[type="submit"]:hover,
body.task-login #login-form input#rcmloginsubmit:hover {
  background-color: var(--m3ub-primary-hover);
}

/* footer login (version/lien support) */
body.task-login #login-footer {
  color: rgba(255,255,255,.45);
  font-size: 12px;
  margin-top: 1.4rem;
}
body.task-login #login-footer a { color: rgba(255,255,255,.55); }
body.task-login #login-footer a:hover { color: #fff; }
body.task-login #login-footer > div {
  background: transparent;
  padding: 0;
}

/* ============================================================
   SIDEBAR (dossiers / navigation)
   ============================================================ */
#layout-sidebar {
  background-color: var(--m3ub-sidebar-bg);
  border-right: none;
}
#layout-sidebar a,
#layout-sidebar .listing li,
#layout-sidebar .listing li a,
#layout-sidebar .listing li span,
#taskmenu a,
#taskmenu a span {
  color: var(--m3ub-sidebar-text) !important;
}
#layout-sidebar .listing li:hover,
#taskmenu a:hover {
  background-color: var(--m3ub-sidebar-hover);
}
#taskmenu a.selected,
#taskmenu a.active,
#layout-sidebar .listing li.selected,
#layout-sidebar .listing li.focused {
  background-color: rgba(37,99,235,.22) !important;
  color: #fff !important;
}
#taskmenu a.selected span,
#taskmenu a.active span { color: #fff !important; }

/* icônes sidebar */
#taskmenu a::before { color: var(--m3ub-sidebar-text) !important; }
#taskmenu a:hover::before,
#taskmenu a.selected::before { color: #fff !important; }

/* compteur non-lus */
#layout-sidebar .listing li .unread,
#taskmenu a .unread {
  background-color: var(--m3ub-primary);
  color: #fff;
  border-radius: 999px;
}

/* ============================================================
   HEADER DE L'APPLICATION (barre du haut)
   ============================================================ */
#layout > div > .header,
#header {
  background-color: var(--m3ub-dark);
  border-bottom: none;
  color: var(--m3ub-sidebar-text);
}
#header a,
#layout > div > .header a { color: var(--m3ub-sidebar-text); }
#header a:hover,
#layout > div > .header a:hover { color: #fff; }
#header .searchbar input { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; }
#header .searchbar input:focus { border-color: var(--m3ub-primary); background: rgba(255,255,255,.12); }

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
#layout-content {
  background-color: #fff;
}
#layout-list {
  background-color: #fafbfc;
  border-right: 1px solid var(--m3ub-border);
}

/* liste de messages */
.listing tbody tr:hover > td { background-color: rgba(37,99,235,.04); }
.listing tbody tr.selected > td { background-color: rgba(37,99,235,.10); }
.listing tbody tr.unread > td { font-weight: 600; }

/* ============================================================
   BOUTONS
   ============================================================ */
a.button.primary,
input.button.primary,
button.btn.primary,
.button-primary,
.btn-primary {
  background-color: var(--m3ub-primary) !important;
  border-color: var(--m3ub-primary) !important;
  color: #fff !important;
  border-radius: 6px;
}
a.button.primary:hover,
button.btn.primary:hover,
.btn-primary:hover {
  background-color: var(--m3ub-primary-hover) !important;
  border-color: var(--m3ub-primary-hover) !important;
}

/* bouton logout couleur accent */
#taskmenu a.logout::before { color: var(--m3ub-muted) !important; }

/* ============================================================
   INPUTS / FORMULAIRES
   ============================================================ */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--m3ub-primary);
  box-shadow: 0 0 0 3px var(--m3ub-focus-ring);
  outline: none;
}

/* ============================================================
   DARK MODE (cookie colorMode=dark ou prefers-color-scheme)
   ============================================================ */
html.dark-mode body {
  background-color: #111827;
  color: #e5e7eb;
}
html.dark-mode #layout-content,
html.dark-mode #layout-list {
  background-color: #1e2836;
  border-color: #2e3d50;
}
html.dark-mode #layout > div > .header { background-color: #151e2a; border-color: #2e3d50; }
html.dark-mode .listing tbody tr:hover > td { background-color: rgba(37,99,235,.08); }
html.dark-mode .listing tbody tr.selected > td { background-color: rgba(37,99,235,.18); }
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode .form-control {
  background-color: #1e2836;
  border-color: #3a4a5c;
  color: #e5e7eb;
}
html.dark-mode input:focus,
html.dark-mode .form-control:focus {
  border-color: var(--m3ub-primary);
  box-shadow: 0 0 0 3px var(--m3ub-focus-ring);
}
html.dark-mode #login-footer { color: rgba(255,255,255,.4); }

/* dark mode login : le fond sombre reste de toute façon (body.task-login est déjà sombre) */
html.dark-mode body.task-login #login-form {
  background: #1e2836;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
html.dark-mode body.task-login #login-form label { color: #9ca3af; }
html.dark-mode body.task-login #login-form input { background: #111827; border-color: #3a4a5c; color: #e5e7eb; }