/* The web pages of Kronstadt ERP: the sign-in page and its siblings (forgot password, reset).
   The brand takes the left part as a paper panel with the lockup; the form keeps Frappe's own
   layout on the right. Newsreader sets the one display line of the page. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/kronstadt_erp/fonts/newsreader.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/kronstadt_erp/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

html:root {
  --kerp-paper: rgb(246 242 233);
  --kerp-ink: rgb(34 31 24);
  --kerp-soft-ink: rgb(107 99 80);
  --kerp-forest: rgb(44 85 64);
  --kerp-forest-deep: rgb(30 59 44);
  --kerp-forest-active: rgb(23 48 35);
  --kerp-hairline: rgb(217 210 194);
  --kerp-tick: rgb(181 171 149);
  --kerp-glow: rgb(255 253 248);
  --kerp-button-fg: rgb(255 255 255);
  --kerp-panel-logo: url("/assets/kronstadt_erp/images/kronstadt-erp-logo.svg");
}

html[data-theme="dark"] {
  --kerp-paper: rgb(35 32 26);
  --kerp-ink: rgb(246 242 233);
  --kerp-soft-ink: rgb(181 171 149);
  --kerp-forest: rgb(156 202 176);
  --kerp-forest-deep: rgb(178 215 194);
  --kerp-forest-active: rgb(134 189 158);
  --kerp-hairline: rgb(62 56 46);
  --kerp-tick: rgb(107 99 80);
  --kerp-glow: rgb(58 52 40);
  --kerp-button-fg: rgb(34 31 24);
  --kerp-form-ground: rgb(26 24 20);
  --kerp-field-border: rgb(74 68 58);
  --kerp-panel-logo: url("/assets/kronstadt_erp/images/kronstadt-erp-logo-dark.svg");
  color-scheme: dark;
}

.es-button[data-variant="solid"] {
  --bt-solid-bg: var(--kerp-forest);
  --bt-solid-bg-hover: var(--kerp-forest-deep);
  --bt-solid-bg-active: var(--kerp-forest-active);
  --bt-solid-fg: var(--kerp-button-fg);
  --bt-focus: 2px solid var(--kerp-forest);
}

body[data-path="login"] {
  background: var(--surface-base, rgb(255 255 255));
}

body[data-path="login"] .page-content-wrapper {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  min-height: 100vh;
  padding: 0;
}

/* an empty breadcrumbs block sits between the panel and the form and would take a grid cell */
body[data-path="login"] .page-breadcrumbs {
  display: none;
}

body[data-path="login"] .page-content-wrapper::before {
  content: "";
  display: block;
  background: var(--kerp-paper) var(--kerp-panel-logo) no-repeat;
  background-position: 48px 44px;
  background-size: min(264px, calc(100% - 96px)) auto;
  border-right: 1px solid var(--kerp-hairline);
}

body[data-path="login"] .page-content-wrapper:has(> .kerp-panel)::before {
  content: none;
}

body[data-path="login"] .kerp-panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
  padding: 44px 48px 28px;
  overflow: hidden;
  container-type: inline-size;
  background: var(--kerp-paper);
  border-right: 1px solid var(--kerp-hairline);
  color: var(--kerp-ink);
}

body[data-path="login"] .kerp-panel-logo {
  width: min(264px, 100%);
  aspect-ratio: 162.46 / 24;
  background: var(--kerp-panel-logo) no-repeat left center / contain;
}

body[data-path="login"] .kerp-panel-text {
  margin: 0;
  max-width: 24em;
  text-wrap: balance;
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
  color: var(--kerp-ink);
}

body[data-path="login"] .kerp-panel-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kerp-hairline);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kerp-soft-ink);
}

body[data-path="login"] .page-content-wrapper > main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 48px 24px;
}

body[data-path="login"] .page-content-wrapper > main > .page_content {
  width: 100%;
}

body[data-path="login"] .page-card {
  max-width: 400px;
  padding: 0;
  margin: 0 auto;
  background: transparent;
}

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

body[data-path="login"] .page-card-head h4 {
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--kerp-ink);
}

body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"] {
  height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}

body[data-path="login"] .page-card .page-card-body input:focus {
  border-color: var(--kerp-forest);
  outline: 2px solid var(--kerp-forest);
  outline-offset: 1px;
  box-shadow: none;
}

body[data-path="login"] .page-card .page-card-body .password-field input {
  padding-right: 40px;
}

body[data-path="login"] .page-card .page-card-body .toggle-password:focus-visible {
  outline: 2px solid var(--kerp-forest);
  outline-offset: 2px;
  border-radius: 4px;
}

body[data-path="login"] .page-card-actions .es-button {
  height: 36px;
  font-size: 14px;
  font-weight: 500;
}

html[data-theme="dark"] body[data-path="login"] {
  --surface-base: var(--kerp-form-ground);
  --text-color: var(--kerp-ink);
  --ink-gray-9: var(--kerp-ink);
  --ink-gray-8: var(--kerp-ink);
  --ink-gray-7: var(--kerp-soft-ink);
  --ink-gray-6: var(--kerp-soft-ink);
  --ink-gray-5: var(--kerp-soft-ink);
  --ink-gray-4: var(--kerp-soft-ink);
  --outline-gray-2: var(--kerp-field-border);
  --outline-gray-3: var(--kerp-field-border);
}

html[data-theme="dark"] body[data-path="login"] .page-card .page-card-body input {
  background-color: var(--kerp-paper);
}

html[data-theme="dark"] body[data-path="login"] .page-card a {
  color: var(--kerp-forest);
}

@media (max-width: 767px) {
  body[data-path="login"] .page-content-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  body[data-path="login"] .page-content-wrapper::before {
    height: 96px;
    background-position: 24px center;
    background-size: 176px auto;
    border-right: 0;
    border-bottom: 1px solid var(--kerp-hairline);
  }

  body[data-path="login"] .kerp-panel {
    display: flex;
    align-items: center;
    height: 96px;
    padding: 0 24px;
    border-right: 0;
    border-bottom: 1px solid var(--kerp-hairline);
  }

  body[data-path="login"] .kerp-panel-logo {
    width: 176px;
  }

  body[data-path="login"] .kerp-panel-text,
  body[data-path="login"] .kerp-dial,
  body[data-path="login"] .kerp-panel-foot {
    display: none;
  }

  body[data-path="login"] .page-content-wrapper > main {
    justify-content: flex-start;
    padding: 32px 20px 40px;
  }

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