/* LAB021 Back Office - Windows 95 Classic Style */

:root {
    /* Windows 95 Authentic Colors */
    --win-bg: #c0c0c0;
    --win-bg-dark: #a0a0a0;
    --win-border-light: #ffffff;
    --win-border-mid: #dfdfdf;
    --win-border-dark: #808080;
    --win-border-darker: #000000;

    /* Title Bar */
    --title-active: linear-gradient(90deg, #000080 0%, #1084d0 100%);
    --title-text: #ffffff;

    /* Accent */
    --accent: #000080;
    --text-primary: #000000;
    --text-secondary: #808080;
    --input-bg: #ffffff;
    --success: #008000;
    --error: #ff0000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #008080;
    font-family: 'Noto Sans KR', 'MS Sans Serif', Tahoma, sans-serif;
    user-select: none;
}

/* Canvas Background */
#world {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ========================================
   SLOGAN BANNER
   ======================================== */
.slogan-banner {
    position: absolute;
    top: 16px;
    left: 182px;
    z-index: 100;

    width: 170px;
    height: 80px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid rgba(255, 0, 128, 0.6);
    box-shadow:
        0 0 8px rgba(255, 0, 128, 0.4),
        0 0 20px rgba(255, 0, 128, 0.2),
        inset 0 0 15px rgba(0, 0, 0, 0.5);
    animation: neonFlicker 3s ease-in-out infinite;
}

.slogan-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #ff00ff;
    box-shadow:
        0 0 4px #ff00ff,
        0 0 8px rgba(255, 0, 255, 0.5);
    animation: cornerPulse 1.5s ease-in-out infinite;
}

.slogan-corner-tl { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.slogan-corner-tr { top: 4px; right: 4px; border-width: 1px 1px 0 0; }
.slogan-corner-bl { bottom: 4px; left: 4px; border-width: 0 0 1px 1px; }
.slogan-corner-br { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

.slogan-corner-tl, .slogan-corner-br { animation-delay: 0s; }
.slogan-corner-tr, .slogan-corner-bl { animation-delay: 0.75s; }

@keyframes cornerPulse {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 3px #ff00ff;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 8px #ff00ff, 0 0 12px rgba(255, 0, 255, 0.6);
    }
}

.slogan-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255, 0, 128, 0.05) 0%,
        rgba(0, 255, 255, 0.05) 50%,
        rgba(255, 0, 128, 0.05) 100%);
    border-radius: 6px;
    z-index: -1;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes neonFlicker {
    0%, 100% {
        border-color: rgba(255, 0, 128, 0.6);
        box-shadow:
            0 0 8px rgba(255, 0, 128, 0.4),
            0 0 20px rgba(255, 0, 128, 0.2),
            inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
    50% {
        border-color: rgba(0, 255, 255, 0.6);
        box-shadow:
            0 0 10px rgba(0, 255, 255, 0.5),
            0 0 25px rgba(0, 255, 255, 0.3),
            inset 0 0 15px rgba(0, 0, 0, 0.5);
    }
}

@keyframes gradientShift {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.slogan-logo {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #00ffff;
    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px rgba(0, 255, 255, 0.5),
        0 0 40px rgba(0, 255, 255, 0.3);
    margin-bottom: 4px;
    animation: textNeon 2s ease-in-out infinite;
    letter-spacing: 2px;
}

.slogan-text {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #ff80bf;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 5px rgba(255, 128, 191, 0.8),
        0 0 10px rgba(255, 0, 128, 0.4);
    animation: textPulse 3s ease-in-out infinite;
}

.slogan-leds {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.led {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00ff00;
    box-shadow:
        0 0 3px #00ff00,
        0 0 6px rgba(0, 255, 0, 0.6);
    animation: ledBlink 1s ease-in-out infinite;
}

.led-1 { animation-delay: 0s; }
.led-2 { animation-delay: 0.25s; }
.led-3 { animation-delay: 0.5s; }
.led-4 { animation-delay: 0.75s; }

@keyframes textNeon {
    0%, 100% {
        text-shadow:
            0 0 5px #00ffff,
            0 0 10px #00ffff,
            0 0 20px rgba(0, 255, 255, 0.5);
        opacity: 1;
    }
    50% {
        text-shadow:
            0 0 8px #00ffff,
            0 0 15px #00ffff,
            0 0 30px rgba(0, 255, 255, 0.7),
            0 0 50px rgba(0, 255, 255, 0.4);
        opacity: 0.95;
    }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
}

@keyframes textPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes ledBlink {
    0%, 100% {
        opacity: 0.4;
        box-shadow: 0 0 2px #00ff00;
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 4px #00ff00,
            0 0 8px rgba(0, 255, 0, 0.8);
    }
}

/* ========================================
   LOGIN WINDOW - Windows 95 Style
   ======================================== */
.login-overlay {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 100;

    width: 340px;
    background: var(--win-bg);

    /* Windows 95 3D Border */
    border: 2px solid;
    border-color: var(--win-border-light) var(--win-border-darker) var(--win-border-darker) var(--win-border-light);
    box-shadow:
        inset 1px 1px 0 var(--win-border-mid),
        inset -1px -1px 0 var(--win-border-dark),
        2px 2px 8px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;
}

/* Title Bar */
.title-bar {
    background: var(--title-active);
    color: var(--title-text);
    padding: 3px 4px;
    font-family: 'Press Start 2P', 'MS Sans Serif', monospace;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    height: 22px;
}

.title-bar span {
    padding-left: 2px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.title-bar:active {
    cursor: grabbing;
}

.title-bar-controls {
    display: flex;
    gap: 2px;
    margin-top: -2px;
}

.btn-control, .btn-close {
    width: 16px;
    height: 14px;
    background: var(--win-bg);
    border: 2px solid;
    border-color: var(--win-border-light) var(--win-border-darker) var(--win-border-darker) var(--win-border-light);
    font-size: 11px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 2px;
}

.btn-control:active, .btn-close:active {
    border-color: var(--win-border-darker) var(--win-border-light) var(--win-border-light) var(--win-border-darker);
    padding: 1px 0 0 1px;
}

.btn-close:hover {
    background: #c0c0c0;
}

/* Form Content */
.form-content {
    padding: 16px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--win-bg);
}

/* Brand Area */
.form-content header {
    text-align: center;
    padding: 8px 0 4px 0;
    border-bottom: 1px solid var(--win-border-dark);
    margin-bottom: 4px;
}

.brand {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 6px;
}

.brand-sub {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: normal;
}

/* ========================================
   MICROSOFT 365 LOGIN BUTTON
   ======================================== */
.ms-login-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.ms-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    background: #2f2f2f;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Noto Sans KR', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid;
    border-color: var(--win-border-light) var(--win-border-darker) var(--win-border-darker) var(--win-border-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ms-login-btn:hover {
    background: #404040;
    box-shadow: 0 0 20px rgba(0, 120, 212, 0.5), 0 0 40px rgba(0, 120, 212, 0.3);
    transform: translateY(-1px);
}

.ms-login-btn:active {
    border-color: var(--win-border-darker) var(--win-border-light) var(--win-border-light) var(--win-border-darker);
    padding: 13px 19px 11px 21px;
}

.ms-logo {
    width: 21px;
    height: 21px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.ms-logo-square {
    width: 9px;
    height: 9px;
}

.ms-logo-square.red { background: #f25022; }
.ms-logo-square.green { background: #7fba00; }
.ms-logo-square.blue { background: #00a4ef; }
.ms-logo-square.yellow { background: #ffb900; }

.login-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'Noto Sans KR', sans-serif;
}

/* Error Message */
.error-message {
    background: #fff0f0;
    border: 1px solid var(--error);
    padding: 8px 12px;
    font-size: 11px;
    color: var(--error);
    text-align: center;
}

/* ========================================
   UI STATUS PANEL
   ======================================== */
.ui-panel {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 100;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif;
}

.ui-panel-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ui-panel-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ui-panel-icon {
    font-size: 14px;
}

.ui-panel-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
}

/* Tip Text */
.tip {
    position: absolute;
    bottom: 16px;
    right: 24px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    z-index: 50;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.4s ease-in-out;
}

/* Responsive */
@media (max-width: 500px) {
    .login-overlay {
        right: 16px;
        left: 16px;
        width: auto;
        max-width: 340px;
    }

    .form-content {
        padding: 14px 16px 18px 16px;
    }

    .brand {
        font-size: 16px;
    }

    .slogan-banner {
        left: 16px;
        top: auto;
        bottom: 80px;
    }

    .tip {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}