/* ============================================================
 SERVER 2003 INSTALL ANIMATION STYLES
 Visuals for the four install phases. Everything is positioned
 fixed at the viewport root and sits above the supervisor
 taskbar so the illusion of kiosk tear-down lands fully.
 ============================================================ */

body.srv2003-installing {
    overflow: hidden;
}

body.srv2003-installing #suTaskbar,
body.srv2003-installing #suStartMenu {
    display: none !important;
}

.srv2003-install {
    position: fixed;
    inset: 0;
    z-index: 99999;
    font-family: "Tahoma", "Verdana", sans-serif;
}

/* ------------------------------------------------------------
 Phase 1: text-mode blue setup screen
 ------------------------------------------------------------ */
.srv-blue-screen {
    width: 100%;
    height: 100%;
    background: #0000a8;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
}

.srv-blue-header {
    background: #a8a8a8;
    color: #000000;
    text-align: center;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.srv-blue-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.srv-blue-title {
    font-size: 18px;
    margin-bottom: 12px;
    color: #ffffff;
    max-width: 680px;
}

.srv-blue-sub {
    font-size: 14px;
    color: #c8c8c8;
    margin-bottom: 36px;
    max-width: 600px;
    min-height: 1.5em;
}

.srv-blue-bar {
    width: 480px;
    max-width: 80vw;
    height: 18px;
    border: 1px solid #ffffff;
    background: transparent;
    padding: 2px;
    box-sizing: content-box;
}

.srv-blue-bar span {
    display: block;
    height: 100%;
    background: #ffffff;
    width: 0;
    transition: width 600ms ease;
}

.srv-blue-footer {
    background: #a8a8a8;
    color: #000000;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
}

/* ------------------------------------------------------------
 Phase 2: reboot-to-GUI black flash
 ------------------------------------------------------------ */
.srv-black-screen {
    width: 100%;
    height: 100%;
    background: #000000;
    animation: srv-black-flicker 950ms steps(6, end) forwards;
}

@keyframes srv-black-flicker {
    0% {
        background: #0000a8;
    }

    10% {
        background: #000000;
    }

    40% {
        background: #101020;
    }

    70% {
        background: #000000;
    }

    100% {
        background: #000000;
    }
}

/* ------------------------------------------------------------
 Phase 3: GUI install
 The real Server 2003 setup uses a silver/teal gradient on the
 left rail with a centered content panel on the right. We
 approximate that faithfully without copying the exact hero
 graphics.
 ------------------------------------------------------------ */
.srv-gui-screen {
    width: 100%;
    height: 100%;
    /* Body is a vertical gradient from medium gunmetal at top to a
       darker steel-blue at bottom, matches the real Server 2003 setup
       wallpaper that runs behind the wizard frames. */
    background: linear-gradient(180deg, #7e8a96 0%, #5c6772 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
}

.srv-gui-titlebar {
    /* Real setup has a thin dark-blue top bar with the Microsoft
       Windows wordmark and flag pinned to the left. */
    background: linear-gradient(180deg, #4a5666 0%, #2a3340 100%);
    color: #ffffff;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    flex-shrink: 0;
    border-bottom: 1px solid #1a2028;
}

.srv-gui-title {
    flex: 1;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    font-style: italic;
    font-size: 14px;
}

.srv-gui-body {
    flex: 1;
    display: flex;
    min-height: 0;
    background: transparent;
}

.srv-gui-left {
    width: 200px;
    flex-shrink: 0;
    /* Darker steel-blue sidebar, matches the real setup. */
    background: linear-gradient(180deg, #4a5666 0%, #5c6772 100%);
    color: #ffffff;
    padding: 26px 18px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2a3340;
}

.srv-gui-left-head {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
    color: #ffffff;
    letter-spacing: 0;
}

.srv-gui-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    font-size: 12px;
    line-height: 1.75;
}

.srv-gui-steps li {
    padding-left: 24px;
    position: relative;
    color: #b8c4d0;
    margin-bottom: 4px;
}

.srv-gui-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #4a5666;
    box-sizing: border-box;
}

.srv-gui-steps li.done {
    color: #ffffff;
}

.srv-gui-steps li.done::before {
    /* Real setup uses a saturated green for completed steps. */
    background: #1aa84a;
    border-color: #0e6a2a;
}

.srv-gui-steps li.current {
    color: #f7a021;
    font-weight: 700;
}

.srv-gui-steps li.current::before {
    /* Current step is the same orange as the text. */
    background: #f7a021;
    border-color: #b06a08;
    animation: srv-gui-pulse 1.3s ease-in-out infinite;
}

@keyframes srv-gui-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

.srv-gui-eta {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: 14px;
}

.srv-gui-eta-label {
    font-size: 11px;
    color: #d8dde2;
}

.srv-gui-eta-value {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 3px;
}

.srv-gui-right {
    flex: 1;
    padding: 32px 40px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Right pane uses the same gunmetal gradient as the body so the
       wizard frame blends seamlessly. */
    background: transparent;
    color: #ffffff;
}

.srv-gui-banner {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
    line-height: 1.15;
}

.srv-gui-banner-sub {
    font-size: 12px;
    color: #ffffff;
    margin: 0 0 22px;
    line-height: 1.5;
    max-width: 560px;
}

.srv-gui-log-wrap {
    flex: 1;
    /* Log panel sits darker than the body gradient with a subtle inset
       so it reads as a sunken text-mode console. */
    background: #2c343e;
    color: #c0c8d0;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid #1a2028;
    box-shadow:
        inset 1px 1px 0 #1a2028,
        inset -1px -1px 0 #4a5666;
}

.srv-gui-log {
    height: 100%;
    overflow-y: auto;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 11.5px;
    color: #c0c8d0;
    line-height: 1.5;
}

.srv-gui-log-row {
    padding: 1px 0;
    animation: srv-gui-log-in 200ms ease;
}

@keyframes srv-gui-log-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.srv-gui-snapshot {
    margin-top: 14px;
    font-size: 11.5px;
    color: #d8dde2;
}

.srv-gui-snapshot strong {
    color: #ffd34d;
}

/* Real Windows Setup progress bar at the bottom of the GUI install
   pane. Classic gray strip with a centered status line and a thin
   beveled trough that fills from left to right. */
.srv-gui-progress-area {
    background: #d4d0c8;
    border-top: 1px solid #ffffff;
    box-shadow: 0 -1px 0 #808080, 0 -2px 0 #404040;
    padding: 10px 16px 14px;
    flex-shrink: 0;
    color: #000000;
    font-family: "Tahoma", "MS Sans Serif", sans-serif;
}
.srv-gui-progress-label {
    font-size: 11px;
    margin-bottom: 8px;
}
.srv-gui-progress-bar {
    height: 16px;
    background: #ffffff;
    box-shadow:
        inset 1px 1px 0 #404040,
        inset -1px -1px 0 #ffffff,
        inset 2px 2px 0 #808080,
        inset -2px -2px 0 #d4d0c8;
    padding: 1px;
}
.srv-gui-progress-fill {
    height: 100%;
    background: #0a246a;
    width: 0;
    transition: width 600ms ease;
}

/* ------------------------------------------------------------
 Phase 4: First boot splash
 ------------------------------------------------------------ */
.srv-firstboot {
    width: 100%;
    height: 100%;
    background: #000000;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-family: "Tahoma", "Verdana", sans-serif;
}

.srv-firstboot-logo {
    display: flex;
    align-items: center;
    gap: 22px;
    animation: srv-firstboot-fade 600ms ease;
}

@keyframes srv-firstboot-fade {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.srv-firstboot-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.1));
}
.srv-firstboot-flag svg { display: block; }

.srv-firstboot-wordmark {
    line-height: 1;
}

.srv-firstboot-big {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.srv-firstboot-big sup {
    font-size: 0.45em;
    vertical-align: super;
}

.srv-firstboot-small {
    font-size: 28px;
    font-weight: 400;
    color: #dcdcdc;
    margin-top: 2px;
}

.srv-firstboot-small strong {
    font-weight: 700;
    color: #ffffff;
}

.srv-firstboot-edition {
    font-size: 13px;
    color: #8d8d8d;
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.srv-firstboot-status {
    font-size: 13px;
    color: #c8c8c8;
    margin-top: 10px;
}

.srv-firstboot-bar {
    width: 280px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.srv-firstboot-bar span {
    display: block;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    animation: srv-firstboot-slide 1.4s linear infinite;
}

@keyframes srv-firstboot-slide {
    0% {
        transform: translateX(-80%);
    }

    100% {
        transform: translateX(330%);
    }
}

.srv-firstboot-copy {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: #707070;
}

/* Microsoft Windows wordmark in the setup title bar, italic-looking
   sans-serif "Windows" next to the flag, with the actual setup title
   trailing on the right. Matches real Server 2003 setup screenshots. */
.srv-gui-flag {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
}
.srv-gui-flag svg {
    width: 18px;
    height: 18px;
    display: block;
}