/* MailHub — local, theme-aware enhancement layer (no external CDN).
 * Scoped to body.mod-mailhub so it NEVER affects other modules or the Dolibarr chrome.
 * Uses translucent surfaces + inherited text color so it harmonises with any theme
 * (eldy light, ATM, dark themes) instead of hard-coding a white card look.
 * Copyright (C) 2026 TAD-IT & SERVICES - GPL v3+
 */

body.mod-mailhub {
	--mh-1: 8px;               /* base spacing unit (8px grid) */
	--mh-2: 16px;
	--mh-3: 24px;
	--mh-radius: 10px;
	--mh-bd: rgba(120, 145, 180, .28);
	--mh-surface: rgba(125, 150, 185, .06);
	--mh-surface-2: rgba(125, 150, 185, .10);
	--mh-muted: rgba(120, 140, 165, .95);
	--mh-accent: var(--colortextlink, #2f6fb5);
	--mh-shadow: 0 6px 18px rgba(20, 50, 90, .07);
	--mh-ok: #1c9e5f;   --mh-ok-bg: rgba(31, 158, 95, .14);
	--mh-err: #d64545;  --mh-err-bg: rgba(214, 69, 69, .14);
	--mh-warn: #b6810f; --mh-warn-bg: rgba(201, 135, 26, .16);
	/* Tooltip: white background + near-black text, kept identical in light & dark. */
	--mh-tip-bg: #ffffff; --mh-tip-fg: #1a1a1a; --mh-tip-bd: rgba(0, 0, 0, .18);
}

/* ---- Central theme-aware tooltip (replaces the raw native black title) --- */
/* Driven by the mailhubTip() helper => [data-mhtip]. Rounded, soft, arrowed,
 * shown on hover AND keyboard focus. aria-label carries the text for a11y. */
body.mod-mailhub [data-mhtip] { position: relative; }
body.mod-mailhub [data-mhtip]:hover::after,
body.mod-mailhub [data-mhtip]:focus-visible::after {
	content: attr(data-mhtip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: var(--mh-tip-bg);
	color: var(--mh-tip-fg);
	border: 1px solid var(--mh-bd);
	border-radius: 7px;
	padding: 5px 10px;
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(20, 50, 90, .18);
	z-index: 3000;
	pointer-events: none;
}
body.mod-mailhub [data-mhtip]:hover::before,
body.mod-mailhub [data-mhtip]:focus-visible::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 3px);
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--mh-tip-bg);
	filter: drop-shadow(0 1px 0 var(--mh-bd));
	z-index: 3001;
	pointer-events: none;
}

/* ---- KPI tiles (dashboard) : ANM-004 ------------------------------------ */
body.mod-mailhub .mailhub-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mh-2);
	margin: 0 0 var(--mh-3);
}
body.mod-mailhub .mailhub-kpi {
	background: var(--mh-surface);
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	padding: var(--mh-2) var(--mh-3);
	box-shadow: var(--mh-shadow);
}
body.mod-mailhub .mailhub-kpi .mh-k { color: var(--mh-muted); font-size: .82em; font-weight: 600; letter-spacing: .02em; }
body.mod-mailhub .mailhub-kpi .mh-v { font-size: 2.1em; font-weight: 700; line-height: 1.1; margin-top: 4px; letter-spacing: -.02em; }
body.mod-mailhub .mailhub-kpi.is-ok  .mh-v { color: var(--mh-ok); }
body.mod-mailhub .mailhub-kpi.is-err .mh-v { color: var(--mh-err); }

/* ---- 14-day chart colours (theme-aware, ex-hardcoded) : ANM-003/001 ---- */
body.mod-mailhub .mh-bar-sent { background: var(--mh-accent); }
body.mod-mailhub .mh-bar-fail { background: var(--mh-err); }
body.mod-mailhub .mh-legend-sent { color: var(--mh-accent); }
body.mod-mailhub .mh-legend-fail { color: var(--mh-err); }

/* ---- Section blocks & titles : ANM-005 / ANM-015 ----------------------- */
body.mod-mailhub .mailhub-card {
	background: var(--mh-surface);
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	box-shadow: var(--mh-shadow);
	overflow: hidden;
	margin-bottom: var(--mh-3);
}
/* Give the native grey section header a clearer hierarchy on our pages only */
body.mod-mailhub .liste_titre > td,
body.mod-mailhub .liste_titre > th {
	font-weight: 700;
}
body.mod-mailhub .mailhub-section {
	font-weight: 700;
	font-size: 1.05em;
	padding: var(--mh-1) 0 var(--mh-1) 12px;
	border-left: 3px solid var(--mh-accent);
	margin: var(--mh-3) 0 var(--mh-2);
}

/* ---- Forms : ANM-006 / 007 / 008 --------------------------------------- */
/* Tame the label→field gap and give inputs a consistent rhythm (our pages only) */
body.mod-mailhub .page-connection-card .fieldrequired,
body.mod-mailhub .page-connection-card td.titlefield { white-space: normal; }
body.mod-mailhub .mailhub-help {
	display: block;
	color: var(--mh-muted);
	font-size: .86em;
	line-height: 1.35;
	margin-top: 4px;
	max-width: 640px;       /* stop the provider help from sprawling / overlapping */
}
body.mod-mailhub .mailhub-help a { white-space: nowrap; }
/* Info tooltips keep a small, consistent left gap instead of floating far right */
body.mod-mailhub .page-connection-card img.hideonsmartphone,
body.mod-mailhub .page-connection-card .classfortooltip { margin-left: 6px; vertical-align: middle; }

/* ---- Buttons : ANM-009 (primary/secondary hierarchy) ------------------- */
body.mod-mailhub .mailhub-actions { display: flex; gap: var(--mh-2); justify-content: center; margin-top: var(--mh-3); }
body.mod-mailhub .button.mailhub-primary,
body.mod-mailhub input.mailhub-primary {
	background: var(--mh-accent);
	border-color: var(--mh-accent);
	color: #fff;
	font-weight: 600;
}
/* De-emphasise the native Cancel button on our pages (keeps Dolibarr's helper).
 * !important is needed because eldy sets input.button backgrounds with high specificity. */
body.mod-mailhub .button-cancel,
body.mod-mailhub input.button.button-cancel {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--mh-muted) !important;
	border: 1px solid var(--mh-bd) !important;
}
/* Primary top-right action (New connection) — accent, clearly the main action */
body.mod-mailhub a.butActionNew.mailhub-primary {
	background: var(--mh-accent);
	color: #fff;
	border-color: var(--mh-accent);
}
/* Destructive action (purge) — red and separated from benign exports */
body.mod-mailhub a.butActionDelete.mailhub-danger { margin-left: var(--mh-2); }

/* ---- Uniform card frame on the main list/section tables (all pages) ----- */
body.mod-mailhub .page-log-list table.liste,
body.mod-mailhub .page-connection-list table.noborder.centpercent,
body.mod-mailhub .page-diagnostic table.noborder.centpercent,
body.mod-mailhub .page-admin table.noborder.centpercent,
body.mod-mailhub .page-doc table.noborder.centpercent {
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	overflow: hidden;
	box-shadow: var(--mh-shadow);
	margin-bottom: var(--mh-3);
}
/* never double-frame nested tables (e.g. inside form rows) */
body.mod-mailhub table table { border: 0; border-radius: 0; box-shadow: none; margin: 0; }

/* Inline export/import panels -> theme-aware (was a hardcoded #d5ddeb border) */
body.mod-mailhub .mailhub-panel {
	margin: var(--mh-1) 0 var(--mh-2);
	padding: var(--mh-2);
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	background: var(--mh-surface);
}

/* ---- Badges contrast : ANM-011 (scoped, does not touch global badges) --- */
body.mod-mailhub .mailhub-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .82em; }
body.mod-mailhub .mailhub-badge.ok   { color: var(--mh-ok);   background: var(--mh-ok-bg); }
body.mod-mailhub .mailhub-badge.err  { color: var(--mh-err);  background: var(--mh-err-bg); }
body.mod-mailhub .mailhub-badge.warn { color: var(--mh-warn); background: var(--mh-warn-bg); }

/* ---- Doc accordions : ANM-013 (theme-aware, replaces hardcoded inline) -- */
body.mod-mailhub details.mailhub-acc {
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	padding: 10px 14px;
	margin-bottom: var(--mh-1);
	background: var(--mh-surface);
}
body.mod-mailhub details.mailhub-acc > summary { cursor: pointer; font-weight: 700; color: var(--mh-accent); }
body.mod-mailhub details.mailhub-acc[open] { background: var(--mh-surface-2); }

/* ---- Disabled state for "Send contexts" when All is checked : ANM-010 --- */
body.mod-mailhub .mailhub-ctx.is-disabled { opacity: .45; }

/* ---- Accessibility : visible keyboard focus (ANM-011 / WCAG) ------------ */
body.mod-mailhub a:focus-visible,
body.mod-mailhub button:focus-visible,
body.mod-mailhub input:focus-visible,
body.mod-mailhub select:focus-visible,
body.mod-mailhub summary:focus-visible {
	outline: 2px solid var(--mh-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Page polish: native content tables get a card look ---------------- */
/* logs & connections lists (Dolibarr wraps them in .div-table-responsive) */
body.mod-mailhub.page-log-list .div-table-responsive,
body.mod-mailhub.page-connection-list .div-table-responsive,
/* diagnostic renders plain .noborder.centpercent tables per section */
body.mod-mailhub.page-diagnostic table.noborder.centpercent {
	background: var(--mh-surface);
	border: 1px solid var(--mh-bd);
	border-radius: var(--mh-radius);
	box-shadow: var(--mh-shadow);
	overflow: hidden;
	margin-bottom: var(--mh-3);
}
/* keep the striped rows readable inside the card */
body.mod-mailhub.page-diagnostic table.noborder.centpercent td { padding: 10px 14px; }
body.mod-mailhub.page-diagnostic table.noborder.centpercent .liste_titre > td { font-weight: 700; }

/* ---- Form field width rhythm : ANM-008 -------------------------------- */
body.mod-mailhub.page-connection-card input[type="text"],
body.mod-mailhub.page-connection-card input[type="email"],
body.mod-mailhub.page-connection-card input[type="password"],
body.mod-mailhub.page-connection-card select.flat { min-width: 320px; }
body.mod-mailhub.page-connection-card input[name="port"] { min-width: 0; width: 90px; }
/* ---- Info tooltip column : ANM-007 ------------------------------------ */
body.mod-mailhub.page-connection-card .classfortooltip,
body.mod-mailhub.page-connection-card img[src*="info"] { margin-left: 8px; vertical-align: middle; opacity: .8; }

/* ---- Cancel button: de-emphasise vs the theme's filled gradient -------- */
/* One scoped, justified override: the native helper renders Cancel with the
 * same filled .button gradient as Save; on our pages it should read secondary. */
body.mod-mailhub input.button-cancel,
body.mod-mailhub .button-cancel {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--mh-accent) !important;
	border: 1px solid var(--mh-bd) !important;
	text-shadow: none !important;
}

/* ---- No underline anywhere on links & buttons (ALL states) ------------- */
body.mod-mailhub a,
body.mod-mailhub a:link,
body.mod-mailhub a:hover,
body.mod-mailhub a:focus,
body.mod-mailhub a:visited,
body.mod-mailhub a:active,
body.mod-mailhub .butAction,
body.mod-mailhub .butActionNew,
body.mod-mailhub .butActionDelete,
body.mod-mailhub .button,
body.mod-mailhub button,
body.mod-mailhub .tab,
body.mod-mailhub .tabTitle { text-decoration: none !important; }

/* ---- Tab bar rounded (uniform with the cards) : page-admin & others ---- */
body.mod-mailhub .tab { border-radius: var(--mh-radius) var(--mh-radius) 0 0; }
body.mod-mailhub .tab.tabactive {
	background: var(--mh-surface);
	border: 1px solid var(--mh-bd);
	border-bottom-color: transparent;
}
body.mod-mailhub .tabBar { border-radius: var(--mh-radius) !important; }

/* ---- Uniform rounding on inputs, selects and buttons ------------------- */
body.mod-mailhub input[type="text"],
body.mod-mailhub input[type="password"],
body.mod-mailhub input[type="email"],
body.mod-mailhub input[type="number"],
body.mod-mailhub input.flat,
body.mod-mailhub select,
body.mod-mailhub textarea { border-radius: 6px; }
body.mod-mailhub .button,
body.mod-mailhub .butAction,
body.mod-mailhub .butActionNew,
body.mod-mailhub .butActionDelete,
body.mod-mailhub input.button,
body.mod-mailhub button { border-radius: 3px; }

/* ---- Responsive : ANM-002 --------------------------------------------- */
@media (max-width: 767px) {
	body.mod-mailhub .mailhub-kpis { grid-template-columns: repeat(2, 1fr); }
	/* let wide native tables scroll instead of overflowing the viewport */
	body.mod-mailhub .fichecenter,
	body.mod-mailhub .div-table-responsive,
	body.mod-mailhub .mailhub-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* touch targets */
	body.mod-mailhub .butAction,
	body.mod-mailhub .button { min-height: 40px; }
}
@media (max-width: 480px) {
	body.mod-mailhub .mailhub-kpis { grid-template-columns: 1fr; }
}

/* ======================================================================= */
/* Conformite arrondi — durcissement (priorite sur eldy, mesure >= 6px)    */
/* ======================================================================= */

/* Tableaux (listes + panneaux) : cadre arrondi qui clippe son contenu */
body.mod-mailhub table.liste,
body.mod-mailhub table.noborder.centpercent,
body.mod-mailhub table.border.centpercent {
	border-radius: 10px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
}
/* Tables imbriquees : ne PAS arrondir/clipper (layout interne) */
body.mod-mailhub table table {
	border-radius: 0 !important;
	border-collapse: collapse !important;
	overflow: visible !important;
}

/* Bandeaux de section gris (.liste_titre) : coins hauts arrondis */
body.mod-mailhub tr.liste_titre:first-child > *:first-child,
body.mod-mailhub tr.titre_bandeau:first-child > *:first-child {
	border-top-left-radius: 10px !important;
}
body.mod-mailhub tr.liste_titre:first-child > *:last-child,
body.mod-mailhub tr.titre_bandeau:first-child > *:last-child {
	border-top-right-radius: 10px !important;
}

/* Boutons : rayon aligne sur le natif Dolibarr (3px) */
body.mod-mailhub .button,
body.mod-mailhub input.button,
body.mod-mailhub input[type="submit"],
body.mod-mailhub input[type="button"],
body.mod-mailhub .butAction,
body.mod-mailhub .butActionNew,
body.mod-mailhub .butActionDelete,
body.mod-mailhub button.button_search,
body.mod-mailhub button {
	border-radius: 3px !important;
}

/* Champs : arrondi effectif uniforme */
body.mod-mailhub input[type="text"],
body.mod-mailhub input[type="password"],
body.mod-mailhub input[type="email"],
body.mod-mailhub input[type="number"],
body.mod-mailhub input.flat,
body.mod-mailhub select,
body.mod-mailhub textarea {
	border-radius: 6px !important;
}

/* ======================================================================= */
/* Barre d'actions unifiee : icone + court libelle, SANS cadre de bouton   */
/* (remplace le mix bouton plein / lien / icone muette)                    */
/* ======================================================================= */
body.mod-mailhub .mailhub-iconaction {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .35em .55em;
	margin-left: .5em;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--colortextlink, #2b3e97);
	font-weight: 500;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
}
body.mod-mailhub .mailhub-iconaction:first-child { margin-left: 0; }
body.mod-mailhub .mailhub-iconaction:hover,
body.mod-mailhub .mailhub-iconaction:focus-visible {
	background: rgba(0, 0, 0, .06) !important;
}
/* Icon size aligned to the native Dolibarr icon (16px) and kept absolute (rem, not em)
 * so all icon-actions stay uniform across pages regardless of the surrounding font-size
 * (e.g. logs bar vs diagnostic bar). */
body.mod-mailhub .mailhub-iconaction .fa { font-size: 1rem; line-height: 1; }
body.mod-mailhub .mailhub-iconaction .mailhub-fmt { opacity: .8; font-weight: 600; }
body.mod-mailhub .mailhub-iconaction.is-danger { color: #b03636; }
body.mod-mailhub .mailhub-iconaction.is-danger:hover,
body.mod-mailhub .mailhub-iconaction.is-danger:focus-visible {
	background: rgba(176, 54, 54, .10) !important;
}
@media (prefers-color-scheme: dark) {
	body.mod-mailhub .mailhub-iconaction:hover,
	body.mod-mailhub .mailhub-iconaction:focus-visible { background: rgba(255, 255, 255, .10) !important; }
}

/* ======================================================================= */
/* Champs de saisie & listes : bordure claire legere + arrondi + focus     */
/* (delimite la zone editable, revele l'arrondi ; theme-aware)             */
/* ======================================================================= */
body.mod-mailhub input[type="text"],
body.mod-mailhub input[type="password"],
body.mod-mailhub input[type="email"],
body.mod-mailhub input[type="number"],
body.mod-mailhub input[type="search"],
body.mod-mailhub input.flat,
body.mod-mailhub select,
body.mod-mailhub textarea {
	border: 1px solid var(--mh-bd) !important;
	border-radius: 6px !important;
	background-color: var(--mh-surface);
}
body.mod-mailhub input[type="text"]:focus,
body.mod-mailhub input[type="password"]:focus,
body.mod-mailhub input[type="email"]:focus,
body.mod-mailhub input[type="number"]:focus,
body.mod-mailhub input[type="search"]:focus,
body.mod-mailhub input.flat:focus,
body.mod-mailhub select:focus,
body.mod-mailhub textarea:focus {
	border-color: var(--colortextlink, #2b3e97) !important;
	box-shadow: 0 0 0 2px rgba(43, 62, 151, .14);
	outline: none;
}

/* ======================================================================= */
/* Placeholder de liste (— Selectionner —) affiche en fond, grise          */
/* ======================================================================= */
body.mod-mailhub select:invalid,
body.mod-mailhub select.mailhub-ph:has(option[value=""]:checked) {
	color: #6b7280;
}
body.mod-mailhub select option { color: initial; }

/* ----------------------------------------------------------------------- */
/* Cases a cocher / radios : NE PAS heriter de la bordure des champs texte  */
/* (uniformite ; corrige l'incoherence des checkbox .flat)                  */
/* ----------------------------------------------------------------------- */
body.mod-mailhub input[type="checkbox"],
body.mod-mailhub input[type="radio"] {
	border: revert !important;
	background-color: revert !important;
	border-radius: revert !important;
	box-shadow: none !important;
}

/* Cases d'etat cliquables (Default/Fallback) : rendu case NATIVE identique a
   Settings, mais inertes au clic direct (le lien parent gere l'action). */
body.mod-mailhub .mailhub-cbstatus { pointer-events: none; vertical-align: middle; }
body.mod-mailhub a > .mailhub-cbstatus { cursor: pointer; }

/* Boutons Console/Docs (page Doc) : icone a cote du mot, pas au-dessus */
body.mod-mailhub.page-doc a.butAction { white-space: nowrap; }

/* ---- Bandeaux de notice / alertes : arrondis (etaient a angles droits) --- */
body.mod-mailhub .info,
body.mod-mailhub .warning,
body.mod-mailhub .error,
body.mod-mailhub .ok,
body.mod-mailhub div.info,
body.mod-mailhub div.warning,
body.mod-mailhub div.error,
body.mod-mailhub .mesgs,
body.mod-mailhub .jnotify-notification,
body.mod-mailhub .jnotify-container .jnotify-notification {
	border-radius: var(--mh-radius) !important;
}

/* ======================================================================= */
/* Boutons-texte unifies : style clair neutre (comme le bouton "TEST"),    */
/* applique a TOUS les boutons a texte (remplace le violet .butAction).     */
/* Les icones plates .mailhub-iconaction ne sont PAS concernees.           */
/* ======================================================================= */
body.mod-mailhub .butAction,
body.mod-mailhub .butActionDelete,
body.mod-mailhub .button,
body.mod-mailhub input.button,
body.mod-mailhub button.button {
	background: var(--mh-surface-2) !important;
	background-image: none !important;
	color: inherit !important;
	border: 1px solid var(--mh-bd) !important;
	border-radius: 3px !important;
	box-shadow: 0 1px 2px rgba(20, 50, 90, .08) !important;
	text-shadow: none !important;
	font-weight: 600;
}
body.mod-mailhub .butAction .fa,
body.mod-mailhub .button .fa,
body.mod-mailhub button.button .fa { color: inherit !important; }
body.mod-mailhub .butAction:hover,
body.mod-mailhub .butActionDelete:hover,
body.mod-mailhub .button:hover,
body.mod-mailhub input.button:hover,
body.mod-mailhub button.button:hover {
	background: var(--mh-surface) !important;
	filter: brightness(.98);
}