/* custom_theme : habillage visuel du skin Elastic pour un usage PC/navigateur.
 *
 * Principe : on ne touche jamais aux couleurs "en dur" dans les règles
 * ci-dessous. Tout passe par les variables --ct-* définies juste ici, dans
 * un bloc clair (:root) et son équivalent pour le mode sombre
 * (html.dark-mode, déjà fourni nativement par Elastic — voir plus bas).
 * Pour changer l'accent de couleur ou l'arrondi des coins, il suffit de
 * modifier les valeurs dans ces deux blocs, rien d'autre dans le fichier.
 *
 * Sélecteurs vérifiés à la source (branche 1.7 de roundcube/roundcubemail,
 * skins/elastic/styles/{layout,widgets/lists,widgets/buttons}.less) — mais
 * le rendu final n'a pas pu être vérifié dans un vrai navigateur depuis cet
 * environnement. À confirmer visuellement au premier lancement, et à
 * ajuster si une valeur détonne.
 */

:root {
  --ct-accent: #0e7490;          /* accent principal : sciemment différent du
                                     bleu Gmail (#4285f4) et du violet Yahoo
                                     (#6001d2) utilisés par source_tags, pour
                                     ne jamais confondre "action de l'interface"
                                     et "provenance d'un message". */
  --ct-accent-hover: #155e75;
  --ct-radius: 10px;
  --ct-radius-sm: 6px;
  --ct-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --ct-row-hover-bg: rgba(15, 23, 42, 0.045);
  --ct-row-selected-bg: rgba(14, 116, 144, 0.12);
  --ct-row-divider: rgba(15, 23, 42, 0.12);
  --ct-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Elastic ajoute lui-même la classe "dark-mode" sur <html> (mode sombre
 * intégré au skin depuis plusieurs versions, activable via l'icône lune du
 * menu — rien à coder de notre côté pour ça). On y adapte juste nos propres
 * variables pour garder un contraste correct, sans dupliquer toutes les
 * règles ci-dessous. */
html.dark-mode {
  --ct-accent: #22d3ee;
  --ct-accent-hover: #67e8f9;
  --ct-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --ct-row-hover-bg: rgba(255, 255, 255, 0.055);
  --ct-row-selected-bg: rgba(34, 211, 238, 0.16);
  /* "Léger trait blanc" demandé après premier test visuel réel : sans lui,
     les messages se confondaient les uns dans les autres en mode sombre. */
  --ct-row-divider: rgba(255, 255, 255, 0.14);
}

/* --- Typographie ------------------------------------------------------ */
/* Pile de polices système plutôt que le Roboto embarqué par défaut : rendu
 * plus net et plus familier sur PC (Windows/macOS/Linux), sans dépendre du
 * chargement d'une police web. */
body,
.boxlist,
.listing,
#messagelist {
  font-family: var(--ct-font);
}

/* --- Panneaux de la mise en page (#layout-*) --------------------------- */
/* Sélecteurs vérifiés dans skins/elastic/styles/layout.less. On adoucit les
 * coins et on remplace les traits de séparation nets par une ombre légère,
 * pour donner une impression de profondeur plutôt que de grille brute. */
#layout-sidebar,
#layout-list,
#layout-content {
  box-shadow: var(--ct-shadow);
}

#layout > div > .header {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* --- Boutons ------------------------------------------------------------
 * Sélecteurs vérifiés dans skins/elastic/styles/widgets/buttons.less. On ne
 * touche pas aux couleurs des variantes secondary/danger (déjà cohérentes
 * dans le skin d'origine), seulement à l'arrondi général et à l'accent
 * "primary" (action principale : Répondre, Envoyer, etc.). */
.btn,
a.btn,
button.btn,
a.button {
  border-radius: var(--ct-radius-sm);
}

.btn-primary {
  background-color: var(--ct-accent) !important;
  border-color: var(--ct-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ct-accent-hover) !important;
  border-color: var(--ct-accent-hover) !important;
}

.floating-action-buttons a.button {
  background-color: var(--ct-accent);
}

/* Liens texte (dans le corps d'un message affiché, les paramètres, etc.) */
a {
  color: var(--ct-accent);
}

/* --- Liste des messages -------------------------------------------------
 * Sélecteurs vérifiés dans skins/elastic/styles/widgets/lists.less.
 * Important : ce fichier est chargé AVANT celui du plugin source_tags (voir
 * docker-compose.yml, ordre dans ROUNDCUBEMAIL_PLUGINS), donc les règles de
 * source_tags sur .unread/.source-tagged restent prioritaires en cas de
 * chevauchement. Ici on ne touche qu'au survol et à la sélection, que
 * source_tags ne gère pas, donc aucun conflit attendu. */
/* Ligne de séparation entre chaque message : sans elle, les lignes se
 * touchent directement et se confondent visuellement (retour utilisateur
 * après premier essai réel). Fine et neutre pour rester discrète.
 *
 * Posée sur les <td> et non sur le <tr> lui-même : un border-bottom
 * directement sur une ligne de tableau ne s'affiche pas de façon fiable
 * selon le modèle de bordure HTML (constaté au premier test réel — la
 * bande de couleur de source_tags, elle, passe par box-shadow, qui n'a pas
 * ce problème). Les cellules, elles, affichent toujours leur bordure. */
#messagelist tr > td {
  border-bottom: 1px solid var(--ct-row-divider);
}

#messagelist tr:hover {
  background-color: var(--ct-row-hover-bg);
}

#messagelist tr.selected,
#messagelist tr.selected:hover {
  background-color: var(--ct-row-selected-bg);
}

/* Un peu plus d'air vertical sur chaque ligne : la densité par défaut
 * d'Elastic est pensée aussi pour le tactile/mobile, un peu trop compacte
 * pour une lecture confortable sur grand écran. */
#messagelist td.subject,
#messagelist span.subject {
  padding-block: 0.15em;
}

/* --- Barre de recherche / boîtes de dialogue --------------------------- */
.searchbar,
.uibox,
.popover {
  border-radius: var(--ct-radius);
}