/* Brand art: clinic-themed navy SVG background + floating "glass" preview cards.
   common\assets\BrandArtAsset — backend login layout, public auth pages and landing (after app.css). */

/* generic navy art surface (hero, bands) */
.art-bg { position: relative; isolation: isolate; background: #0B1F4B url("../img/login-bg.svg") center / cover no-repeat; color: #C9D3EE; }
.art-bg h1, .art-bg h2, .art-bg h3 { color: #fff; }
.art-bg a:not(.btn) { color: #fff; }
.art-bg .muted-light { color: #AFC2F5; }
.btn-gold {
  --bs-btn-color: #0B1F4B; --bs-btn-bg: #E0A526; --bs-btn-border-color: #E0A526;
  --bs-btn-hover-color: #0B1F4B; --bs-btn-hover-bg: #F4C45A; --bs-btn-hover-border-color: #F4C45A;
  --bs-btn-active-color: #0B1F4B; --bs-btn-active-bg: #C48F12; --bs-btn-active-border-color: #C48F12;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(224, 165, 38, .45);
  font-weight: 600;
}
.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-bg: rgba(255, 255, 255, .04);
  --bs-btn-hover-color: #0B1F4B; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #0B1F4B; --bs-btn-active-bg: #E6EDFC; --bs-btn-active-border-color: #E6EDFC;
}
.glass-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #E6EDFC; font-size: .85rem; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.glass-pill .ms { font-size: 18px; color: #F4C45A; }
.glass-panel { padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #DBE3FB; }
.glass-panel h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.glass-panel p { margin: 0; font-size: .9rem; color: #AFC2F5; }
.glass-panel .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(110, 143, 240, .28); color: #fff; }
.glass-panel .ico.gold { background: rgba(224, 165, 38, .30); color: #F4C45A; }
.glass-panel .ico .ms { font-size: 24px; }
.ecg-line { display: block; width: 100%; height: 56px; }
.ecg-line path { fill: none; stroke: #E0A526; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.auth-brand {
  background: #0B1F4B url("../img/login-bg.svg") center / cover no-repeat;
  isolation: isolate;
}
.auth-brand::after { /* keep the copy readable over the art */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 31, 75, .55) 0%, rgba(11, 31, 75, .15) 60%, rgba(11, 31, 75, 0) 100%);
}

/* Floating preview cards (decorative, aria-hidden by the parent section) */
.auth-float {
  position: absolute;
  right: 48px;
  top: 104px;
  width: 300px;
  display: grid;
  gap: 14px;
  z-index: 0;
  pointer-events: none;
}
.glass {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #E6EDFC;
  font-size: .86rem;
  line-height: 1.35;
  animation: auth-float 7s ease-in-out infinite;
}
.glass:nth-child(2) { margin-left: 44px; animation-delay: -2.3s; }
.glass:nth-child(3) { margin-left: 12px; animation-delay: -4.6s; }
.glass .ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(110, 143, 240, .28);
  color: #fff;
}
.glass .ico.gold { background: rgba(224, 165, 38, .30); color: #F4C45A; }
.glass .ico.ok { background: rgba(22, 128, 79, .38); color: #9FE3BF; }
.glass .ico .ms { font-size: 22px; }
.glass b { display: block; color: #fff; font-weight: 600; font-size: .95rem; }
.glass small { color: #AFC2F5; font-size: .76rem; }
.glass .num { margin-left: auto; font: 600 1.5rem/1 var(--font-num); color: #fff; font-variant-numeric: tabular-nums; }
.glass .bars { margin-left: auto; display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.glass .bars i { width: 5px; border-radius: 2px; background: #6E8FF0; }
.glass .bars i:last-child { background: var(--accent-500); }

@keyframes auth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Short desktop windows: cards would cover the copy */
@media (max-height: 820px) { .auth-float { display: none; } }
@media (max-width: 1280px) { .auth-float { right: 28px; width: 270px; } }
@media (max-width: 1100px) { .auth-float { display: none; } }

/* Tablet & mobile: brand panel is hidden, so show the art as a header band
   behind the logo and float the form on top of it as a card. */
@media (max-width: 900px) {
  .auth-form {
    position: relative;
    isolation: isolate;
    background: var(--bg);
  }
  .auth-form::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 210px;
    z-index: -1;
    background: #0B1F4B url("../img/login-bg.svg") 70% 62% / cover no-repeat;
    border-radius: 0 0 28px 28px;
  }
  .auth-top .auth-back { color: #E6EDFC; }
  .auth-top .icon-btn { color: #E6EDFC; }
  .auth-wrap {
    margin-top: 28px;
    padding: 24px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 50px -24px rgba(11, 31, 75, .45);
  }
  /* the band is always dark navy → always use the light-on-dark logo above it */
  .auth-wrap .mobile-logo { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); margin: 0; }
  .auth-wrap .mobile-logo .logo-on-light { display: none !important; }
  .auth-wrap .mobile-logo .logo-on-dark { display: block !important; }
  .auth-form { padding-top: 16px; }
  .auth-wrap { margin-top: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .glass { animation: none; }
}