/* ==========================================================================
   Control Room - sign in

   Everything is scoped under .rct-login, which only Views/Security/Login.cshtml
   renders, so the Denied page (the same layout) is untouched.

   Palette: the logo's navy #0B1B33 and teal #00C2B2 on a deeper ground. Teal
   carries navy type, never white (white on #00C2B2 is 2.2:1; #06101F is 9.4:1).

   The backdrop has four layers, behind the content and none of them clickable:
     1. .rct-login-wash    two soft blooms (teal and blue), drifting
     2. .rct-login-grid    a fine blueprint grid, drifting a cell at a time
     3. .rct-login-orbit   open rings echoing the C mark, slowly turning
     4. .rct-login-traces  circuit traces, each carrying a pulse of light
   Every animation moves transform, opacity or stroke-dashoffset only, so none
   of them repaints the whole viewport each frame.
   ========================================================================== */

.rct-login {
    --rct-ground: #06101f;
    --rct-navy: #0b1b33;
    --rct-teal: #00c2b2;
    --rct-teal-hi: #2ee6d6;
    --rct-text: #e8eff8;
    --rct-text-dim: #93a6bf;
    --rct-line: rgba(147, 166, 191, 0.24);

    /* The page owns the whole viewport (Vuexy's wrappers add padding and a light
       ground), so it sits fixed over them and scrolls itself on short screens. */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(ellipse 120% 90% at 30% 40%, #0c1f3b 0%, var(--rct-ground) 62%);
    color: var(--rct-text);
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */
.rct-login-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.rct-login-wash::before,
.rct-login-wash::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.rct-login-wash::before {
    width: 80vw;
    height: 80vw;
    top: -30vw;
    left: -22vw;
    background: radial-gradient(circle closest-side,
                rgba(0, 194, 178, 0.17) 0%,
                rgba(0, 194, 178, 0.06) 45%,
                rgba(0, 194, 178, 0) 72%);
    animation: rct-drift-a 32s ease-in-out infinite;
}

.rct-login-wash::after {
    width: 70vw;
    height: 70vw;
    right: -22vw;
    bottom: -30vw;
    background: radial-gradient(circle closest-side,
                rgba(41, 110, 214, 0.2) 0%,
                rgba(41, 110, 214, 0.07) 48%,
                rgba(41, 110, 214, 0) 74%);
    animation: rct-drift-b 40s ease-in-out infinite;
}

/* 200% of the viewport, travelling exactly one 56px cell on the diagonal, so
   the loop is seamless. Faded towards the edges so it reads as a field. */
.rct-login-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(0, 194, 178, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 194, 178, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 0 0, rgba(46, 230, 214, 0.28) 1.4px, transparent 1.6px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, transparent 75%);
    animation: rct-grid 24s linear infinite;
    will-change: transform;
}

/* The rings: the logo's C, pulled apart into open arcs that turn at different
   speeds, with the teal dot riding the middle one. Sits behind the brand column
   on wide screens and behind the panel on narrow ones. */
.rct-login-orbit {
    position: absolute;
    top: 50%;
    left: 30%;
    width: min(92vmin, 900px);
    height: min(92vmin, 900px);
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.rct-login-orbit .rct-ring {
    fill: none;
    stroke-linecap: round;
    transform-origin: 500px 500px;
    will-change: transform;
}

.rct-login-orbit .rct-ring-1 {
    stroke: rgba(0, 194, 178, 0.22);
    stroke-width: 2;
    animation: rct-spin 70s linear infinite;
}

.rct-login-orbit .rct-ring-2 {
    stroke: rgba(147, 166, 191, 0.16);
    stroke-width: 1.2;
    stroke-dasharray: 2 10;
    animation: rct-spin 110s linear infinite reverse;
}

.rct-login-orbit .rct-ring-3 {
    stroke: rgba(0, 194, 178, 0.14);
    stroke-width: 1;
    animation: rct-spin 48s linear infinite;
}

.rct-login-orbit .rct-ring-4 {
    stroke: rgba(41, 110, 214, 0.22);
    stroke-width: 1.4;
    stroke-dasharray: 60 24;
    animation: rct-spin 90s linear infinite reverse;
}

.rct-login-orbit .rct-satellite {
    transform-origin: 500px 500px;
    animation: rct-spin 26s linear infinite;
    will-change: transform;
}

.rct-login-orbit .rct-satellite circle:first-child {
    fill: rgba(0, 194, 178, 0.18);
}

.rct-login-orbit .rct-satellite circle:last-child {
    fill: var(--rct-teal);
}

/* Circuit traces. Each trace is drawn three times: a faint static line, then a
   soft wide pulse and a bright narrow one travelling along it together. Every
   path has pathLength="1000", so one dash pattern fits them all: the 140-long
   dash starts just before the path, runs off its far end by 60% of the cycle,
   and waits hidden for the rest, so pulses arrive at staggered moments. */
.rct-login-traces {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rct-login-traces use {
    /* On the <use>, not the path: the clones inherit it, and a rule aimed at the
       path inside <defs> does not reach them, so they fill black. */
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rct-login-traces .rct-trace {
    stroke: rgba(0, 194, 178, 0.15);
    stroke-width: 1.2;
}

.rct-login-traces .rct-pulse,
.rct-login-traces .rct-glow {
    stroke-dasharray: 140 2000;
    stroke-dashoffset: 140;
    animation: rct-pulse 9s linear infinite;
    will-change: stroke-dashoffset;
}

.rct-login-traces .rct-pulse {
    stroke: var(--rct-teal-hi);
    stroke-width: 1.8;
}

.rct-login-traces .rct-glow {
    stroke: rgba(0, 194, 178, 0.22);
    stroke-width: 7;
}

.rct-login-traces .rct-pad {
    fill: var(--rct-ground);
    stroke: rgba(0, 194, 178, 0.45);
    stroke-width: 1.4;
}

.rct-login-traces .rct-pad-lit {
    fill: var(--rct-teal);
    stroke: none;
    animation: rct-blink 4.5s ease-in-out infinite;
}

.rct-login-traces .rct-t2 { animation-duration: 12s;   animation-delay: -4s; }
.rct-login-traces .rct-t3 { animation-duration: 10s;   animation-delay: -7s; }
.rct-login-traces .rct-t4 { animation-duration: 14s;   animation-delay: -2s; }
.rct-login-traces .rct-t5 { animation-duration: 8s;    animation-delay: -5.5s; }
.rct-login-traces .rct-t6 { animation-duration: 11s;   animation-delay: -9s; }
.rct-login-traces .rct-t7 { animation-duration: 9.5s;  animation-delay: -3s; }
.rct-login-traces .rct-t8 { animation-duration: 13s;   animation-delay: -6s; }
.rct-login-traces .rct-b2 { animation-delay: -1.5s; }
.rct-login-traces .rct-b3 { animation-delay: -3s; }

/* A faint band of light sweeping down the screen, as on a monitor wall. */
.rct-login-scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32vh;
    background: linear-gradient(180deg,
                rgba(0, 194, 178, 0) 0%,
                rgba(0, 194, 178, 0.04) 60%,
                rgba(46, 230, 214, 0.08) 88%,
                rgba(46, 230, 214, 0) 100%);
    transform: translate3d(0, -40vh, 0);
    animation: rct-scan 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

@keyframes rct-pulse {
    0%        { stroke-dashoffset: 140; }
    60%, 100% { stroke-dashoffset: -1000; }
}

@keyframes rct-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rct-grid {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(56px, 56px, 0); }
}

@keyframes rct-blink {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

@keyframes rct-scan {
    0%        { transform: translate3d(0, -40vh, 0); }
    70%, 100% { transform: translate3d(0, 110vh, 0); }
}

@keyframes rct-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(7vw, 5vw, 0) scale(1.08); }
}

@keyframes rct-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-6vw, -4vw, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.rct-login-shell {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: 1180px;
    margin: auto;
}

.rct-login-brand {
    flex: 1 1 52%;
    min-width: 0;
    text-align: center;
}

.rct-login-logo {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 40px rgba(0, 194, 178, 0.22));
}

.rct-login-tag {
    margin: 2rem auto 0;
    color: var(--rct-text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

.rct-login-tag::before {
    content: "";
    display: block;
    width: 220px;
    height: 1px;
    margin: 0 auto 1.15rem;
    background: linear-gradient(90deg,
                rgba(0, 194, 178, 0) 0%,
                rgba(0, 194, 178, 0.8) 50%,
                rgba(0, 194, 178, 0) 100%);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.rct-login-panel {
    position: relative;
    flex: 0 0 420px;
    max-width: 420px;
    padding: 2.75rem 2.5rem 2.25rem;
    border: 1px solid rgba(0, 194, 178, 0.2);
    border-radius: 14px;
    background: rgba(11, 27, 51, 0.66);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* A teal hairline along the panel's top edge, brightest in the middle. */
.rct-login-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
                rgba(46, 230, 214, 0) 0%,
                rgba(46, 230, 214, 0.9) 50%,
                rgba(46, 230, 214, 0) 100%);
}

.rct-login-logo-sm {
    display: none;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 1.75rem;
}

.rct-login-title {
    margin: 0 0 0.35rem;
    color: var(--rct-text);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.rct-login-sub {
    margin: 0 0 1.9rem;
    color: var(--rct-text-dim);
    font-size: 0.92rem;
}

.rct-login .form-group {
    margin-bottom: 1.15rem;
}

.rct-login .form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--rct-text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Vuexy's .form-control is a light-theme control, so each property is restated. */
.rct-login .form-control {
    height: auto;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rct-line);
    border-radius: 8px;
    background-color: rgba(6, 16, 31, 0.6);
    color: var(--rct-text);
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.rct-login .form-control:focus {
    border-color: var(--rct-teal);
    background-color: rgba(6, 16, 31, 0.85);
    color: var(--rct-text);
    box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.18);
}

/* Chrome paints autofilled fields pale blue and no property overrides that
   fill; a large inset shadow covers it, and the long transition stops the flash. */
.rct-login .form-control:-webkit-autofill,
.rct-login .form-control:-webkit-autofill:hover,
.rct-login .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--rct-text);
    -webkit-box-shadow: 0 0 0 1000px #0a1830 inset;
    caret-color: var(--rct-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

.rct-login .custom-control-label {
    color: var(--rct-text-dim);
    font-size: 0.88rem;
    cursor: pointer;
}

.rct-login .custom-control-label::before {
    border-color: var(--rct-line);
    background-color: rgba(6, 16, 31, 0.6);
}

.rct-login .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--rct-teal);
    background-color: var(--rct-teal);
    box-shadow: none;
}

.rct-login .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(0, 194, 178, 0.18);
}

/* Teal carries navy, never white. */
.rct-login .rct-login-submit {
    display: block;
    width: 100%;
    margin-top: 1.6rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 8px;
    background-color: var(--rct-teal);
    color: var(--rct-ground);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rct-login .rct-login-submit:hover,
.rct-login .rct-login-submit:focus {
    background-color: var(--rct-teal-hi);
    box-shadow: 0 10px 28px rgba(0, 194, 178, 0.3);
    outline: none;
}

.rct-login .rct-login-submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.4);
}

.rct-login .rct-login-submit:active {
    transform: translateY(1px);
}

/* Messages: Vuexy's pale panels would be the brightest thing on the page. */
.rct-login .text-danger {
    color: #ff9a9a !important;
}

.rct-login .validation-summary-errors {
    margin-bottom: 1.4rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(234, 84, 85, 0.45);
    border-radius: 8px;
    background-color: rgba(234, 84, 85, 0.12);
    font-size: 0.86rem;
}

.rct-login .validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.rct-login .alert-success {
    margin-bottom: 1.4rem;
    border: 1px solid rgba(0, 194, 178, 0.45);
    border-radius: 8px;
    background-color: rgba(0, 194, 178, 0.12) !important;
    color: #9ff1e9 !important;
    font-size: 0.86rem;
}

.rct-login .alert-success .alert-body {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Narrow screens: the brand column goes and the panel carries the logo
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .rct-login-brand {
        display: none;
    }

    .rct-login-shell {
        justify-content: center;
        gap: 0;
    }

    .rct-login-panel {
        flex: 1 1 auto;
        max-width: 420px;
        margin: 0 auto;
    }

    .rct-login-logo-sm {
        display: block;
    }

    .rct-login-orbit {
        left: 50%;
    }
}

@media (max-width: 575.98px) {
    .rct-login {
        padding: 1.5rem 1rem;
    }

    .rct-login-panel {
        padding: 2rem 1.35rem 1.75rem;
        border-radius: 12px;
    }

    .rct-login-title {
        font-size: 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   Motion: all of the above is decoration, so all of it stops, leaving the
   first frame on screen (with the traces fully lit) rather than a blank page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rct-login-wash::before,
    .rct-login-wash::after,
    .rct-login-grid,
    .rct-login-orbit .rct-ring,
    .rct-login-orbit .rct-satellite,
    .rct-login-traces .rct-pulse,
    .rct-login-traces .rct-glow,
    .rct-login-traces .rct-pad-lit,
    .rct-login-scan {
        animation: none;
    }

    .rct-login-scan {
        display: none;
    }

    .rct-login-traces .rct-pulse,
    .rct-login-traces .rct-glow {
        display: none;
    }

    .rct-login-traces .rct-trace {
        stroke: rgba(0, 194, 178, 0.22);
    }

    .rct-login .rct-login-submit:active {
        transform: none;
    }
}