/* ============================================================
   Nutara — staff sign-in
   Skins Frappe's own /login page. Scoped to [data-path="login"] so the marketing
   site, which has its own stylesheet, is never touched by any of this.
   ============================================================ */

body[data-path="login"],
body[data-path="update-password"] {
  --nut-forest: #1b3a2c;
  --nut-forest-2: #0f241b;
  --nut-gold: #c9a23f;
  --nut-cream: #f3efe4;

  background: linear-gradient(150deg, var(--nut-forest) 0%, var(--nut-forest-2) 100%) !important;
  background-attachment: fixed;      /* short pages left a pale strip below the fold */
  min-height: 100vh;
}

/* The gradient is painted on body, so html shows through under a short page. The colour
   is written out literally here on purpose: --nut-forest-2 is declared on body, and custom
   properties only inherit downward, so html cannot see it. */
html:has(body[data-path="login"]),
html:has(body[data-path="update-password"]) {
  background: #0f241b;
  min-height: 100%;
}

/* a soft brand glow, kept behind everything and click-through */
body[data-path="login"]::before,
body[data-path="update-password"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60ch 40ch at 82% 12%, rgba(201, 162, 63, .16), transparent 70%),
    radial-gradient(50ch 34ch at 12% 88%, rgba(201, 162, 63, .10), transparent 70%);
  pointer-events: none;          /* a decorative overlay must never eat clicks */
  z-index: 0;
}

body[data-path="login"] .page-content-wrapper,
body[data-path="update-password"] .page-content-wrapper {
  position: relative;
  z-index: 1;
}

/* Frappe's own chrome has no place on a sign-in screen */
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
  display: none !important;
}

/* ---------- the card ---------- */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(201, 162, 63, .35) !important;
  border-radius: 14px !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .40) !important;
  padding: 30px 30px 26px !important;
  max-width: 400px;
  margin: 0 auto;
}

body[data-path="login"] .page-card-head {
  border-bottom: none !important;
  text-align: center;
  padding-bottom: 4px !important;
}

body[data-path="login"] .page-card-head .app-logo,
body[data-path="update-password"] .page-card-head .app-logo {
  height: 52px !important;
  background: #fff;
  padding: 7px 11px;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .30);
  width: auto !important;
  margin: 0 auto 16px !important;
  display: block !important;
}

/* Frappe renders .page-card-head as a SIBLING of .page-card, not inside it - so this
   block sits on the dark background, not on the white card. Colour it accordingly;
   forest-on-forest was invisible. */
body[data-path="login"] .page-card-head h4 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--nut-cream) !important;
  letter-spacing: -.2px;
  margin-bottom: 2px !important;
}

body[data-path="login"] .page-card-head::after {
  content: "Back-office sign in";
  display: block;
  margin: 2px 0 16px;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--nut-gold);
  font-weight: 600;
}

/* ---------- fields ---------- */
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
  border: 1px solid #d8dedb !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  height: auto !important;
  font-size: 13.5px !important;
}
body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
  border-color: var(--nut-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 63, .18) !important;
}
body[data-path="login"] label,
body[data-path="update-password"] label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #46524c !important;
  letter-spacing: .2px;
}

/* ---------- buttons ---------- */
body[data-path="login"] .btn-primary,
body[data-path="update-password"] .btn-primary {
  background: var(--nut-forest) !important;
  border-color: var(--nut-forest) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-weight: 650 !important;
  letter-spacing: .2px;
}
body[data-path="login"] .btn-primary:hover,
body[data-path="update-password"] .btn-primary:hover {
  background: #16301f !important;
  border-color: #16301f !important;
}
body[data-path="login"] .btn-default {
  border-radius: 8px !important;
  border-color: #d8dedb !important;
  font-weight: 600 !important;
}
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] a {
  color: #1b3a2c;
}
body[data-path="login"] a:hover { color: var(--nut-gold); }

/* a way back to the public site, which the stock page does not offer */
body[data-path="login"] .page-card::after {
  content: "";
  display: block;
  margin-top: 18px;
  border-top: 1px solid #e6ebe8;
}

@media (max-width: 480px) {
  body[data-path="login"] .page-card,
  body[data-path="update-password"] .page-card {
    padding: 22px 18px 20px !important;
    margin: 0 12px;
  }
}