/*
 * Tanvorik Mail branding overrides for the Elastic-derived child skin.
 * Loaded after Elastic's own compiled stylesheet (see templates/includes/
 * layout.html), so these rules only need to touch what should visibly
 * differ from stock Elastic - everything else is inherited untouched.
 *
 * Starter palette - swap the hex values below to restyle the whole skin.
 */

:root {
  --tanvorik-primary: #3452E1;
  --tanvorik-primary-dark: #2A3FB8;
  --tanvorik-primary-dark-mode: #4C6BFF;
}

/* Login/header logo: Elastic's own dark-mode handling is just opacity:.8
   on #logo (see skins/elastic/styles/dark.less). We swap in a dedicated
   dark-mode asset instead, which needs modern "content: url()" support -
   universal in current Chrome/Firefox/Safari/Edge. */
#logo { opacity: 1; }
html.dark-mode #logo { content: url(../images/logo-mark-dark-v1.svg); opacity: 1; }
html.dark-mode body.task-login #logo { content: url(../images/logo-login-dark-v1.svg); }

/* Primary buttons (includes the login submit button) */
.btn-primary {
  background: var(--tanvorik-primary);
  border-color: var(--tanvorik-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--tanvorik-primary-dark);
  border-color: var(--tanvorik-primary-dark);
  box-shadow: 0 0 0 .2rem rgba(52, 82, 225, .35);
}
.btn-primary:disabled {
  background: var(--tanvorik-primary);
  border-color: var(--tanvorik-primary);
}
html.dark-mode .btn-primary {
  background: var(--tanvorik-primary-dark-mode);
  border-color: var(--tanvorik-primary-dark-mode);
}

/* Task menu selected-task accent (left icon rail) */
#taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
  color: var(--tanvorik-primary);
}
html.dark-mode #taskmenu a.selected {
  color: var(--tanvorik-primary-dark-mode);
}

/* Selected message/folder row highlight */
.listing li.selected,
.listing tr.selected td {
  background-color: var(--tanvorik-primary);
}
html.dark-mode .listing li.selected {
  background-color: var(--tanvorik-primary-dark-mode);
}

/* Links */
a { color: var(--tanvorik-primary); }
a:hover { color: var(--tanvorik-primary-dark); }
html.dark-mode a { color: var(--tanvorik-primary-dark-mode); }

/* ---------------------------------------------------------------------------
   Login notice panel (#tanvorik-login-notice)

   Lives inside #login-footer, so Elastic's own rule
   "#login-footer > div { margin-top:1rem; padding:1rem; background:#f1f3f4;
   border-radius:.3rem }" already gives it the native panel look - only the
   typography and the dark-mode background need adding here.

   To change the wording, edit templates/login.html (text only, no CSS or PHP
   change needed).
   --------------------------------------------------------------------------- */

#tanvorik-login-notice {
  /* .task-login #layout-content sets text-align:center, which would centre
     every line of a multi-line paragraph. */
  text-align: left;
  font-size: .8125rem;
  line-height: 1.55;
}

#tanvorik-login-notice strong {
  display: block;
  margin-bottom: .5rem;
  font-size: .875rem;
  color: var(--tanvorik-primary);
}

#tanvorik-login-notice p {
  margin: 0 0 .625rem;
}

#tanvorik-login-notice p:last-child {
  margin-bottom: 0;
}

/* Elastic only recolours #login-footer TEXT in dark mode and leaves the panel
   background at its light #f1f3f4, which would glare on the dark page.
   #374549 is Elastic's own raised-surface dark colour. */
html.dark-mode #login-footer > #tanvorik-login-notice {
  background: #374549;
  color: #c5d1d3;
}

html.dark-mode #tanvorik-login-notice strong {
  color: var(--tanvorik-primary-dark-mode);
}