/* SIPEKA login page: split layout (brand panel + form), Kalisha palette.
   Only applies when body has .sk-login (set by sipeka_login.js on /login), so other web pages are untouched. */

body.sk-login { background: var(--k-bg) !important; }
body.sk-login .navbar, body.sk-login .web-footer, body.sk-login .page-breadcrumbs,
body.sk-login .page-header-wrapper, body.sk-login .login-divider, body.sk-login .login-with-email-link,
body.sk-login .social-logins { display: none !important; }

body.sk-login #page-login { min-height: 100vh; display: flex; }
body.sk-login .page-content-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
body.sk-login main.container { max-width: 420px !important; width: 100%; margin: 0 !important; padding: 0 !important; }

/* ---------------- brand panel (left) ---------------- */
.sk-login-brand { display: none; }
@media (min-width: 992px) {
  .sk-login-brand {
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden; flex: 0 0 52%; min-height: 100vh; padding: 48px 56px; color: #fff;
    background:
      radial-gradient(520px 420px at 85% 10%, rgba(201, 161, 225, .45), transparent 60%),
      radial-gradient(620px 520px at 0% 100%, rgba(171, 150, 190, .35), transparent 60%),
      linear-gradient(150deg, #3F2D54 0%, #5F4379 45%, #7B599B 100%);
  }
  .sk-login-brand::after {           /* soft ring decoration */
    content: ""; position: absolute; right: -140px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%;
    border: 60px solid rgba(255, 255, 255, .06); pointer-events: none;
  }
}
.sk-brand-top { display: flex; align-items: center; gap: 12px; }
.sk-brand-top img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.sk-brand-top span { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: .14em; font-size: 12px; opacity: .85; }
.sk-brand-mid h1 {
  font-family: 'Montserrat', sans-serif !important; color: #fff !important; font-weight: 700; font-size: 40px; line-height: 1.15;
  letter-spacing: -.01em; margin: 0 0 12px;
}
.sk-brand-mid p.sk-lead { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 440px; margin: 0 0 32px; }
.sk-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 440px; }
.sk-feats li { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: rgba(255, 255, 255, .92); }
.sk-feats .sk-ic {
  flex: 0 0 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(4px);
}
.sk-feats .sk-ic svg { width: 18px; height: 18px; stroke: #fff; }
.sk-brand-foot { font-size: 11.5px; color: rgba(255, 255, 255, .6); position: relative; z-index: 1; }

/* ---------------- form side ---------------- */
body.sk-login .for-login, body.sk-login .for-forgot, body.sk-login .for-signup,
body.sk-login .for-email-login, body.sk-login .for-login-with-email-link { background: transparent !important; }
body.sk-login .page-card-head { text-align: left !important; padding: 0 !important; margin-bottom: 22px; }
body.sk-login .page-card-head .app-logo { height: 44px !important; margin: 0 0 22px !important; display: block; }
@media (min-width: 992px) { body.sk-login .page-card-head .app-logo { display: none; } }
body.sk-login .page-card-head h4 {
  font-family: 'Montserrat', sans-serif !important; font-size: 24px !important; font-weight: 700; color: var(--k-text) !important;
  margin: 0 0 6px !important; letter-spacing: -.01em;
}
body.sk-login .sk-sub { font-size: 13.5px; color: var(--k-text-2); margin: 0; }

body.sk-login .login-content.page-card, body.sk-login .page-card {
  border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; max-width: none !important;
}
body.sk-login .page-card-body { padding: 0 !important; }
/* Frappe gives the inner form a fixed width + auto margins: make it fill the column */
body.sk-login .form-signin, body.sk-login .login-content, body.sk-login .page-card-actions,
body.sk-login section[class^="for-"] {
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
body.sk-login .form-group { margin-bottom: 16px; }
body.sk-login .sk-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--k-text-2); margin-bottom: 6px; }

body.sk-login .form-control {
  height: 46px !important; font-size: 14px !important; padding: 10px 14px 10px 42px !important;
  border-radius: 12px !important; border: 1.5px solid var(--k-border-strong) !important; background: var(--k-card) !important;
  transition: border-color .15s, box-shadow .15s;
}
body.sk-login .form-control:focus { border-color: var(--k-purple) !important; box-shadow: 0 0 0 4px rgba(123, 89, 155, .14) !important; }
body.sk-login .form-control::placeholder { color: var(--k-text-3); }
body.sk-login .email-field, body.sk-login .password-field { position: relative !important; display: block !important; height: 46px; }
body.sk-login .email-field svg, body.sk-login .password-field svg {
  position: absolute !important; left: 14px !important; top: 23px !important; margin: 0 !important;
  transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; opacity: .55;
}
body.sk-login .password-field .form-control { padding-right: 96px !important; }
body.sk-login .toggle-password {
  position: absolute !important; right: 14px !important; top: 23px !important; margin: 0 !important;
  transform: translateY(-50%) !important; font-size: 12.5px !important; font-weight: 600;
  color: var(--k-purple) !important; cursor: pointer; user-select: none; line-height: 1;
}
body.sk-login .forgot-password-message { text-align: right; margin: 8px 0 22px !important; }
body.sk-login .forgot-password-message a { font-size: 13px !important; font-weight: 600; color: var(--k-purple) !important; }

body.sk-login .btn-login, body.sk-login .btn-forgot, body.sk-login .page-card .btn-primary {
  height: 48px; font-size: 14.5px !important; font-weight: 700 !important; border-radius: 12px !important; letter-spacing: .01em;
  background: linear-gradient(135deg, #7B599B 0%, #5F4379 100%) !important; border: 0 !important; color: #fff !important;
  box-shadow: 0 8px 20px rgba(95, 67, 121, .28) !important; transition: transform .12s, box-shadow .12s, filter .12s;
}
body.sk-login .btn-login:hover, body.sk-login .btn-forgot:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(95, 67, 121, .34) !important; }
body.sk-login .btn-login:active { transform: translateY(0); }
body.sk-login .sign-up-message { margin-top: 18px !important; font-size: 12.5px; }
body.sk-login .sk-help { margin-top: 28px; font-size: 12px; color: var(--k-text-3); text-align: center; line-height: 1.6; }

/* mobile: compact brand strip on top of the form */
@media (max-width: 991.98px) {
  body.sk-login .page-content-wrapper { align-items: flex-start; padding-top: 48px; }
  body.sk-login .page-card-head h4 { font-size: 21px !important; }
}

/* dark mode */
:root[data-theme="dark"] body.sk-login .btn-login, :root[data-theme="dark"] body.sk-login .btn-forgot { color: #fff !important; }
:root[data-theme="dark"] body.sk-login .email-field > svg, :root[data-theme="dark"] body.sk-login .password-field > svg { filter: invert(1); }