/* Mailflew look for the Keycloak account console (PatternFly 5): the portal's colours, type and logo. */

@font-face {
  font-family: "Mailflew Wordmark";
  src: url("../fonts/mailflew-wordmark.woff2") format("woff2");
  font-display: block;
}

:root {
  --mf-ink: #0f1228;
  --mf-muted: #6b7290;
  --mf-line: #e6e8f3;
  --mf-bg: #f4f5fb;
  --mf-brand: #5b5ef0;
  --mf-brand-ink: #3b3fd4;
  --mf-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
  --pf-v5-global--FontFamily--text: Inter, "SF Pro Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
  --pf-v5-global--primary-color--100: var(--mf-brand);
  --pf-v5-global--primary-color--200: var(--mf-brand-ink);
  --pf-v5-global--link--Color: var(--mf-brand);
  --pf-v5-global--link--Color--hover: var(--mf-brand-ink);
  --pf-v5-global--active-color--100: var(--mf-brand);
  --pf-v5-global--BorderRadius--sm: 10px;
  --pf-v5-global--BorderColor--100: var(--mf-line);
}

body {
  background: var(--mf-bg);
  color: var(--mf-ink);
  -webkit-font-smoothing: antialiased;
}

/* ───── header: Mailo and the "mailflew" wordmark on a light bar, as in the portal ───── */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: rgb(255 255 255 / 92%);
  --pf-v5-c-masthead--item-border-color--base: transparent;
  --pf-v5-global--Color--100: var(--mf-ink);
  --pf-v5-global--Color--200: var(--mf-muted);
  color: var(--mf-ink);
  border-bottom: 1px solid var(--mf-line);
  box-shadow: 0 6px 24px -18px rgb(30 20 90 / 35%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.pf-v5-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pf-v5-c-masthead__brand img {
  width: 44px;
  height: 44px;
  max-height: none;
  filter: drop-shadow(0 3px 6px rgb(120 80 200 / 22%));
}

.pf-v5-c-masthead__brand::after {
  content: "mailflew";
  color: var(--mf-ink);
  font-family: "Mailflew Wordmark", "Segoe Script", cursive;
  font-size: 1.55rem;
  line-height: 1.2;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: var(--mf-ink);
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: #eef0fb;
  --pf-v5-c-menu-toggle--expanded--BackgroundColor: #eef0fb;
  color: var(--mf-ink);
  border-radius: 12px;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border: 0;
}

/* ───── navigation ───── */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #fff;
  border-right: 1px solid var(--mf-line);
  box-shadow: none;
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: #2b3050;
  --pf-v5-c-nav__link--hover--Color: var(--mf-brand-ink);
  --pf-v5-c-nav__link--m-current--Color: var(--mf-brand-ink);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: #f1f2fd;
  --pf-v5-c-nav__link--m-current--BackgroundColor: #eceefe;
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: var(--mf-brand);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mf-brand);
  --pf-v5-c-nav--c-divider--BackgroundColor: var(--mf-line);
  --pf-v5-c-nav__section--section--BorderTopColor: var(--mf-line);
}

.pf-v5-c-nav__link {
  margin: 2px 10px;
  border-radius: 12px;
  font-weight: 550;
}

.pf-v5-c-nav__link::after {
  border-radius: 12px;
}

.pf-v5-c-nav__link.pf-m-current {
  font-weight: 700;
}

/* ───── content ───── */
.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--mf-bg);
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
  --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
}

.pf-v5-c-page__main {
  background:
    radial-gradient(40rem 22rem at 100% 0%, rgb(99 102 241 / 10%), transparent 70%),
    var(--mf-bg);
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
  color: var(--mf-ink);
  letter-spacing: -0.02em;
}

.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.pf-v5-c-page__main-section > .pf-v5-l-stack,
.pf-v5-c-page__main-section .pf-v5-c-data-list,
.pf-v5-c-page__main-section .pf-v5-c-form:not(.pf-m-horizontal .pf-v5-c-form),
.pf-v5-c-card {
  border-radius: 16px;
}

.pf-v5-c-data-list {
  --pf-v5-c-data-list--BorderTopColor: transparent;
  --pf-v5-c-data-list__item--BorderBottomColor: var(--mf-line);
  overflow: hidden;
  border: 1px solid var(--mf-line);
  background: #fff;
  box-shadow: 0 10px 30px -24px rgb(30 20 90 / 40%);
}

.pf-v5-c-card {
  border: 1px solid var(--mf-line);
  box-shadow: 0 10px 30px -24px rgb(30 20 90 / 40%);
}

/* ───── controls ───── */
.pf-v5-c-button {
  border-radius: 12px;
  font-weight: 650;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: transparent;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: transparent;
  background: var(--mf-grad);
  box-shadow: 0 10px 22px -12px rgb(109 40 217 / 70%), inset 0 1px 0 rgb(255 255 255 / 25%);
}

.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.07);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--mf-brand-ink);
  --pf-v5-c-button--m-secondary--BackgroundColor: #f4f5ff;
  --pf-v5-c-button--after--BorderColor: var(--mf-line);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: 12px;
  --pf-v5-c-form-control--before--BorderColor: var(--mf-line);
  --pf-v5-c-form-control--after--BorderColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderColor: var(--mf-brand);
  border-radius: 12px;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: 12px;
}

.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 4px rgb(99 102 241 / 16%);
}

/* PatternFly draws inputs and menu toggles with a dark underline; use the portal's soft outline instead. */
.pf-v5-c-form-control::before {
  border: 1px solid var(--mf-line) !important;
}

.pf-v5-c-form-control::after,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
  border: 0 !important;
}

.pf-v5-c-form-control:focus-within::before {
  border-color: var(--mf-brand) !important;
}

.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control.pf-m-disabled {
  background: #f1f2f8;
}

.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link.pf-m-current:hover::after {
  border-color: var(--mf-brand) !important;
}

.pf-v5-c-page__sidebar .pf-v5-c-divider {
  --pf-v5-c-divider--after--BackgroundColor: var(--mf-line);
  --pf-v5-c-divider--BackgroundColor: var(--mf-line);
}