/* ==========================================================================
   Modo oscuro del webmail — se activa con <html data-tema="oscuro">
   (lo pone el script del <head>; la preferencia se guarda por usuario en el
   servidor, ver tema-oscuro.js y /SOGo/tema). Doc: /etc/sogo/README.md.

   Se carga DESPUES de brand.css, mail.css y de la marca del dominio, asi que
   redefine sus variables. Solo toca lo neutro (fondos, lineas, texto): el
   acento de cada empresa (cian de TechStudi, rojo de 2M) se respeta.
   El cuerpo del correo recibido se deja sobre papel claro a proposito: los
   correos traen sus propios colores y en oscuro quedarian ilegibles.
   ========================================================================== */
html[data-tema="oscuro"] {
  color-scheme: dark;              /* barras de scroll y controles nativos oscuros */
  --ts-canvas:  #10151c;
  --ts-surface: #161c25;
  --ts-hover:   #1d2530;
  --ts-line:    #272f3b;
  --ts-line-2:  #394453;
  --ts-text:    #e6edf6;
  --ts-text-2:  #a9b6c8;
  --ts-text-3:  #7f8da1;
  --ts-cy-wash: #11303a;           /* fondo de la fila seleccionada */
}

html[data-tema="oscuro"] body { background: var(--ts-canvas); }

/* ---------- 1. Lista de mensajes ---------- */
html[data-tema="oscuro"] .sg-message-list-item sg-avatar-image .sg-icon-badge-container,
html[data-tema="oscuro"] #detailView md-card-content sg-avatar-image .sg-icon-badge-container,
html[data-tema="oscuro"] body[ng-app="SOGo.MailerUI"] sg-avatar-image .sg-icon-badge-container {
  background: #232c38;
}
html[data-tema="oscuro"] .sg-message-list-item sg-avatar-image md-icon[ng-transclude],
html[data-tema="oscuro"] #detailView md-card-content sg-avatar-image md-icon[ng-transclude] {
  color: #8b99ad !important;
}
/* No leidos: el remitente iba en azul noche, aqui en blanco */
html[data-tema="oscuro"] .sg-message-list-item.unread .sg-tile-content .sg-md-subhead { color: #ffffff !important; }
html[data-tema="oscuro"] .sg-message-list-item.unread .sg-tile-content .sg-md-body { color: var(--ts-text) !important; }
/* Fila seleccionada */
html[data-tema="oscuro"] .sg-message-list-item.md-accent.md-bg.md-hue-2 .sg-md-subhead { color: #ffffff !important; }
html[data-tema="oscuro"] .sg-message-list-item.md-accent.md-bg.md-hue-2 .sg-md-body { color: var(--ts-text-2) !important; }
html[data-tema="oscuro"] .sg-message-list-item.md-accent.md-bg.md-hue-2 sg-avatar-image .sg-icon-badge-container { background: #1b3b45; }
html[data-tema="oscuro"] .sg-message-list-item.md-accent.md-bg.md-hue-2 sg-avatar-image md-icon[ng-transclude] { color: #8fc6d4 !important; }
/* Panel de carpetas (md-sidenav) y barras de subcabecera: SOGo usa tonos claros de la
   paleta de fondo aunque el tema sea oscuro */
html[data-tema="oscuro"] md-sidenav md-content { background-color: #131923 !important; }
html[data-tema="oscuro"] md-subheader,
html[data-tema="oscuro"] .md-subheader,
html[data-tema="oscuro"] .md-subheader > div,
html[data-tema="oscuro"] md-subheader > div,
html[data-tema="oscuro"] md-subheader .md-subheader-inner { background: #131923 !important; }

/* ---------- 2. Mensaje abierto ---------- */
html[data-tema="oscuro"] #detailView md-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -16px rgba(0, 0, 0, .7) !important;
}
html[data-tema="oscuro"] #detailView md-card > md-card-actions { background: #1a212b; }
html[data-tema="oscuro"] #detailView md-card > md-card-actions .md-button:not([disabled]):hover { background: #232c38 !important; }
html[data-tema="oscuro"] #detailView md-chips.sg-readonly md-chip,
html[data-tema="oscuro"] #detailView md-chips.sg-dense md-chip { background: #222b36 !important; color: var(--ts-text-2) !important; }
html[data-tema="oscuro"] #detailView .msg-attachment-link md-card,
html[data-tema="oscuro"] #detailView .msg-attachment-image md-card { background: #1a212b !important; }

/* El correo recibido, sobre papel: se respeta tal cual lo envio el remitente */
html[data-tema="oscuro"] #detailView .msg-body {
  background: #ffffff;
  color: #15202b;
  border: 1px solid var(--ts-line);
  border-radius: 10px;
  padding: 20px 22px 24px !important;
  margin-top: 16px;
}
html[data-tema="oscuro"] #detailView .msg-body a { color: #0b6b8c; }
html[data-tema="oscuro"] #detailView .msg-body blockquote { border-left-color: #cfd8e3; color: #44536a; }

/* ---------- 3. Redactar ---------- */
html[data-tema="oscuro"] md-dialog.sg-mail-editor header .md-button:hover,
html[data-tema="oscuro"] md-dialog.sg-mail-editor .ck.ck-button:not(.ck-disabled):hover { background: #232c38 !important; }
html[data-tema="oscuro"] md-dialog.sg-mail-editor .ck.ck-button.ck-on { background: #1b3b45 !important; color: #e6edf6 !important; }
html[data-tema="oscuro"] md-dialog.sg-mail-editor .ck.ck-editor__main > .ck-editor__editable,
html[data-tema="oscuro"] md-dialog.sg-mail-editor .cke_contents,
html[data-tema="oscuro"] md-dialog.sg-mail-editor md-dialog-content { background: var(--ts-surface) !important; color: var(--ts-text); }
html[data-tema="oscuro"] md-dialog.sg-mail-editor md-chip { background: #11303a !important; color: var(--ts-text) !important; }
html[data-tema="oscuro"] md-dialog.sg-mail-editor .md-chip-input-container input,
html[data-tema="oscuro"] md-dialog.sg-mail-editor md-input-container .md-input { color: var(--ts-text) !important; }
html[data-tema="oscuro"] body[ng-app="SOGo.MailerUI"] .md-dialog-backdrop.md-opaque { background-color: rgba(0, 0, 0, .7) !important; }

/* ---------- 4. Chat (Converse): solo fondos y texto, el acento no se toca ---------- */
html[data-tema="oscuro"] #conversejs,
html[data-tema="oscuro"] .conversejs[data-converse-theme],
html[data-tema="oscuro"] converse-root[data-converse-theme] {
  --background-color: #161c25 !important;
  --background-color-rgb: 22, 28, 37 !important;
  --foreground-color: #e6edf6 !important;
  --lighter-blue: #1b2b38 !important;         /* burbuja del mensaje propio */
  --chat-content-background-color: #10151c !important;
  --chat-textarea-color: #e6edf6 !important;
  --text-color: #e6edf6 !important;
  --subdued-color: #a9b6c8 !important;
  --link-color: #4cd7ef !important;
  --controlbox-heading-color: #a9b6c8 !important;
}
html[data-tema="oscuro"] #conversejs .chatbox .chat-content,
html[data-tema="oscuro"] #conversejs .chatbox .chat-body,
html[data-tema="oscuro"] #conversejs #controlbox .controlbox-pane,
html[data-tema="oscuro"] #conversejs .chatbox .flyout,
html[data-tema="oscuro"] #conversejs .chatbox textarea,
html[data-tema="oscuro"] #conversejs .list-container,
html[data-tema="oscuro"] #conversejs converse-chat-content { background-color: #161c25 !important; color: #e6edf6 !important; }
html[data-tema="oscuro"] #conversejs .chat-msg__text,
html[data-tema="oscuro"] #conversejs .chat-msg__author,
html[data-tema="oscuro"] #conversejs .list-item a,
html[data-tema="oscuro"] #conversejs .items-list .list-item { color: #e6edf6 !important; }
html[data-tema="oscuro"] #conversejs .list-item:hover,
html[data-tema="oscuro"] #conversejs .items-list .list-item.open { background-color: #1d2530 !important; }

/* ---------- 5. Boton de la barra superior (lo pone tema-oscuro.js) ---------- */
.ts-boton-tema { color: inherit; }
.ts-boton-tema svg { width: 22px; height: 22px; fill: currentColor; vertical-align: middle; }
.ts-boton-tema .ts-sol { display: none; }
html[data-tema="oscuro"] .ts-boton-tema .ts-sol { display: inline; }
html[data-tema="oscuro"] .ts-boton-tema .ts-luna { display: none; }

/* Titulos de las secciones del chat ("Chats", "Contacts"...): en oscuro se perdian */
html[data-tema="oscuro"] #conversejs .controlbox-heading,
html[data-tema="oscuro"] #conversejs .controlbox-heading__text,
html[data-tema="oscuro"] #conversejs .list-container__header,
html[data-tema="oscuro"] #conversejs .roster-contacts .group-toggle { color: #a9b6c8 !important; }

/* ---------- Texto sobre los fondos que forzamos a oscuro ----------
   SOGo cree que el panel de carpetas es claro y pinta su texto en negro: hay que
   aclararlo a mano o no se lee (lo aviso el usuario). */
html[data-tema="oscuro"] md-sidenav,
html[data-tema="oscuro"] md-sidenav md-content,
html[data-tema="oscuro"] md-sidenav md-list-item,
html[data-tema="oscuro"] md-sidenav .md-list-item-inner,
html[data-tema="oscuro"] md-sidenav .sg-mailbox-list-item,
html[data-tema="oscuro"] md-sidenav .sg-no-wrap,
html[data-tema="oscuro"] md-sidenav span,
html[data-tema="oscuro"] md-sidenav p,
html[data-tema="oscuro"] md-sidenav div:not(.md-ripple):not(.md-ripple-container),
html[data-tema="oscuro"] md-subheader,
html[data-tema="oscuro"] .md-subheader,
html[data-tema="oscuro"] md-subheader .md-subheader-content,
html[data-tema="oscuro"] .md-subheader .md-subheader-content { color: var(--ts-text) !important; }
html[data-tema="oscuro"] md-sidenav md-icon,
html[data-tema="oscuro"] md-sidenav .md-button md-icon { color: var(--ts-text-2) !important; }
/* El icono del modulo activo va atenuado a proposito, pero al 26% no se veia */
html[data-tema="oscuro"] .toolbar-main .md-button[disabled] md-icon,
html[data-tema="oscuro"] md-toolbar .md-button[disabled] md-icon { color: rgba(255, 255, 255, .45) !important; }
/* Chat: titulos y conmutadores de las listas */
html[data-tema="oscuro"] #conversejs .list-toggle,
html[data-tema="oscuro"] #conversejs .list-toggle:hover,
html[data-tema="oscuro"] #conversejs .roster-filter,
html[data-tema="oscuro"] #conversejs .roster-filter::placeholder,
html[data-tema="oscuro"] #conversejs .chat-head .chatbox-title__text,
html[data-tema="oscuro"] #conversejs .controlbox-pane .list-container__header { color: #c3cedd !important; }
/* Iconos sueltos que SOGo pinta en negro al creer que el fondo es claro
   (barra de orden de la lista, carpeta vacia). Selectores justos: el resto de
   iconos de la lista ya los colorea mail.css (estrella, adjuntos...). */
html[data-tema="oscuro"] md-subheader md-icon,
html[data-tema="oscuro"] .md-subheader md-icon,
html[data-tema="oscuro"] md-content > md-icon,
html[data-tema="oscuro"] md-content > div > md-icon,
html[data-tema="oscuro"] md-content > .sg-md-title md-icon { color: var(--ts-text-3) !important; }
/* Fantasma que se ve al arrastrar un mensaje a una carpeta */
html[data-tema="oscuro"] sg-draggable-helper { background: var(--ts-surface) !important; color: var(--ts-text) !important; }
html[data-tema="oscuro"] sg-draggable-helper md-icon { color: var(--ts-text-2) !important; }

/* ---------- Chat: la caja donde se escribe ----------
   Converse pinta el textarea con --background-color, el mismo tono que el panel, y el
   filete superior con --chat-color (azul noche): en oscuro los tres se confunden. */
html[data-tema="oscuro"] #conversejs .chatbox .bottom-panel,
html[data-tema="oscuro"] #conversejs .chatbox .chat-message-form,
html[data-tema="oscuro"] #conversejs .chatbox .muc-bottom-panel { background-color: #1d2530 !important; }
html[data-tema="oscuro"] #conversejs .chatbox .bottom-panel .chat-message-form {
  border-top-color: #00b4d8 !important;
  border-inline-end-color: #00b4d8 !important;
}
html[data-tema="oscuro"] #conversejs .chatbox .chat-textarea,
html[data-tema="oscuro"] #conversejs .chatbox .bottom-panel .chat-message-form input {
  background-color: #1d2530 !important;
  color: #e6edf6 !important;
  caret-color: #00e5ff !important;
  outline-color: #39465a !important;
}
html[data-tema="oscuro"] #conversejs .chatbox .chat-textarea::placeholder { color: #8795a8 !important; }
html[data-tema="oscuro"] #conversejs .chatbox .chat-toolbar { background-color: #1d2530 !important; }

/* ---------- Chat en oscuro: cabeceras e iconos ----------
   En claro, cabecera de conversacion, panel de contactos y boton "Chat" van en azul noche.
   Sobre fondo oscuro ese azul satura y los iconos se pierden: se sustituye por una
   superficie neutra un punto mas clara, con el acento solo en los detalles. */
html[data-tema="oscuro"] #conversejs,
html[data-tema="oscuro"] .conversejs[data-converse-theme],
html[data-tema="oscuro"] converse-root[data-converse-theme] {
  --chat-color: #222c38 !important;
  --chat-color-hover: #2b3645 !important;
  --chat-rgb: 34, 44, 56 !important;
  --muc-color: #222c38 !important;
  --muc-color-hover: #2b3645 !important;
  --muc-rgb: 34, 44, 56 !important;
  --controlbox-color: #222c38 !important;
  --heading-color: #eaf2fb !important;
  --chat-head-color: #222c38 !important;
}
html[data-tema="oscuro"] #conversejs .chat-head,
html[data-tema="oscuro"] #conversejs .chat-head-chatbox,
html[data-tema="oscuro"] #conversejs #controlbox .controlbox-head,
html[data-tema="oscuro"] #conversejs converse-chat-heading {
  background-color: #222c38 !important;
  border-bottom: 1px solid #323e4e !important;
  color: #eaf2fb !important;
}
html[data-tema="oscuro"] #conversejs .chat-head .chatbox-title,
html[data-tema="oscuro"] #conversejs .chat-head .chatbox-title__text,
html[data-tema="oscuro"] #conversejs .chat-head .chatbox-title__text a { color: #eaf2fb !important; }
html[data-tema="oscuro"] #conversejs .chat-head converse-icon,
html[data-tema="oscuro"] #conversejs .chat-head .fa,
html[data-tema="oscuro"] #conversejs .chat-head button { color: #a9bccf !important; }
html[data-tema="oscuro"] #conversejs .chat-head button:hover converse-icon,
html[data-tema="oscuro"] #conversejs .chat-head button:hover .fa { color: #e0f7ff !important; }
/* Iconos de la barra de escribir: mas claros */
html[data-tema="oscuro"] #conversejs .chat-toolbar converse-icon,
html[data-tema="oscuro"] #conversejs .chat-toolbar .fa,
html[data-tema="oscuro"] #conversejs .chat-toolbar button { color: #dce6f2 !important; }
html[data-tema="oscuro"] #conversejs .chat-toolbar button:hover converse-icon { color: #ffffff !important; }
/* Enviar: relleno de acento con el icono oscuro, como el boton de enviar del correo */
html[data-tema="oscuro"] #conversejs .send-button {
  background-color: #00b4d8 !important;
  border-radius: 8px !important;
  padding: 2px 10px !important;
}
html[data-tema="oscuro"] #conversejs .send-button converse-icon,
html[data-tema="oscuro"] #conversejs .send-button .fa,
html[data-tema="oscuro"] #conversejs .send-button:hover converse-icon { color: #06212b !important; }
html[data-tema="oscuro"] #conversejs .send-button:hover { background-color: #22c9ea !important; }
/* Boton flotante "Chat" */
html[data-tema="oscuro"] #conversejs converse-chats.converse-overlayed .toggle-controlbox {
  background: linear-gradient(160deg, #2b3645, #222c38) !important;
  color: #eaf2fb !important;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, .28), 0 -6px 20px -8px rgba(0, 0, 0, .6) !important;
}

/* ---------- El dibujo (fill del svg) de los iconos del chat ----------
   Converse pone al <svg> fill = var(--chat-color) y su propio color: en oscuro los iconos
   quedaban casi del color del fondo. Heredando el color del contexto (barra de escribir,
   cabecera, boton de enviar) y siguiendolo con el relleno, cada icono se ve donde esta. */
html[data-tema="oscuro"] #conversejs converse-icon svg,
html[data-tema="oscuro"] #conversejs button svg,
html[data-tema="oscuro"] #conversejs a svg {
  color: inherit !important;
  fill: currentColor !important;
}