/* ════════════════════════════════════════════════════════════════════════════
   Webmail Sentinel — refonte du skin Elastic aux couleurs et à la vibe du site.
   Un jeu de variables bascule proprement entre mode clair et mode sombre
   (Elastic ajoute la classe .dark-mode). Surfaces douces, coins arrondis,
   bordures fines, accent cyan, transitions fluides.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --sn-accent: #17cfef;
  --sn-accent-2: #3ad9f3;
  --sn-accent-ink: #05222a;
  --sn-glow: rgba(23, 207, 239, 0.16);

  /* Mode clair (défaut) */
  --sn-bg: #eef1f4;
  --sn-surface: #ffffff;
  --sn-surface-2: #f4f6f8;
  --sn-line: #dfe4e9;
  --sn-line-soft: #e9edf1;
  --sn-text: #11161c;
  --sn-muted: #5b6573;
  --sn-hover: rgba(15, 20, 26, 0.045);
  --sn-shadow: 0 18px 40px -24px rgba(15, 25, 40, 0.35);

  --sn-radius: 12px;
  --sn-radius-sm: 8px;
  --sn-radius-lg: 16px;
  --sn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Mode sombre : mêmes teintes que sentinelac.eu */
html.dark-mode, body.dark-mode, .dark-mode {
  --sn-bg: #0b0d0f;
  --sn-surface: #101317;
  --sn-surface-2: #151920;
  --sn-line: #232a33;
  --sn-line-soft: #1a2027;
  --sn-text: #f2f4f5;
  --sn-muted: #9aa4b0;
  --sn-hover: rgba(255, 255, 255, 0.05);
  --sn-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.8);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body,
#layout, #layout-menu, #layout-sidebar, #layout-list, #layout-content {
  font-family: var(--sn-font) !important;
  color: var(--sn-text);
}
body, #layout { background: var(--sn-bg) !important; }

* {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
::selection { background: var(--sn-glow); }

/* ── Colonne des tâches (Rédiger / Courriel / Contacts / Réglages) ─────────── */
#layout-menu { background: var(--sn-bg) !important; border: none !important; }
#taskmenu a { color: var(--sn-muted) !important; border: none !important; border-radius: var(--sn-radius-sm) !important; margin: 2px 8px !important; }
#taskmenu a:hover { color: var(--sn-text) !important; background: var(--sn-hover) !important; }
#taskmenu a.selected {
  color: var(--sn-accent) !important;
  background: var(--sn-glow) !important;
  box-shadow: none !important;
}
#taskmenu a.selected::before, #taskmenu a.selected::after { display: none !important; }

/* Bouton « Rédiger » : pilule cyan, mise en avant. */
#taskmenu a.compose, a.compose.button, .floating-action-buttons a.compose {
  background: var(--sn-accent) !important;
  color: var(--sn-accent-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px -10px rgba(23, 207, 239, 0.6) !important;
  margin: 10px 10px 4px !important;
}
#taskmenu a.compose:hover { background: var(--sn-accent-2) !important; }

/* ── Panneaux : dossiers, liste, contenu — cartes douces ───────────────────── */
#layout-sidebar, #layout-list, #layout-content {
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: var(--sn-radius-lg) !important;
  margin: 8px 4px 8px 0 !important;
  box-shadow: var(--sn-shadow) !important;
  overflow: hidden;
}
#layout-sidebar { margin-left: 8px !important; }
#layout-content { margin-right: 8px !important; background: var(--sn-surface) !important; }

/* En-têtes de colonnes + barres d'outils : transparents, sans grosse bordure. */
.header, #layout .header, .boxtitle, .footer, .toolbar {
  background: transparent !important;
  border-color: var(--sn-line-soft) !important;
  color: var(--sn-text) !important;
}
.toolbar { border-bottom: 1px solid var(--sn-line-soft) !important; }
.toolbar a.button, .toolbar-button { color: var(--sn-muted) !important; border-radius: 10px !important; }
.toolbar a.button:hover { background: var(--sn-hover) !important; color: var(--sn-text) !important; }

/* ── Dossiers ─────────────────────────────────────────────────────────────── */
#mailboxlist { background: transparent !important; }
#mailboxlist li a {
  color: var(--sn-text) !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
}
#mailboxlist li a:hover { background: var(--sn-hover) !important; }
#mailboxlist li.selected > a, #mailboxlist li a.selected {
  background: var(--sn-glow) !important;
  color: var(--sn-accent) !important;
  font-weight: 600 !important;
}
#mailboxlist li .unreadcount, .unreadcount {
  background: var(--sn-accent) !important;
  color: var(--sn-accent-ink) !important;
  border-radius: 999px !important;
}

/* ── Liste des messages ───────────────────────────────────────────────────── */
#messagelist, .messagelist { background: transparent !important; }
.messagelist tbody tr, table.messagelist tbody tr {
  border: none !important;
  border-bottom: 1px solid var(--sn-line-soft) !important;
}
.messagelist tbody tr td { border: none !important; }
.messagelist tbody tr:hover { background: var(--sn-hover) !important; }
.messagelist tbody tr.selected {
  background: var(--sn-glow) !important;
  box-shadow: inset 3px 0 0 var(--sn-accent) !important;
}
.messagelist tr.unread span.subject, .messagelist tr.unread .subject { font-weight: 700 !important; color: var(--sn-text) !important; }
.messagelist .subject { color: var(--sn-text) !important; }
.messagelist .date, .messagelist .fromto, .messagelist .from { color: var(--sn-muted) !important; }
.messagelist tr.flagged .flag span, .messagelist span.flag.flagged { color: var(--sn-accent) !important; }

/* ── Barre de recherche ───────────────────────────────────────────────────── */
.searchbar, #mailsearchform, .ui-searchbar {
  background: var(--sn-surface-2) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: 999px !important;
}
.searchbar input, #mailsearchinput { background: transparent !important; border: none !important; color: var(--sn-text) !important; }
.searchbar:focus-within { border-color: var(--sn-accent) !important; box-shadow: 0 0 0 3px var(--sn-glow) !important; }

/* ── Aperçu / lecture d'un message ────────────────────────────────────────── */
#messagecontframe, .messageview, #message-header, .message-part, .message-htmlpart {
  background: var(--sn-surface) !important;
  color: var(--sn-text) !important;
}
#message-header .subject { color: var(--sn-text) !important; }
.contactphoto, .image-attachment .contactphoto { border-radius: 50% !important; }

/* ── Champs, boutons, menus ───────────────────────────────────────────────── */
input.form-control, textarea.form-control, select.form-control, .form-control {
  background: var(--sn-surface-2) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: 10px !important;
  color: var(--sn-text) !important;
}
.form-control:focus { border-color: var(--sn-accent) !important; box-shadow: 0 0 0 3px var(--sn-glow) !important; }

.btn-primary, button.btn.btn-primary, input.btn-primary, .formbuttons .btn.mainaction {
  background: var(--sn-accent) !important;
  border-color: var(--sn-accent) !important;
  color: var(--sn-accent-ink) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.btn-primary:hover { background: var(--sn-accent-2) !important; border-color: var(--sn-accent-2) !important; }
.btn-secondary, .btn.btn-secondary, button.btn {
  border-radius: 10px !important;
}
a { color: var(--sn-accent); }
a:hover { color: var(--sn-accent-2); }

/* Menus déroulants / popups : surface douce, arrondie. */
.popupmenu, .popover, ul.toolbarmenu, .ui-dialog, .dialog {
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow: var(--sn-shadow) !important;
  color: var(--sn-text) !important;
}
ul.toolbarmenu li a:hover, .popupmenu li a:hover { background: var(--sn-hover) !important; border-radius: 8px !important; }

/* Barre de progression / pied de liste. */
.pagenav, .listing-info, #countcontrols { color: var(--sn-muted) !important; }

/* ── Page de connexion : toujours sombre, façon site Sentinel ──────────────── */
body.task-login,
body.task-login #layout {
  background: radial-gradient(1100px 560px at 50% -6%, #113038 0%, #0b0d0f 58%) fixed !important;
  color: #f2f4f5 !important;
}
body.task-login #layout-content,
body.task-login #layout-content.selected {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body.task-login #login-form.propform {
  background: #101317 !important;
  border: 1px solid #232a33 !important;
  border-radius: 18px !important;
  padding: 28px 26px !important;
  max-width: 360px !important;
  box-shadow: 0 34px 64px -22px rgba(0, 0, 0, 0.75) !important;
  color: #f2f4f5 !important;
}
body.task-login #login-footer { color: #9aa4b0 !important; margin-top: 16px; }
body.task-login #logo, body.task-login img.logo {
  max-height: 46px !important; width: auto !important; margin: 0 auto 8px !important; display: block !important;
}
body.task-login .form-control, body.task-login input.form-control {
  background: #0b0d0f !important; border-color: #232a33 !important; color: #f2f4f5 !important;
}
body.task-login .input-group-text { background: #0b0d0f !important; border-color: #232a33 !important; color: #9aa4b0 !important; }
body.task-login .form-control:focus { border-color: #17cfef !important; box-shadow: 0 0 0 3px rgba(23, 207, 239, 0.22) !important; }

/* ── Vue liste pleine largeur (façon Gmail) ────────────────────────────────── */
/* En mode « list », la liste occupe toute la largeur : on affine les colonnes. */
.messagelist thead th, table.messagelist thead td {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--sn-line-soft) !important;
  color: var(--sn-muted) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.messagelist tbody tr { height: 44px !important; }
.messagelist tbody tr td { vertical-align: middle !important; }
/* Colonne étoile / drapeau en cyan quand actif. */
.messagelist .flag span.flagged, .messagelist .star span.flagged { color: var(--sn-accent) !important; }

/* En-tête de la liste (sélection, actualiser, recherche) : épuré. */
#messagelist-header, .messagelist-header, #toolbar-menu {
  background: transparent !important;
  border-bottom: 1px solid var(--sn-line-soft) !important;
}

/* La colonne de liste occupe toute la place quand il n'y a pas d'aperçu. */
body.task-mail #layout-list { flex: 1 1 auto !important; }

/* Barre de recherche : large et centrée, façon Gmail. */
.searchbar { min-width: 320px !important; }