/* NETIX identity over Frappe v16 Espresso tokens. Desk and website pages both load this file. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2"); }

:root,
[data-theme="light"] {
  --netix-primary: #196796;
  --netix-primary-hover: #155a83;
  --netix-primary-active: #124b6d;
  --netix-primary-subtle: #e8f1f7;
  --netix-primary-subtle-ink: #124b6d;
  --netix-accent: #30bce4;
  --netix-ring: rgba(25, 103, 150, 0.32);
}

[data-theme="dark"] {
  --netix-primary: #2f8abd;
  --netix-primary-hover: #3a97ca;
  --netix-primary-active: #237cab;
  --netix-primary-subtle: #173447;
  --netix-primary-subtle-ink: #b9dcf0;
  --netix-ring: rgba(80, 160, 205, 0.45);
}

/* html:root outranks the :root font stack that login.bundle.css loads after this file. */
html:root {
  --font-stack: "Archivo", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root,
[data-theme="light"],
[data-theme="dark"] {
  --btn-primary: var(--netix-primary);
  --primary: var(--netix-primary);
  --primary-color: var(--netix-primary);
  --brand-color: var(--netix-primary);
  --checkbox-color: var(--netix-primary);
  --date-active-bg: var(--netix-primary);
  --date-active-text: #fff;
  --progress-bar-bg: var(--netix-primary);
  --ink-blue-link: var(--netix-primary);
  --focus-default: 0 0 0 2px var(--netix-ring);
  --focus-outline-default: 2px solid var(--netix-ring);
}

body {
  font-family: var(--font-stack);
}

.btn.btn-primary,
.btn.btn-primary:focus {
  background-color: var(--netix-primary);
  color: #fff;
}

.btn.btn-primary:hover {
  background-color: var(--netix-primary-hover);
  color: #fff;
}

.btn.btn-primary:active {
  background-color: var(--netix-primary-active) !important;
  color: #fff !important;
}

.es-button:not([data-theme="red"]) {
  --bt-solid-bg: var(--netix-primary);
  --bt-solid-bg-hover: var(--netix-primary-hover);
  --bt-solid-bg-active: var(--netix-primary-active);
  --bt-solid-fg: #fff;
}

input[type="checkbox"]:checked {
  background-color: var(--netix-primary);
  border-color: var(--netix-primary);
}

.form-control:focus,
.es-button:focus-visible {
  box-shadow: 0 0 0 2px var(--netix-ring);
}

::selection {
  background: var(--netix-primary-subtle);
  color: var(--netix-primary-subtle-ink);
}

/* Sign-in: brand panel on wide screens, NETIX logo above the form everywhere. */

body[data-path="login"] .page-card-head img.app-logo,
body[data-path="update-password"] .page-card-head img.app-logo {
  content: url("/assets/netix_brand/images/netix-logo.svg");
  width: auto;
  height: 32px;
  border-radius: 0;
}

[data-theme="dark"] body[data-path="login"] .page-card-head img.app-logo,
[data-theme="dark"] body[data-path="update-password"] .page-card-head img.app-logo {
  content: url("/assets/netix_brand/images/netix-logo-white.svg");
}

@media (min-width: 992px) {
  body[data-path="login"]::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: 44vw;
    background:
      url("/assets/netix_brand/images/netix-mark-watermark.svg") right -9vw bottom -14vh / min(38vw, calc(92vh - 104px)) auto no-repeat,
      url("/assets/netix_brand/images/netix-logo-white.svg") 56px 48px / 156px auto no-repeat,
      linear-gradient(155deg, #1d74a8 0%, #196796 45%, #0f3f5c 100%);
  }

  body[data-path="login"]::after {
    content: "Operations, finance, people and AI in one place.";
    position: fixed;
    left: 56px;
    bottom: 56px;
    width: calc(44vw - 112px);
    color: rgba(255, 255, 255, 0.92);
    font: 600 28px/1.25 var(--font-stack);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  body[data-path="login"] #page-login {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin-left: 44vw;
    padding: 6vh 0 12vh;
  }

  /* Core's 60px top padding and min-heights pin the card near the top; let flex centre it. */
  body[data-path="login"] #page-login .page-content-wrapper {
    width: 100%;
    min-height: 0;
    padding-top: 0;
  }

  body[data-path="login"] #page-login .page_content {
    min-height: 0;
  }

  body[data-path="login"] #page-login main.container {
    max-width: none;
  }

  body[data-path="login"] .page-card-head img.app-logo {
    display: none;
  }
}