/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * Consider organizing styles into separate files for maintainability.
 */

html {
  font-size: 80%;
}
/* Authentication screens: CSS-only visual treatment, with no image assets. */
.auth-page { min-height: 100vh; overflow: hidden; background: #fff; color: #172b4d; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.auth-layout { box-sizing: border-box; display: grid; height: 100vh; padding: 24px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 12%, #fff 0, #f5faff 36%, #eaf5ff 100%); }
.auth-shell { position: relative; box-sizing: border-box; display: flex; width: min(100%, 620px); height: calc(100vh - 48px); flex-direction: column; padding: clamp(36px, 6vh, 68px) clamp(28px, 10vw, 108px) 28px; border: 1px solid #dce8f5; border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,250,255,.88)); box-shadow: 0 10px 34px rgba(40, 92, 156, .08); }
.auth-brand { display: flex; align-items: center; gap: 14px; justify-content: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
a.auth-brand:hover { transform: scale(1.02) translateY(-2px); opacity: 0.9; cursor: pointer; }
a.auth-brand:active { transform: scale(0.98) translateY(0); }
.auth-brand strong { display: block; color: #1766d4; font-size: clamp(25px, 4vw, 32px); letter-spacing: -1.5px; line-height: 1; }
.auth-brand strong span { color: #2878e4; }
.auth-brand small { display: block; margin-top: 8px; color: #344766; font-size: 13px; font-weight: 500; }
.brand-mark { position: relative; display: grid; width: 56px; height: 56px; place-items: center; border: 2px solid #1d6dde; border-radius: 17px; transform: rotate(30deg); }
.brand-mark i, .brand-mark i::after { display: block; background: #1766d4; content: ""; }
.brand-mark i { width: 31px; height: 11px; transform: rotate(-30deg); }
.brand-mark i::after { width: 11px; height: 31px; margin: -10px auto; }
.auth-heading { margin: 58px 0 38px; text-align: center; }
.auth-heading h1 { margin: 0; color: #172b4d; font-size: clamp(27px, 4vw, 33px); font-weight: 750; letter-spacing: -1.2px; }
.auth-heading p { margin: 12px 0 0; color: #526784; font-size: 16px; line-height: 1.5; }
.auth-card { padding: 38px 31px; border: 1px solid #dce3ed; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 9px 24px rgba(32, 69, 112, .12); }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; margin-bottom: 6px; color: #172b4d; font-size: 14px; font-weight: 700; }
.auth-field input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 1px solid #ccd8e7; border-radius: 8px; outline: 0; color: #172b4d; font: inherit; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.auth-field input:focus { border-color: #2a76df; box-shadow: 0 0 0 3px rgba(42,118,223,.12); }
.auth-field input::placeholder { color: #74839b; }
.auth-field--error input { border-color: #dc2626; }
.auth-field--error input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.field-error { display: none; margin: 6px 0 0; color: #b91c1c; font-size: 12px; font-weight: 600; line-height: 1.35; }
.field-error:not(:empty) { display: block; padding: 7px 10px; border: 1px solid #fecaca; border-radius: 6px; background: #fef2f2; }
.auth-options { display: flex; justify-content: flex-end; margin: 0 0 20px; color: #536784; font-size: 14px; }
.auth-options a, .auth-contact a, .auth-help a, .back-to-login { color: #1165d8; font-weight: 650; text-decoration: none; }
.auth-options a:hover, .auth-contact a:hover, .auth-help a:hover, .back-to-login:hover { text-decoration: underline; }
.auth-submit { width: 100%; height: 54px; border: 0; border-radius: 7px; background: #1766d4; box-shadow: 0 4px 8px rgba(23,102,212,.22); color: #fff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; transition: background .2s, transform .2s; }
.auth-submit:hover { background: #0e58bf; transform: translateY(-1px); }
.auth-contact { margin: 30px 0 0; text-align: center; color: #536784; font-size: 14px; }
.auth-copyright { margin: auto 0 0; padding-top: 36px; text-align: center; color: #60738e; font-size: 13px; }
.back-to-login { display: inline-flex; align-items: center; gap: 10px; margin-top: 58px; font-size: 14px; }
.back-to-login span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d4dfec; border-radius: 50%; background: #fff; font-size: 21px; line-height: 1; }
.auth-card--reset { margin-top: 28px; padding: 38px 46px 46px; }
.reset-lock { position: relative; width: 38px; height: 31px; box-sizing: border-box; margin: 0 auto 28px; border: 3px solid #1766d4; border-radius: 5px; background: #fff; }
.reset-lock::before { position: absolute; left: 7px; top: -19px; width: 18px; height: 19px; border: 3px solid #1766d4; border-bottom: 0; border-radius: 12px 12px 0 0; content: ""; }
.reset-lock::after { position: absolute; left: 15px; top: 9px; width: 5px; height: 10px; border-radius: 5px; background: #1766d4; content: ""; }
.auth-heading--card { margin: 0 0 34px; }
.auth-heading--card h1 { font-size: 27px; }
.auth-heading--card p { max-width: 410px; margin-right: auto; margin-left: auto; font-size: 14px; }
.auth-help { margin-top: 27px; padding: 23px 28px; border: 1px solid #c9e0ff; border-radius: 12px; background: rgba(232,244,255,.72); color: #526784; font-size: 14px; }
.auth-help strong { display: block; color: #1264d2; }
.auth-help strong span { margin-right: 10px; font-size: 18px; vertical-align: -1px; }
.auth-help p { margin: 13px 0 11px 29px; }
.auth-help a { margin-left: 29px; text-decoration: underline; }
.test-login { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3eaf3; }
.test-login p { margin: 0 0 10px; color: #657795; font-size: 12px; font-weight: 700; text-align: center; }
.test-login__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.test-login__buttons button { border: 1px solid #cdddf2; border-radius: 5px; background: #f7fbff; color: #1766d4; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; padding: 6px 9px; }
.test-login__buttons button:hover { border-color: #1766d4; background: #eaf4ff; }
@media (max-height: 850px) and (min-width: 561px) { .auth-shell { padding-top: 30px; padding-bottom: 20px; } .auth-brand strong { font-size: 26px; } .auth-brand small { margin-top: 5px; } .brand-mark { width: 46px; height: 46px; border-radius: 14px; } .auth-card { padding: 25px 30px; } .auth-field { margin-bottom: 14px; } .auth-field input, .auth-submit { height: 46px; } .auth-options { margin-bottom: 18px; } .auth-contact { margin-top: 18px; } .auth-copyright { padding-top: 20px; } .back-to-login { margin-top: 28px; } .auth-card--reset { margin-top: 16px; padding: 22px 38px 26px; } .reset-lock { margin-bottom: 17px; transform: scale(.82); } .auth-heading--card { margin-bottom: 20px; } .auth-heading--card p { margin-top: 7px; } .auth-help { margin-top: 16px; padding: 15px 23px; } .auth-help p { margin-top: 8px; margin-bottom: 7px; } }
@media (max-width: 560px) { .auth-layout { padding: 0; } .auth-shell { width: 100%; min-height: 100vh; border: 0; border-radius: 0; padding: 42px 24px 28px; } .auth-card { padding: 28px 22px; } .auth-card--reset { padding: 32px 22px; } .auth-heading { margin: 45px 0 30px; } .auth-options { align-items: flex-start; flex-direction: column-reverse; } .back-to-login { margin-top: 45px; } }

/* ECG Loader Animations */
.heartbeat-loader {
  width: 100%;
  height: 100%;
}

.heartbeat-path {
  stroke-dasharray: 80 220;
  stroke-dashoffset: 300;
  animation: heartbeat-dash 2.5s linear infinite;
}

@keyframes heartbeat-dash {
  0% { stroke-dashoffset: 300; }
  100% { stroke-dashoffset: 0; }
}

/* Disable Turbo Progress Bar */
.turbo-progress-bar {
  display: none !important;
}