/* mestral_portal — branding visual de Roundcube (skin Elastic) */

/* ────────────────────────────────────────────────────────────────────────────
 * Logo a la PÀGINA DE LOGIN.
 * DOM Elastic:  <div id="layout-content"> <img id="logo" src="..."> ... </div>
 * `content: url(...)` reemplaça la imatge mostrada (Chrome/Firefox/Safari).
 * ──────────────────────────────────────────────────────────────────────────── */
img#logo {
  content: url('mestral-logo-big.svg');
  max-width: 320px;
  max-height: 90px;
  height: auto;
  width: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Logo al MENÚ LATERAL (post-login).
 * DOM Elastic taskmenu: <a class="button-logo"> amb <img> dins, o un
 * pseudo-bg al propi botó. Cobrim ambdós casos.
 * ──────────────────────────────────────────────────────────────────────────── */
#taskmenu .button-logo,
#taskmenu a.button-logo {
  background-image: url('mestral-logo.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: transparent !important;
}
#taskmenu .button-logo img,
#taskmenu a.button-logo img {
  content: url('mestral-logo.svg');
  max-width: 100%;
  max-height: 48px;
  height: auto;
  width: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Entrada "El meu compte (Mestral)" a Configuració.
 * Roundcube Elastic genera <li><a><span class="inner">label</span></a></li>.
 * Posem la icona via background SVG inline al pseudo-element del <a>.
 * ──────────────────────────────────────────────────────────────────────────── */
.mestral-portal-link > a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: text-bottom;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D6CDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.mestral-portal-link > a:hover {
  background-color: rgba(45, 108, 223, 0.08);
}

/* ────────────────────────────────────────────────────────────────────────────
 * Variables Mestral (per a integracions futures).
 * ──────────────────────────────────────────────────────────────────────────── */
:root {
  --mestral-primary: #2D6CDF;
  --mestral-primary-hover: #1E4FA8;
}