/* =====================================================================
   OneCare UI refresh — auth pages (login, forgot password, reset)
   ---------------------------------------------------------------------
   These pages don't use layouts.app; they load their own CSS set
   (style.css, skin-modes, dark-style, _login.css, page <style>). This file
   is linked last in each <head> (D-008). Values: .docs/design-system.md.
   HIPAA badge and footer content are unchanged (D-014).
   ===================================================================== */

:root {
  --oc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oc-bg: #EEF1F6;
  --oc-surface: #FFFFFF;
  --oc-border-strong: #D6DBE4;
  --oc-text: #0F172A;
  --oc-text-2: #334155;
  --oc-muted: #64748B;
  --oc-faint: #94A3B8;
  --oc-primary: #4061E6;
  --oc-primary-rgb: 64, 97, 230;
  --oc-primary-hover: #3350CC;
  --oc-sidebar: #16223F;
}

/* Page */
body.login-body {
  padding: 24px;
  background-color: var(--oc-bg);
  font-family: var(--oc-font);
  -webkit-font-smoothing: antialiased;
}

/* Two-panel frame: keep the grid, drop the white box around it */
.login-wrap.new-login-wrap {
  width: 100%;
  max-width: 1440px;
  min-height: calc(100vh - 48px);
  padding: 0;
  background: transparent;
}

/* Brand panel (left on screen, .login-right in markup) */
.new-login-wrap .login-right {
  position: relative;
  overflow: hidden;
  padding: 40px 48px;
  border-radius: 20px;
  text-align: left;
  color: #C3CBDA;
  background:
    radial-gradient(640px 420px at 85% 105%, rgba(64, 97, 230, .55), transparent 65%),
    radial-gradient(420px 300px at 110% 20%, rgba(0, 165, 244, .18), transparent 70%),
    linear-gradient(180deg, #121C35 0%, #16223F 55%, #1B2A4E 100%);
}

.new-login-wrap .login-right::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 60%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 60%, #000 20%, transparent 75%);
}

/* New OneCare diamond mark (logo file 06, white) as a watermark */
.new-login-wrap .login-right::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 460px;
  height: 408px;
  pointer-events: none;
  opacity: .06;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3ODMuMTExMTExMTExMTExMzEzIDY5NC42NjY2NjY2NjY2Njc4NzkiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIzNTQuNDkyNTgwMDcwNDk4NjYxIDU2My43MjIyODI2MDE2NTY4NDMgODEuMTc2NDg2NTcyMTk5NzkyIDI0NC43MDUzMjU2MDQ3MDAxOTIgMTk1LjA1ODgzNTAwNDYxODIzMSAxMzAuOTQ0Mzg0MDY1MDE4MzEyIDQyNC4yODE4Njc4ODc5MTIwODUgMTMwLjk0NDM4NDA2NTAxODMxMiA0MjQuMjgxODY3ODg3OTEyMDg1IDE1Mi41MjE3MjAzMzExNjIyMTQgMjAzLjk5MDQwMjQ5MDgzMDA5MyAxNTIuNTIxNzIwMzMxMTYyMjE0IDExMC41NjQzMzI5MzkxMzMyMzcgMjQ1Ljg0NzQwMDAyMTI2MDkxIDM1NC40OTI1ODAwNzA0OTg2NjEgNTMwLjU1OTc1NTA4MDAyNDg0MyA1NjUuNjM4OTUzODg4MTcyMTgyIDI4NC4xMDM2NTA5ODgyMzQyMjIgNTgyLjAyNDE4OTExNjM0MjMxMyAyOTguMTQxNTc0NDk2OTk5OTY1IDM1NC40OTI1ODAwNzA0OTg2NjEgNTYzLjcyMjI4MjYwMTY1Njg0MyIvPgogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI3MDEuOTM0NjI0NTM4OTA5NzAyIDI3Mi44NDM1NTI5NTk0MTg5NTcgNDczLjg2ODk4MTY3NDcxNTU0MiA1MzkuMDQ4Mzk5ODEzODM4ODQyIDQyOC42MDk0NzU4MzA0MTUyNDkgNTkxLjg2Njg4MjE0MTM0NjY1IDM5OC43NjA5MzE2Njg3NjMwNzggNTU3LjAyMzQzOTI5Nzg5MDk0NSA0MTIuOTY3NDM4NTk3NjkyMzA4IDU0MC40Mzk1NDg0MDgyMDMzMzYgNDI4LjYwOTQ3NTgzMDQxNTI0OSA1NTguNjk5MTAwMzYxOTI3Nzc2IDQ1Ny40ODI0MDQ5MzM5NDA0MTYgNTI1LjAxNjczNjY5NzMyMDA4NCA2NzIuNTQ2MTA3NDE1NjgyODU0IDI3My45OTM0NTI4NjYzMzc5NzUgNTIyLjc2NjQ0NjE3ODQ5MzQyNSAxMjQuMzc4NTc0MDk2ODM5NjU3IDI1NS44NzExNjc0OTE5NTIyOTIgMTI0LjM3ODU3NDA5NjgzOTY1NyAyNTUuODcxMTY3NDkxOTUyMjkyIDEwMi43OTk3ODQ1MjUzMjEyMjkgNTMxLjY5Mjk4Mjk5MjM0NDY5NiAxMDIuNzk5Nzg0NTI1MzIxMjI5IDcwMS45MzQ2MjQ1Mzg5MDk3MDIgMjcyLjg0MzU1Mjk1OTQxODk1NyIvPgo8L3N2Zz4=") no-repeat center / contain;
}

.new-login-wrap .login-right > * {
  position: relative;
  z-index: 1;
}

.new-login-wrap .logo-box {
  margin-top: 0;
}

.new-login-wrap .logo-box img {
  display: block;
  max-width: 200px;
  height: auto;
}

/* Stock dashboard screenshot removed (D-014) */
.new-login-wrap .stats-box {
  display: none;
}

/* Rotating headline (slick) */
.login-slider-box {
  justify-content: flex-start;
  margin-top: auto;
}

.login-slider-box .login-slider-wrapper {
  max-width: 480px;
  width: 100%;
}

.new-login-wrap .login-color-box-text {
  max-width: 480px;
  margin: 0;
  text-align: left;
}

.new-login-wrap .login-color-box-text h3 {
  margin: 0 0 12px;
  font-family: var(--oc-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 45%, #9DB2FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.new-login-wrap .login-color-box-text p {
  margin: 0;
  padding: 0;
  font-family: var(--oc-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #9AA6BD;
}

.login-slider-box .slick-dots {
  position: static;
  display: flex !important; /* !important: slick sets display inline */
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  text-align: left;
}

.login-slider-box .slick-dots li,
.login-slider-box .slick-dots li button {
  width: 8px;
  height: 8px;
  margin: 0;
  transition: width .25s ease;
}

.login-slider-box .slick-dots li.slick-active,
.login-slider-box .slick-dots li.slick-active button {
  width: 24px;
}

.login-slider-box .slick-dots li button {
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.login-slider-box .slick-dots li.slick-active button {
  background: #FFFFFF;
}

.login-slider-box .slick-dots li button::before {
  display: none;
}

/* Form side (.login-left) */
.login-wrap .login-left,
.login-wrap .login-left * {
  letter-spacing: normal;
}

.login-wrap .login-left {
  font-family: var(--oc-font);
  padding: 32px 40px;
}

.new-login-wrap .login-left-inner {
  width: 100%;
  max-width: 380px !important; /* !important: _login.css uses it */
  padding-bottom: 60px;
}

/* Decorative icon beside the heading removed (D-014) */
.login-left-inner > .d-flex > img {
  display: none;
}

.login-left-inner > .d-flex.mb-4 {
  margin-bottom: 6px !important; /* !important: Bootstrap .mb-4 */
}

.new-login-wrap .login-left-inner h1 {
  margin: 0 !important; /* !important: markup carries .ml-3 / .mb-0 */
  font-family: var(--oc-font);
  font-size: 28px;
  font-weight: 600 !important; /* !important: markup carries .f-w-700 */
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--oc-text) !important; /* !important: markup carries .text-dark */
}

/* Forgot / reset pages have no subtitle — keep the gap under the heading */
.login-left-inner > .d-flex.mb-4 + form {
  margin-top: 24px;
}

/* D-021 subtitle */
.login-left-inner .oc-login-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--oc-muted);
}

.login-wrap .login-left .login-left-inner .form-group {
  margin-bottom: 18px;
}

.login-wrap .login-left .login-left-inner .form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--oc-text-2);
}

.login-wrap .login-left .login-left-inner .form-group input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--oc-border-strong) !important; /* !important: _login.css uses it */
  border-radius: 10px !important;
  background: var(--oc-surface);
  font-family: var(--oc-font);
  font-size: 14px;
  color: var(--oc-text);
  box-shadow: none;
}

.login-wrap .login-left .login-left-inner .form-group input::placeholder {
  color: var(--oc-faint);
}

.login-wrap .login-left .login-left-inner .form-group input:focus {
  border-color: var(--oc-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--oc-primary-rgb), .16);
  outline: 0;
}

.login-wrap .login-left .login-left-inner .form-group .toggle-password {
  left: auto;
  right: 14px;
  top: auto;
  bottom: 12px;
  color: var(--oc-faint);
  cursor: pointer;
}

.new-login-wrap .forgot-text {
  font-family: var(--oc-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--oc-primary) !important; /* !important: _login.css uses it */
  text-decoration: none;
}

.new-login-wrap .forgot-text:hover {
  color: var(--oc-primary-hover) !important;
  text-decoration: underline;
}

.login-wrap .login-left .login-left-inner .login-btn,
.new-login-wrap .forget-pwd-form-group .btn {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background-color: var(--oc-primary);
  font-family: var(--oc-font);
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background-color .15s ease;
}

.login-wrap .login-left .login-left-inner .login-btn:hover,
.new-login-wrap .forget-pwd-form-group .btn:hover {
  background-color: var(--oc-primary-hover);
}

/* Forgot password: "Back to Login" is the secondary action → neutral outline */
.new-login-wrap .forget-pwd-form-group .btn + .btn,
.new-login-wrap .forget-pwd-form-group .btn-info {
  margin-top: 10px;
  background-color: var(--oc-surface) !important; /* !important: .btn-square / .btn-info use it */
  border: 1px solid var(--oc-border-strong) !important;
  color: var(--oc-text-2) !important;
  box-shadow: none;
}

.new-login-wrap .forget-pwd-form-group .btn + .btn:hover,
.new-login-wrap .forget-pwd-form-group .btn-info:hover {
  border-color: var(--oc-faint) !important;
  color: var(--oc-text) !important;
}

/* HIPAA badge: same image and text, Inter type */
.hippa-logo-new span {
  font-family: var(--oc-font);
  font-size: 10.5px;
  color: var(--oc-text-2);
}

/* Footer (content unchanged) */
.login-bottom-section p {
  margin: 4px 0;
  font-family: var(--oc-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--oc-text-2);
}

.login-bottom-section p + p {
  font-weight: 500;
  color: var(--oc-muted);
}

.login-bottom-section a {
  color: inherit;
}

/* Responsive (D-010): the theme hides the brand panel ≤991px; keep a short
   one with just the logo so small screens still carry the brand. */
@media (max-width: 991.98px) {
  body.login-body {
    padding: 16px;
    background-color: var(--oc-bg);
  }

  .login-wrap.new-login-wrap {
    max-width: 100%;
    min-height: 0;
  }

  .new-login-wrap .login-right {
    display: block !important; /* !important: _login.css hides it */
    padding: 24px 28px;
    min-height: 0;
  }

  .new-login-wrap .login-right::after {
    width: 200px;
    height: 178px;
    right: -20px;
    bottom: -40px;
  }

  .new-login-wrap .login-slider-box {
    display: none;
  }

  .login-wrap .login-left {
    flex-direction: column;
    align-items: stretch;
    padding: 76px 4px 24px;
  }

  .new-login-wrap .login-left-inner {
    max-width: 100% !important;
    padding-bottom: 0;
  }

  .hippa-logo-new {
    right: 4px;
    top: 12px;
  }

  .login-bottom-section {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 575.98px) {
  .new-login-wrap .logo-box img {
    max-width: 160px;
  }
}