html {
    font-size: 14px;
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

/* --- 1. GLOBAL DARK THEME --- */
body {
    /* REMOVED the default 60px bottom margin that was causing issues */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #020b18 !important;
    background-image: linear-gradient(rgba(45, 85, 145, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 85, 145, 0.2) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    animation: panGrid 30s linear infinite;
    color: #e6f1ff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@keyframes panGrid {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
}

/* This ensures the main content expands to push the footer down */
.container {
    flex: 1;
}

/* --- 2. OVERRIDE ASP.NET DEFAULT WHITE HEADER & FOOTER --- */
header .bg-white {
    background-color: rgba(2, 11, 24, 0.95) !important;
}

header .navbar {
    border-bottom: 1px solid #112240 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

header .navbar-brand, header .nav-link, header .text-dark {
    color: #64ffda !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    header .nav-link:hover {
        color: #e6f1ff !important;
    }

/* THE MAGIC FIX FOR THE FLOATING FOOTER */
footer.footer {
    position: relative !important; /* Strips the default absolute positioning */
    bottom: auto !important;
    background-color: #020b18 !important;
    border-top: 1px solid #112240 !important;
    color: #8892b0 !important;
    margin-top: 40px; /* Gives breathing room below the cards */
}

footer a {
    color: #64ffda !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- 3. DASHBOARD WRAPPER --- */
.eng-wrapper {
    padding: 20px 0;
}

/* --- HOD Dashboard UI --- */
.dashboard-header {
    text-align: center;
    margin-bottom: 50px;
}

    .dashboard-header h1 {
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #64ffda;
        text-shadow: 0 0 15px rgba(100, 255, 218, 0.2);
    }

    .dashboard-header p {
        color: #8892b0;
        font-size: 1.1rem;
    }

.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.dept-card {
    position: relative;
    border-radius: 12px;
    padding: 30px;
    color: #e6f1ff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .dept-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 20px 40px -10px rgba(100, 255, 218, 0.15);
    }

.tech-accent-line {
    width: 40px;
    height: 4px;
    background: #64ffda;
    border-radius: 2px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
    transition: width 0.3s ease;
}

.dept-card:hover .tech-accent-line {
    width: 80px;
}

.card-content {
    position: relative;
    z-index: 2;
}

    .card-content h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

.stats p {
    margin: 8px 0;
    font-size: 14px;
    color: #a8b2d1;
}

.stats strong {
    color: #ccd6f6;
}

.warning-text strong {
    color: #ff6b6b;
}

.action-btn {
    margin-top: 25px;
    width: 100%;
    padding: 12px;
    border: 1px solid #64ffda;
    border-radius: 5px;
    background: transparent;
    color: #64ffda;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .action-btn:hover {
        background: rgba(100, 255, 218, 0.1);
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
    }

/* --- Engineering Navy Themes --- */
.theme-navy-1 {
    background: linear-gradient(135deg, #0a192f, #112240);
    border: 1px solid #1e2d4a;
}

.theme-navy-2 {
    background: linear-gradient(135deg, #020c1b, #0a192f);
    border: 1px solid #112240;
}

.theme-navy-3 {
    background: linear-gradient(135deg, #112240, #233554);
    border: 1px solid #2a3f63;
}

.theme-add-new {
    background: rgba(10, 25, 47, 0.5);
    color: #8892b0;
    border: 2px dashed #233554;
}

    .theme-add-new .add-icon {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .theme-add-new:hover {
        border-color: #64ffda;
        color: #64ffda;
        background: rgba(17, 34, 64, 0.8);
    }

/* --- CINEMATIC CLINICAL ENGINEERING LANDING PAGE --- */
.landing-body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #100906 !important;
    background-image: none !important;
    color: #f8f0e6;
}

.medical-landing {
    position: relative;
    isolation: isolate;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background: #100906;
}

.medical-scene,
.medical-scene-video,
.medical-scene-image,
.mechanical-motion-layer,
.scene-vignette,
.scene-scan,
.blood-flow-canvas {
    position: absolute;
    inset: 0;
}

.medical-scene {
    overflow: hidden;
    background: #100906;
    transform-origin: var(--transition-x, 50%) var(--transition-y, 50%);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 700ms ease;
}

.medical-scene-video {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.medical-scene-image {
    inset: -3%;
    background-image: url('/images/mechanical-heart-dialysis-wallpaper.png');
    background-size: cover;
    background-position: center;
    transform: scale(1.035);
    filter: saturate(1.08) contrast(1.04) brightness(0.9);
    animation: cinematicDrift 18s ease-in-out infinite alternate;
}

.mechanical-motion-layer {
    inset: -3%;
    z-index: 2;
    overflow: hidden;
    transform: scale(1.035);
    animation: cinematicDrift 18s ease-in-out infinite alternate;
    pointer-events: none;
}

.scene-vignette {
    z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 5, 3, 0.9) 0%, rgba(10, 5, 3, 0.56) 24%, transparent 52%),
        linear-gradient(0deg, rgba(10, 5, 3, 0.76) 0%, transparent 38%),
        radial-gradient(circle at 50% 44%, transparent 42%, rgba(8, 4, 2, 0.48) 100%);
}

/* Softly covers the four-point badge embedded near the video's lower-right edge. */
.scene-logo-mask {
    position: absolute;
    right: 1vw;
    bottom: 2vh;
    z-index: 6;
    width: min(320px, 32vw);
    height: min(205px, 25vh);
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(10, 5, 3, 0.97) 0%,
        rgba(10, 5, 3, 0.87) 36%,
        rgba(10, 5, 3, 0.54) 58%,
        transparent 78%
    );
    backdrop-filter: blur(13px) brightness(0.48);
    -webkit-backdrop-filter: blur(13px) brightness(0.48);
}

.scene-scan {
    z-index: 4;
    width: 16%;
    left: -20%;
    background: linear-gradient(90deg, transparent, rgba(255, 178, 95, 0.08), transparent);
    transform: skewX(-12deg);
    animation: sceneScan 10s linear infinite;
    pointer-events: none;
}

.blood-flow-canvas {
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

.gear-pump-field {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.machine-gear {
    position: absolute;
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    opacity: 0.84;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 218, 164, 0.88) 0deg 2.8deg,
        rgba(255, 156, 70, 0.2) 2.8deg 5deg,
        transparent 5deg 18deg
    );
    filter: drop-shadow(0 0 4px rgba(255, 169, 86, 0.42));
    mix-blend-mode: screen;
    animation: gearSpin 2.8s linear infinite;
}

.machine-gear::before {
    content: "";
    position: absolute;
    inset: 19%;
    border: 2px dashed rgba(255, 206, 146, 0.68);
    border-radius: 50%;
    box-shadow:
        inset 0 0 6px rgba(255, 149, 58, 0.28),
        0 0 7px rgba(255, 149, 58, 0.25);
}

.machine-gear::after {
    content: "";
    position: absolute;
    inset: 37%;
    border: 1px solid rgba(255, 231, 197, 0.82);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 110, 0.72), rgba(93, 43, 17, 0.18) 58%, transparent 61%);
}

.machine-gear i {
    position: absolute;
    width: 68%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 229, 191, 0.82), transparent);
    box-shadow: 0 0 5px rgba(255, 168, 75, 0.5);
}

.gear-one {
    left: 54%;
    top: 39.5%;
    width: 5.4%;
}

.gear-two {
    left: 58.6%;
    top: 39.7%;
    width: 4.8%;
    animation-direction: reverse;
    animation-duration: 2.35s;
}

.gear-three {
    left: 54.1%;
    top: 48.7%;
    width: 5.4%;
    animation-duration: 3.15s;
}

.gear-four {
    left: 58.8%;
    top: 49.3%;
    width: 5%;
    animation-direction: reverse;
    animation-duration: 2.55s;
}

.gear-five {
    left: 54.6%;
    top: 58.6%;
    width: 4.3%;
    animation-duration: 2.2s;
}

.gear-six {
    left: 58.7%;
    top: 58.8%;
    width: 4.3%;
    animation-direction: reverse;
    animation-duration: 2.65s;
}

.heart-energy {
    position: absolute;
    z-index: 2;
    left: 29.5%;
    top: 52%;
    width: 20vw;
    height: 20vw;
    max-width: 360px;
    max-height: 360px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.heart-energy span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 61, 32, 0.33);
    border-radius: 50%;
    box-shadow: inset 0 0 42px rgba(198, 28, 12, 0.18), 0 0 42px rgba(198, 28, 12, 0.16);
    animation: heartShockwave 1.08s ease-out infinite;
}

.heart-energy span:nth-child(2) {
    animation-delay: 0.22s;
}

.heart-energy span:nth-child(3) {
    animation-delay: 0.44s;
}

.landing-brand {
    position: absolute;
    z-index: 8;
    top: 4.5vh;
    left: 4vw;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff7ed;
}

.landing-brand > span:last-child {
    display: grid;
    gap: 2px;
}

.landing-brand strong {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.landing-brand small {
    color: #c9b49c;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.brand-signal {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 177, 94, 0.42);
    border-radius: 12px;
    background: rgba(37, 20, 11, 0.68);
    box-shadow: 0 0 26px rgba(255, 147, 58, 0.16);
}

.brand-signal::before,
.brand-signal::after,
.brand-signal i {
    content: "";
    position: absolute;
    display: block;
    height: 2px;
    border-radius: 999px;
    background: #39f08f;
    box-shadow: 0 0 8px rgba(57, 240, 143, 0.75);
}

.brand-signal::before {
    width: 10px;
    left: 6px;
}

.brand-signal i {
    width: 9px;
    left: 15px;
    transform: rotate(-58deg);
}

.brand-signal::after {
    width: 12px;
    right: 5px;
}

.landing-content {
    position: absolute;
    z-index: 8;
    left: 4vw;
    bottom: 8vh;
    width: min(520px, 38vw);
    text-align: left;
}

.landing-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #ffb15f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.landing-eyebrow span {
    width: 38px;
    height: 1px;
    background: #ff9b43;
    box-shadow: 0 0 12px rgba(255, 155, 67, 0.7);
}

.landing-content h1 {
    margin: 0;
    color: #fff9f2;
    font-size: clamp(2.75rem, 4.8vw, 5.6rem);
    font-weight: 680;
    letter-spacing: -0.055em;
    line-height: 0.9;
    text-shadow: 0 8px 38px rgba(0, 0, 0, 0.72);
}

.landing-content h1 em {
    color: #42f29a;
    font-style: normal;
    font-weight: 540;
    text-shadow: 0 0 30px rgba(55, 238, 142, 0.28);
}

.landing-summary {
    max-width: 500px;
    margin: 24px 0 28px;
    color: #d9c9b7;
    font-size: clamp(0.92rem, 1.12vw, 1.08rem);
    line-height: 1.65;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 14px 16px 14px 24px;
    border: 1px solid rgba(255, 180, 97, 0.56);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(121, 50, 19, 0.92), rgba(52, 25, 13, 0.94));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 235, 214, 0.12);
    color: #fff8ef;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.btn-login i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #3af091;
    color: #102117;
    font-size: 1.1rem;
    font-style: normal;
}

.btn-login:hover,
.btn-login:focus-visible {
    border-color: #ffb05a;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.46), 0 0 25px rgba(255, 140, 50, 0.18);
    color: #fff;
    transform: translateY(-3px);
}

.landing-system-state {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: #ad9a86;
    font-size: 0.67rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3af091;
    box-shadow: 0 0 10px rgba(58, 240, 145, 0.9);
    animation: statusPulse 1.6s ease-in-out infinite;
}

.patient-monitor,
.dialysis-readout {
    position: absolute;
    z-index: 6;
    overflow: hidden;
    border: 1px solid rgba(255, 188, 113, 0.22);
    background: rgba(5, 8, 5, 0.91);
    color: #f6eadc;
    box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.8), 0 0 20px rgba(27, 246, 128, 0.08);
    pointer-events: none;
}

.patient-monitor {
    top: 5.2%;
    right: 10.1%;
    width: 21.4%;
    height: 23.7%;
    padding: 0.7vw 0.8vw;
    border-radius: 0.6vw;
}

.monitor-topline,
.dialysis-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #b9aa98;
    font-size: clamp(0.42rem, 0.48vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.14em;
}

.live-indicator {
    color: #47ef96;
}

.live-indicator i,
.dialysis-title i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    border-radius: 50%;
    background: #47ef96;
    box-shadow: 0 0 8px rgba(71, 239, 150, 0.9);
}

.patient-waveform {
    width: 100%;
    height: 41%;
    margin: 4px 0 1px;
    border-top: 1px solid rgba(71, 239, 150, 0.1);
    border-bottom: 1px solid rgba(71, 239, 150, 0.1);
}

.vital-readings {
    display: grid;
    grid-template-columns: 1.5fr 0.85fr 0.72fr;
    gap: 0.55vw;
    align-items: end;
}

.vital {
    display: grid;
    align-content: end;
    min-width: 0;
}

.vital-label {
    color: #ffad57;
    font-size: clamp(0.38rem, 0.44vw, 0.58rem);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.vital strong {
    color: #ff6349;
    font-family: Consolas, 'Courier New', monospace;
    font-size: clamp(0.75rem, 1.25vw, 1.65rem);
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255, 68, 42, 0.36);
}

.vital-spo2 strong,
.vital-ecg strong {
    color: #43ed94;
    text-shadow: 0 0 10px rgba(67, 237, 148, 0.34);
}

.vital sup,
.vital small {
    color: #c4b4a2;
    font-size: clamp(0.35rem, 0.38vw, 0.5rem);
    font-weight: 500;
}

.dialysis-readout {
    top: 39.5%;
    right: 15.2%;
    width: 8.3%;
    min-width: 92px;
    padding: 0.55vw;
    border-radius: 0.45vw;
    background: rgba(9, 11, 8, 0.94);
}

.dialysis-title {
    padding-bottom: 0.35vw;
    border-bottom: 1px solid rgba(255, 174, 87, 0.18);
    color: #ffae58;
}

.dialysis-title i {
    margin: 0;
}

.dialysis-readout dl {
    display: grid;
    gap: 0.22vw;
    margin: 0.35vw 0 0;
}

.dialysis-readout dl div {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: clamp(0.33rem, 0.46vw, 0.56rem);
}

.dialysis-readout dt {
    color: #b9a791;
    font-weight: 500;
}

.dialysis-readout dd {
    margin: 0;
    color: #42ed92;
    font-weight: 700;
    white-space: nowrap;
}

.dialysis-readout small {
    color: #9e8e7c;
    font-size: 0.72em;
}

.scene-caption {
    position: absolute;
    z-index: 8;
    right: 4vw;
    bottom: 5vh;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #d9c9b8;
}

.scene-caption > span {
    color: #ffae58;
    font: 700 0.68rem/1 Consolas, monospace;
}

.scene-caption div {
    display: grid;
    gap: 3px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 174, 88, 0.42);
}

.scene-caption strong {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scene-caption small {
    color: #9f8d79;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

@keyframes cinematicDrift {
    0% { transform: scale(1.035) translate3d(-0.35%, -0.2%, 0); }
    55% { transform: scale(1.075) translate3d(0.5%, 0.15%, 0); }
    100% { transform: scale(1.045) translate3d(-0.1%, 0.45%, 0); }
}

@keyframes heartShockwave {
    0% { opacity: 0; transform: scale(0.46); }
    18% { opacity: 0.72; }
    65% { opacity: 0.16; }
    100% { opacity: 0; transform: scale(1.14); }
}

@keyframes sceneScan {
    0% { transform: translateX(0) skewX(-12deg); }
    100% { transform: translateX(760%) skewX(-12deg); }
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes gearSpin {
    to { transform: rotate(360deg); }
}

/* --- HOME-TO-LOGIN PORTAL TRANSITION --- */
.landing-brand,
.landing-content,
.scene-caption {
    transition: opacity 420ms ease, transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease;
}

.medical-landing.is-transitioning .medical-scene {
    filter: blur(2px) brightness(0.72);
    transform: scale(1.2);
}

.medical-landing.is-transitioning .landing-brand,
.medical-landing.is-transitioning .scene-caption {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-22px);
}

.medical-landing.is-transitioning .landing-content {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.08) translateY(-12px);
    transform-origin: var(--transition-x, 50%) var(--transition-y, 50%);
}

.portal-transition {
    --transition-x: 50vw;
    --transition-y: 50vh;
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    overflow: hidden;
    place-items: center;
    opacity: 0;
    clip-path: circle(0 at var(--transition-x) var(--transition-y));
    background:
        radial-gradient(circle at var(--transition-x) var(--transition-y), rgba(163, 64, 22, 0.38), transparent 34%),
        linear-gradient(135deg, #2b1208, #150905 58%, #090503);
    pointer-events: none;
}

.portal-transition.is-active {
    opacity: 1;
    pointer-events: all;
    animation: portalMorphReveal 900ms cubic-bezier(0.72, 0, 0.18, 1) both;
}

.portal-transition::before,
.portal-transition::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    border-color: rgba(255, 183, 103, 0.17);
    background: linear-gradient(145deg, rgba(94, 35, 13, 0.58), rgba(15, 7, 4, 0.22));
}

.portal-transition::before {
    left: 0;
    border-right: 1px solid rgba(255, 183, 103, 0.12);
    transform: translateX(-100%);
}

.portal-transition::after {
    right: 0;
    border-left: 1px solid rgba(255, 183, 103, 0.12);
    transform: translateX(100%);
}

.portal-transition.is-active::before,
.portal-transition.is-active::after {
    animation: portalDoorsClose 560ms 160ms cubic-bezier(0.72, 0, 0.2, 1) forwards;
}

.portal-transition-sweep {
    position: absolute;
    inset: 0 auto 0 -36%;
    z-index: 2;
    width: 34%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 181, 102, 0.15), rgba(61, 239, 145, 0.16), transparent);
    filter: blur(1px);
    transform: skewX(-14deg);
}

.portal-transition.is-active .portal-transition-sweep {
    animation: portalSweepAcross 720ms 170ms ease-in-out forwards;
}

.portal-transition-message {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 8px;
    opacity: 0;
    color: #fff5e9;
    text-align: center;
    transform: translateX(54px) scale(0.92);
}

.portal-transition.is-active .portal-transition-message {
    animation: portalMessageSlide 450ms 380ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.portal-transition-message small {
    color: #ffad57;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.portal-transition-message strong {
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: 620;
    letter-spacing: -0.035em;
}

.portal-transition-pulse {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    place-items: center;
    border: 1px solid rgba(64, 239, 146, 0.52);
    border-radius: 22px;
    background: rgba(29, 13, 7, 0.7);
    box-shadow: 0 0 30px rgba(64, 239, 146, 0.16);
}

.portal-transition-pulse::before,
.portal-transition-pulse::after,
.portal-transition-pulse i {
    content: "";
    position: absolute;
    height: 2px;
    border-radius: 999px;
    background: #48f19a;
    box-shadow: 0 0 10px rgba(72, 241, 154, 0.8);
}

.portal-transition-pulse::before {
    left: 11px;
    width: 19px;
}

.portal-transition-pulse i {
    left: 25px;
    width: 15px;
    transform: rotate(-58deg);
}

.portal-transition-pulse::after {
    right: 10px;
    width: 20px;
}

@keyframes portalMorphReveal {
    0% {
        opacity: 0.3;
        clip-path: circle(0 at var(--transition-x) var(--transition-y));
    }
    45% {
        opacity: 1;
        clip-path: circle(24vmax at var(--transition-x) var(--transition-y));
    }
    100% {
        opacity: 1;
        clip-path: circle(150vmax at var(--transition-x) var(--transition-y));
    }
}

@keyframes portalDoorsClose {
    to { transform: translateX(0); }
}

@keyframes portalSweepAcross {
    0% { left: -36%; opacity: 0; }
    20% { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

@keyframes portalMessageSlide {
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- SINGLE ROLE-AWARE LOGIN --- */
body.auth-page {
    background-color: #160b06 !important;
    background-image:
        radial-gradient(circle at 12% 16%, rgba(132, 49, 17, 0.28), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(90, 34, 14, 0.18), transparent 30%),
        linear-gradient(145deg, #241006, #120804 58%, #0b0604) !important;
}

body.auth-page header .bg-white,
body.auth-page header .navbar {
    margin-bottom: 0 !important;
    background-color: rgba(25, 11, 6, 0.98) !important;
    border-color: rgba(255, 176, 91, 0.18) !important;
}

body.auth-page > .container {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 0;
}

body.auth-page > .container > main {
    width: 100%;
    padding-bottom: 0 !important;
}

body.auth-page footer.footer {
    display: none;
}

.unified-auth-shell {
    position: relative;
    display: grid;
    min-height: calc(100vh - 190px);
    place-items: center;
    overflow: hidden;
    padding: 48px 20px;
    border: 1px solid rgba(255, 176, 91, 0.13);
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 15%, rgba(151, 58, 19, 0.22), transparent 31%),
        radial-gradient(circle at 82% 78%, rgba(36, 173, 101, 0.12), transparent 30%),
        linear-gradient(145deg, #140b07, #070a07 68%, #0b120d);
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.52);
}

body.auth-page .unified-auth-shell {
    min-height: calc(100vh - 57px);
    padding: 48px 20px;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 16% 14%, rgba(151, 58, 19, 0.25), transparent 34%),
        radial-gradient(circle at 86% 84%, rgba(100, 36, 13, 0.18), transparent 30%),
        linear-gradient(145deg, #241006, #120804 66%, #0b0604);
}

body.auth-page.auth-transition-entry {
    overflow: hidden;
}

body.auth-page.auth-transition-entry .unified-auth-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    background:
        radial-gradient(circle at 50% 50%, rgba(154, 57, 19, 0.3), transparent 34%),
        linear-gradient(135deg, #2b1208, #150905 58%, #090503);
    pointer-events: none;
    animation: loginCurtainRelease 720ms cubic-bezier(0.72, 0, 0.18, 1) forwards;
}

body.auth-page.auth-transition-entry .unified-auth-card {
    animation: loginCardMorphIn 720ms 90ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes loginCurtainRelease {
    0% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

@keyframes loginCardMorphIn {
    0% { opacity: 0; filter: blur(8px); transform: translateX(80px) scale(0.9); }
    100% { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); }
}

.unified-auth-card {
    position: relative;
    z-index: 2;
    width: min(100%, 510px);
    padding: 42px;
    border: 1px solid rgba(255, 182, 104, 0.24);
    border-radius: 22px;
    background: rgba(24, 15, 10, 0.88);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44), inset 0 1px rgba(255, 245, 229, 0.07);
    backdrop-filter: blur(18px);
}

.auth-back-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 32px;
    color: #bba893;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.auth-back-link:hover,
.auth-back-link:focus-visible {
    color: #43ed94;
}

.auth-brand-mark {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    border: 1px solid rgba(255, 171, 82, 0.34);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(117, 44, 16, 0.56), rgba(22, 13, 8, 0.92));
}

.auth-brand-pulse {
    position: relative;
    width: 30px;
    height: 22px;
}

.auth-brand-pulse::before,
.auth-brand-pulse::after {
    content: "";
    position: absolute;
    top: 10px;
    height: 2px;
    background: #45ef96;
    box-shadow: 0 0 10px rgba(69, 239, 150, 0.8);
}

.auth-brand-pulse::before {
    left: 0;
    width: 17px;
    transform: rotate(-48deg);
}

.auth-brand-pulse::after {
    right: 0;
    width: 17px;
    transform: rotate(48deg);
}

.auth-kicker {
    margin: 0 0 9px;
    color: #ffad57;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.unified-auth-card h1 {
    margin: 0 0 12px;
    color: #fff7ee;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 650;
    letter-spacing: -0.045em;
}

.auth-intro {
    margin: 0 0 30px;
    color: #bbaa97;
    line-height: 1.65;
}

.unified-login-form {
    display: grid;
    gap: 20px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field label {
    color: #d8c7b5;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
}

.auth-field input {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid rgba(193, 154, 116, 0.32);
    border-radius: 11px;
    outline: none;
    background: rgba(7, 9, 7, 0.82);
    color: #fff7ed;
    font-size: 1rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.auth-field input::placeholder {
    color: #75695c;
}

.auth-field input:focus {
    border-color: #43ed94;
    background: rgba(8, 13, 9, 0.96);
    box-shadow: 0 0 0 3px rgba(67, 237, 148, 0.12);
}

.auth-error {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255, 89, 61, 0.34);
    border-radius: 10px;
    background: rgba(113, 22, 13, 0.22);
    color: #ff9b88;
}

.auth-error span {
    display: grid;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 91, 62, 0.18);
    font-weight: 800;
}

.auth-error p {
    margin: 0;
    font-size: 0.86rem;
}

.unified-login-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    padding: 15px 17px 15px 20px;
    border: 1px solid #54ee9c;
    border-radius: 11px;
    background: #42e990;
    color: #0d2418;
    font-weight: 750;
    letter-spacing: 0.02em;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.unified-login-button span {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    background: rgba(13, 36, 24, 0.1);
}

.unified-login-button:hover,
.unified-login-button:focus-visible {
    background: #6af4ae;
    box-shadow: 0 12px 30px rgba(57, 237, 145, 0.16);
    transform: translateY(-2px);
}

.auth-trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    color: #817364;
    font-size: 0.67rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.auth-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #43ed94;
    box-shadow: 0 0 9px rgba(67, 237, 148, 0.75);
}

.auth-orbit {
    position: absolute;
    border: 1px solid rgba(255, 167, 76, 0.13);
    border-radius: 50%;
}

.auth-orbit-one {
    width: 430px;
    height: 430px;
    top: -180px;
    right: -90px;
}

.auth-orbit-two {
    width: 290px;
    height: 290px;
    bottom: -145px;
    left: -70px;
    border-color: rgba(67, 237, 148, 0.11);
}

@media (max-width: 900px) {
    .landing-content {
        width: min(590px, 74vw);
    }

    .medical-scene-image {
        background-position: 48% center;
    }

    .patient-monitor {
        right: 4%;
        width: 29%;
    }

    .dialysis-readout,
    .scene-caption {
        display: none;
    }
}

@media (max-width: 640px) {
    .landing-brand {
        top: 24px;
        left: 22px;
    }

    .landing-brand small {
        display: none;
    }

    .medical-scene-image {
        inset: -8%;
        background-position: 36% center;
        filter: saturate(1.05) contrast(1.08) brightness(0.68);
    }

    .scene-vignette {
        background: linear-gradient(0deg, rgba(8, 4, 2, 0.95) 0%, rgba(8, 4, 2, 0.48) 56%, rgba(8, 4, 2, 0.22) 100%);
    }

    .landing-content {
        left: 22px;
        right: 22px;
        bottom: 34px;
        width: auto;
    }

    .landing-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.2rem);
    }

    .landing-summary {
        margin: 18px 0 22px;
        font-size: 0.9rem;
    }

    .patient-monitor {
        top: 13%;
        right: 4%;
        width: 46%;
        height: 16%;
        opacity: 0.86;
    }

    .vital-readings {
        gap: 6px;
    }

    .heart-energy {
        left: 37%;
        top: 43%;
        width: 42vw;
        height: 42vw;
    }

    .unified-auth-card {
        padding: 30px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .medical-scene-image,
    .mechanical-motion-layer,
    .heart-energy span,
    .machine-gear,
    .scene-scan,
    .state-dot {
        animation: none !important;
    }
}
/* SYSTEM-WIDE OVERRIDE: 
   Forces all 'text-muted' elements to use the readable slate-blue color 
   so they don't disappear into the dark UI background. */
.text-muted {
    color: #8892b0 !important;
}

/* --- LIVE LOGIN BACKGROUND AND FLOATING EQUIPMENT --- */
body.auth-page .unified-auth-shell {
    isolation: isolate;
    background: #100704;
}

.auth-live-video,
.auth-live-filter,
.auth-equipment-field {
    position: absolute;
    inset: 0;
}

.auth-live-video {
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.48;
    filter: sepia(0.42) saturate(0.92) brightness(0.48) contrast(1.08);
}

.auth-live-filter {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(27, 11, 5, 0.72), rgba(14, 7, 4, 0.44) 48%, rgba(23, 10, 5, 0.7)),
        radial-gradient(circle at 50% 48%, transparent 0%, rgba(17, 7, 4, 0.3) 64%, rgba(10, 5, 3, 0.76) 100%);
    pointer-events: none;
}

.auth-equipment-field {
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

body.auth-page .unified-auth-card {
    z-index: 5;
    background: rgba(27, 15, 9, 0.9);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 245, 229, 0.08);
}

body.auth-page .auth-orbit {
    z-index: 3;
    opacity: 0.56;
}

.floating-equipment {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 154px;
    min-height: 82px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 183, 107, 0.25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(45, 23, 13, 0.58), rgba(10, 8, 6, 0.45));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 247, 236, 0.08);
    color: #e8d6c3;
    opacity: 0;
    backdrop-filter: blur(7px);
    will-change: transform, opacity;
}

.floating-equipment figcaption {
    max-width: 68px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-transform: uppercase;
}

.equipment-glyph {
    position: relative;
    display: block;
    flex: 0 0 50px;
    width: 50px;
    height: 45px;
    border: 1px solid rgba(255, 194, 126, 0.58);
    border-radius: 8px;
    background: rgba(8, 10, 7, 0.76);
    box-shadow: inset 0 0 12px rgba(255, 144, 52, 0.08), 0 0 12px rgba(64, 239, 146, 0.07);
}

.equipment-glyph i,
.equipment-glyph b {
    position: absolute;
    display: block;
}

.equipment-monitor .equipment-glyph i {
    top: 20px;
    left: 7px;
    width: 35px;
    height: 2px;
    background: #43ed94;
    box-shadow: 0 0 7px rgba(67, 237, 148, 0.7);
    transform: skewY(-18deg);
}

.equipment-monitor .equipment-glyph b {
    left: 19px;
    bottom: -6px;
    width: 12px;
    height: 6px;
    border-top: 1px solid #d1a26f;
}

.equipment-infusion .equipment-glyph {
    width: 28px;
    flex-basis: 28px;
    margin-left: 11px;
    margin-right: 11px;
    border-radius: 5px;
}

.equipment-infusion .equipment-glyph i {
    top: 7px;
    left: 5px;
    width: 16px;
    height: 12px;
    border: 1px solid #43ed94;
    border-radius: 2px;
}

.equipment-infusion .equipment-glyph b {
    left: 9px;
    bottom: 7px;
    width: 8px;
    height: 8px;
    border: 1px solid #ffad57;
    border-radius: 50%;
}

.equipment-ventilator .equipment-glyph i {
    inset: 8px;
    border: 3px dotted rgba(67, 237, 148, 0.86);
    border-radius: 50%;
    animation: equipmentRotor 3s linear infinite;
}

.equipment-ventilator .equipment-glyph b {
    top: 20px;
    left: 20px;
    width: 8px;
    height: 4px;
    border-radius: 999px;
    background: #ffad57;
}

.equipment-dialysis .equipment-glyph i,
.equipment-dialysis .equipment-glyph b {
    top: 12px;
    width: 17px;
    height: 17px;
    border: 2px dashed #ffad57;
    border-radius: 50%;
    animation: equipmentRotor 3.4s linear infinite;
}

.equipment-dialysis .equipment-glyph i {
    left: 5px;
}

.equipment-dialysis .equipment-glyph b {
    right: 5px;
    animation-direction: reverse;
}

.equipment-defibrillator .equipment-glyph i {
    top: 8px;
    left: 18px;
    width: 13px;
    height: 27px;
    background: linear-gradient(155deg, transparent 42%, #43ed94 43% 57%, transparent 58%);
    transform: skewX(-13deg);
}

.equipment-defibrillator .equipment-glyph b {
    inset: 5px;
    border: 1px solid rgba(255, 173, 87, 0.36);
    border-radius: 4px;
}

.equipment-ultrasound .equipment-glyph i {
    top: 6px;
    left: 6px;
    width: 36px;
    height: 23px;
    border: 1px solid #43ed94;
    border-radius: 3px;
    background: radial-gradient(ellipse at 55% 68%, rgba(67, 237, 148, 0.4), transparent 48%);
}

.equipment-ultrasound .equipment-glyph b {
    left: 20px;
    bottom: 4px;
    width: 16px;
    height: 7px;
    border-bottom: 2px solid #ffad57;
    border-radius: 50%;
    transform: rotate(-22deg);
}

@keyframes equipmentRotor {
    to { transform: rotate(360deg); }
}

/* --- GPU-SMOOTH HOME-TO-LOGIN HANDOFF --- */
@view-transition {
    navigation: auto;
}

.btn-login,
body.auth-page .unified-auth-card {
    view-transition-name: system-access-card;
}

::view-transition-group(root),
::view-transition-group(system-access-card) {
    animation-duration: 680ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(root) {
    animation: 240ms ease-out both portalRootFadeOut;
}

::view-transition-new(root) {
    animation: 580ms cubic-bezier(0.16, 1, 0.3, 1) both portalRootFadeIn;
}

::view-transition-old(system-access-card) {
    animation: 260ms ease-out both portalControlFadeOut;
}

::view-transition-new(system-access-card) {
    animation: 680ms cubic-bezier(0.16, 1, 0.3, 1) both portalControlMorphIn;
}

.medical-scene {
    will-change: transform;
    transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-brand,
.landing-content,
.scene-caption {
    will-change: transform, opacity;
    transition: opacity 320ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.medical-landing.is-transitioning .medical-scene {
    filter: none;
    transform: scale(1.14);
}

.medical-landing.is-transitioning .landing-brand,
.medical-landing.is-transitioning .scene-caption {
    filter: none;
    transform: translate3d(0, -18px, 0);
}

.medical-landing.is-transitioning .landing-content {
    filter: none;
    transform: translate3d(0, -10px, 0) scale(1.045);
}

.portal-transition {
    opacity: 0;
    clip-path: none;
    background: transparent;
    will-change: opacity;
}

.portal-transition.is-active {
    opacity: 1;
    animation: none;
}

.portal-transition::before,
.portal-transition::after {
    border: 0;
    pointer-events: none;
    will-change: transform;
}

.portal-transition::before {
    top: var(--transition-y);
    right: auto;
    bottom: auto;
    left: var(--transition-x);
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(168, 63, 21, 0.5), transparent 34%),
        #160905;
    transform: translate3d(-50%, -50%, 0) scale(0);
}

.portal-transition::after {
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(43, 18, 8, 0.98), rgba(21, 9, 5, 0.99) 58%, #090503);
    transform: translate3d(102%, 0, 0);
}

.portal-transition.is-active::before {
    animation: portalDiskExpandSmooth 650ms cubic-bezier(0.65, 0, 0.18, 1) forwards;
}

.portal-transition.is-active::after {
    animation: portalPanelSlideSmooth 340ms 330ms cubic-bezier(0.65, 0, 0.18, 1) forwards;
}

.portal-transition-sweep {
    left: -38%;
    z-index: 3;
    will-change: transform, opacity;
}

.portal-transition.is-active .portal-transition-sweep {
    animation: portalSweepSmooth 470ms 170ms ease-out forwards;
}

.portal-transition.is-active .portal-transition-message {
    animation: portalMessageSmooth 330ms 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.auth-page.auth-transition-entry .unified-auth-shell::before {
    clip-path: none;
    will-change: transform;
    animation: loginCurtainReleaseSmooth 600ms cubic-bezier(0.65, 0, 0.18, 1) forwards;
}

body.auth-page.auth-transition-entry .unified-auth-card {
    animation: loginCardMorphInSmooth 640ms 55ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes portalDiskExpandSmooth {
    to { transform: translate3d(-50%, -50%, 0) scale(190); }
}

@keyframes portalPanelSlideSmooth {
    to { transform: translate3d(0, 0, 0); }
}

@keyframes portalSweepSmooth {
    0% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(440%, 0, 0) skewX(-14deg); }
}

@keyframes portalMessageSmooth {
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes loginCurtainReleaseSmooth {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-102%, 0, 0); }
}

@keyframes loginCardMorphInSmooth {
    0% { opacity: 0; transform: translate3d(72px, 0, 0) scale(0.94); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes portalRootFadeOut {
    to { opacity: 0.72; }
}

@keyframes portalRootFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes portalControlFadeOut {
    to { opacity: 0; }
}

@keyframes portalControlMorphIn {
    from { opacity: 0.18; filter: brightness(1.3); }
    to { opacity: 1; filter: brightness(1); }
}

@media (max-width: 640px) {
    .floating-equipment {
        width: 132px;
        min-height: 72px;
        padding: 10px;
    }

    .floating-equipment figcaption {
        font-size: 0.54rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-equipment,
    .equipment-glyph i,
    .equipment-glyph b {
        animation: none !important;
    }

    ::view-transition-group(root),
    ::view-transition-group(system-access-card) {
        animation-duration: 1ms;
    }
}