/* ============================================================================
 * PlantPulse Edge — login screen style
 * Same tone as the platform's (http://100.68.69.41/) pp-login.css, adapted to the edge environment.
 * ========================================================================= */

/* SUIT default UI font, self-hosted (airgap) — @import must come before all other rules. */
@import url('/public/font/suit.css');

/* JetBrains Mono — primary UI font (Latin/numeric). Korean falls back to Noto. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/public/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/public/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/public/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* reset — `i` is excluded to avoid conflicting with FontAwesome icons (font-family) */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, b, u, em, strong,
form, fieldset, legend, label, input, button,
ul, ol, li, dl, dt, dd, table, tr, th, td,
section, article, header, footer, nav {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
/* Preserve FontAwesome 5 icons — prevents conflict with the reset's font:inherit above.
   Setting a font-family explicitly could override the values FA5 assigns to the .fa/.fas/.far/.fal/.fab/.fad
   classes, so here we only use the approach of excluding i from the reset.
   As an extra safety net, only line-height is set on the fa-style classes. */
i.fa, i.fas, i.far, i.fal, i.fab, i.fad,
.fa, .fas, .far, .fal, .fab, .fad {
    font-style: normal;
    line-height: 1;
}
html, body { width: 100%; height: 100%; }
body {
    line-height: 1.3;
    color: #333;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 16px;
    font-family: 'SUIT', 'Noto Sans KR', 'Noto Sans Korean', -apple-system, BlinkMacSystemFont, sans-serif;
}
input, button {
    border-color: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: #333;
}
input::placeholder {
    font-family: inherit;
    letter-spacing: -1px;
    color: #888;
}

/* login wrapper */
.blind { display: none; }
.login_wrap {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: center / cover no-repeat;
}

/* white skin — white card + soft blue shadow
 * Background: PlantPulse theme (navy → mid blue) diagonal gradient + left/right highlights.
 * The 3 SVG wave layers are a separate layer in the .login_wave container (can be animated). */
.login_wrap.white {
    color: #333;
    background-color: #061830;
    background-image:
        /* Top-left highlight (a little sky) */
        radial-gradient(circle at 18% 12%, rgba(94,191,255,0.18) 0%, rgba(94,191,255,0) 42%),
        /* Bottom-right highlight (a touch of cyan-purple) */
        radial-gradient(circle at 82% 88%, rgba(140,80,200,0.18) 0%, rgba(140,80,200,0) 46%),
        /* A little light in the center — spotlight feel behind the card */
        radial-gradient(ellipse at 50% 35%, rgba(0,61,143,0.55) 0%, rgba(0,61,143,0) 58%),
        /* Main diagonal gradient (dark navy tone) */
        linear-gradient(135deg, #061830 0%, #0a2452 35%, #07182f 75%, #03101f 100%);
    background-attachment: fixed;
}

/* SVG wave container — full screen (orbs float near the top too). z-index lower than the card. */
.login_wave {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.login_wave svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 240%;
    height: 60vh;             /* The svg itself is the bottom 60vh */
    display: block;
}
.login_wave .wv1 { animation: pp-wave-slide 26s ease-in-out infinite;          opacity: 0.55; bottom: 0;     }
.login_wave .wv2 { animation: pp-wave-slide 38s ease-in-out infinite reverse;  opacity: 0.50; bottom: 0;     }
.login_wave .wv3 { animation: pp-wave-slide 50s linear infinite;               opacity: 0.45; bottom: 0;     }
.login_wave .wv4 { animation: pp-wave-slide 18s ease-in-out infinite;          opacity: 0.65; bottom: -10px; }
.login_wave .wv5 { animation: pp-wave-slide 34s linear infinite reverse;       opacity: 0.85; bottom: 0;     }
@keyframes pp-wave-slide {
    0%   { transform: translate3d(0%, 0, 0) scaleY(1);    }
    33%  { transform: translate3d(-15%, -10px, 0) scaleY(1.04); }
    66%  { transform: translate3d(-30%, 6px, 0) scaleY(0.98);   }
    100% { transform: translate3d(0%, 0, 0) scaleY(1);    }
}

/* aurora shimmer — rotating conic-gradient layer (subtly over the whole background) */
.login_aurora {
    position: absolute;
    inset: -25%;
    background:
        conic-gradient(from 0deg at 50% 60%,
            rgba(94,191,255,0.12)  0deg,
            rgba(140,80,200,0.10)  90deg,
            rgba(0,180,200,0.14)   180deg,
            rgba(255,255,255,0.10) 270deg,
            rgba(94,191,255,0.12)  360deg);
    filter: blur(60px);
    animation: pp-aurora-spin 60s linear infinite;
    mix-blend-mode: screen;
    opacity: 0.85;
}
@keyframes pp-aurora-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Floating light orbs — small radial-gradient dots slowly drift + breathe (scale) */
.login_wave .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    animation: pp-orb-pulse 9s ease-in-out infinite, pp-orb-drift 28s linear infinite;
}
.login_wave .orb1 { width: 220px; height: 220px; left: 8%;  top: 12%; background: radial-gradient(circle, rgba(94,191,255,0.55) 0%, rgba(94,191,255,0) 70%); animation-duration: 11s, 32s; animation-delay: 0s, 0s; }
.login_wave .orb2 { width: 320px; height: 320px; left: 70%; top: 22%; background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%); animation-duration: 13s, 40s; animation-delay: -2s, -8s; }
.login_wave .orb3 { width: 180px; height: 180px; left: 35%; top: 8%;  background: radial-gradient(circle, rgba(140,80,200,0.50) 0%, rgba(140,80,200,0) 70%); animation-duration: 9s,  26s; animation-delay: -4s, -4s; }
.login_wave .orb4 { width: 260px; height: 260px; left: 80%; top: 55%; background: radial-gradient(circle, rgba(0,180,200,0.50)  0%, rgba(0,180,200,0)  70%); animation-duration: 14s, 36s; animation-delay: -6s, -12s; }
.login_wave .orb5 { width: 150px; height: 150px; left: 18%; top: 50%; background: radial-gradient(circle, rgba(255,200,120,0.40) 0%, rgba(255,200,120,0) 70%); animation-duration: 10s, 30s; animation-delay: -8s, -16s; }
.login_wave .orb6 { width: 200px; height: 200px; left: 52%; top: 65%; background: radial-gradient(circle, rgba(94,191,255,0.45) 0%, rgba(94,191,255,0) 70%); animation-duration: 12s, 34s; animation-delay: -10s, -20s; }
@keyframes pp-orb-pulse {
    0%, 100% { opacity: 0.30; transform: scale(0.92); }
    50%      { opacity: 0.85; transform: scale(1.15); }
}
@keyframes pp-orb-drift {
    0%   { translate: 0 0; }
    25%  { translate: 40px -30px; }
    50%  { translate: -20px -50px; }
    75%  { translate: -40px 20px; }
    100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login_wave .wv1,
    .login_wave .wv2,
    .login_wave .wv3,
    .login_wave .wv4,
    .login_wave .wv5,
    .login_aurora,
    .login_wave .orb,
    .edge_pc_deco i,
    .edge_pc_dot { animation: none; }
}

/* Edge decoration — bottom-right IIoT gateway box illustration + signal/LED */
.edge_pc_deco {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    pointer-events: none;
    z-index: 5 !important;   /* Above the card (z=2) — prevents being covered. Tone adjusted with opacity */
    user-select: none;
    line-height: 0;
    opacity: 0.92;
}
.edge_gw_svg {
    width: clamp(200px, 22vw, 320px);
    height: auto;
    filter: drop-shadow(0 14px 48px rgba(0, 30, 80, 0.55));
    animation: pp-pc-breathe 6s ease-in-out infinite;
    display: block;
}

/* Signal ripples above the antenna (2, staggered) */
.edge_gw_svg .gw_signal circle {
    transform-origin: center;
    transform-box: fill-box;
    animation: pp-gw-ripple 2.6s ease-out infinite;
}
.edge_gw_svg .gw_signal circle:nth-child(1) { animation-delay: 0s;    }
.edge_gw_svg .gw_signal circle:nth-child(2) { animation-delay: 0.4s;  }
.edge_gw_svg .gw_signal circle:nth-child(3) { animation-delay: 0.8s;  }
.edge_gw_svg .gw_signal2 circle:nth-child(1) { animation-delay: 1.0s;  }
.edge_gw_svg .gw_signal2 circle:nth-child(2) { animation-delay: 1.4s;  }
.edge_gw_svg .gw_signal2 circle:nth-child(3) { animation-delay: 1.8s;  }
@keyframes pp-gw-ripple {
    0%   { transform: scale(0.4); opacity: 0;   }
    20%  {                       opacity: 0.85; }
    100% { transform: scale(2.0); opacity: 0;   }
}

/* Body LED blinking (each at a different period) */
.edge_gw_svg .gw_led       { transform-origin: center; transform-box: fill-box; }
.edge_gw_svg .gw_led--g    { animation: pp-led-blink 1.4s ease-in-out infinite; }
.edge_gw_svg .gw_led--y    { animation: pp-led-blink 2.1s ease-in-out infinite -0.5s; }
.edge_gw_svg .gw_led--b    { animation: pp-led-blink 1.8s ease-in-out infinite -1.0s; }
.edge_gw_svg .gw_led--w    { animation: pp-led-blink 2.4s ease-in-out infinite -1.5s; }

@keyframes pp-pc-breathe {
    0%, 100% { transform: translateY(0)    scale(1);    }
    50%      { transform: translateY(-6px) scale(1.03); }
}
@keyframes pp-led-blink {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1.00; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .edge_gw_svg,
    .edge_gw_svg .gw_signal circle,
    .edge_gw_svg .gw_led { animation: none; }
}

/* Hide the decoration only on small screens (mobile) — prevents covering the card */
@media (max-width: 700px) {
    .edge_pc_deco { display: none; }
}

/* The card sits above the waves — separate z-index */
.login_form { position: absolute; z-index: 2; }
#pg.center { z-index: 3; }

/* Login failure / network error alert box — shown above the inputs. Includes shake animation */
.login_alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    padding: 11px 14px;
    background: #fdecec;
    color: #b82a31;
    border: 1px solid #f5c2c5;
    border-left: 4px solid #c43338;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 2px 6px rgba(196, 51, 56, 0.10);
}
.login_alert i {
    color: #c43338;
    font-size: 14px;
    flex-shrink: 0;
}
.login_alert.shake { animation: pp-shake 0.45s cubic-bezier(.36,.07,.19,.97); }
@keyframes pp-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .login_alert.shake { animation: none; }
}
.login_wrap.white h2 {
    margin: 3.2em auto 1em;
    font-weight: 700;
    text-indent: -99999px;
    width: 240px;
    height: 72px;
    background-size: contain;
    background-image: url(/public/images/img_logo-color.png);
    background-repeat: no-repeat;
}

/* Card */
.login_form {
    width: 420px;
    position: absolute;
}
.login_form.white {
    top: 25vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px;
    box-shadow: 5px 5px 24px rgba(10, 71, 184, 0.3);
    /* The 56px .login_box bar that used to sit here (absolute, bottom:0) is gone - the
       copyright is an in-flow .login_footer inside the fieldset now. Reserving its height
       left an empty band under KOPENS, INC. Card padding only. */
    padding-bottom: 8px;
}

/* Input fields */
.login_fld { padding: 0; border: 0; }
.login_fld.white { padding: 20px 32px; }
.login_fld input {
    margin: 0 0 18px 0;
    width: 100%;
    height: 50px;
    vertical-align: middle;
    border-radius: 10px;
    background-color: #F2F2F2;
    font-weight: 400;        /* Input text bold → normal */
}
.login_fld input[type="text"],
.login_fld input[type="password"] {
    padding: 10px 20px 10px 44px;
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: auto 24px;
}
.login_fld input[name="userId"]   { background-image: url(/public/images/icon_id.png); }
.login_fld input[name="password"] { background-image: url(/public/images/icon_pw.png); }

/* focus highlight */
.login_fld input:focus {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(20, 72, 143, 0.25);
}

/* Auto-login checkbox */
.login_check { margin-top: 8px; font-size: 13px; color: #555; }
.login_check input[type="checkbox"] {
    margin: 3px 6px 3px 0;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.login_check label { vertical-align: middle; cursor: pointer; }

/* Login button */
.login_btn {
    display: block;
    position: relative;
    margin-top: 20px;
    border-radius: 50px;
    width: 100%;
    height: 50px;
    font-size: 1.05rem;
    font-weight: 400;        /* bold → normal (user request) */
    color: #fff;
    background: linear-gradient(120deg, rgb(20 72 143) 0%, rgb(19 63 122) 40%);
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.15s ease;
}
.login_btn:hover {
    box-shadow: 3px 3px 12px rgba(10, 71, 184, 0.5);
}
.login_btn:active { transform: translateY(1px); }

/* Hostname badge (edge only) */
.edge_host_badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    background: #eaf1fa;
    color: #003d8f;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;        /* bold → normal */
    letter-spacing: 0.3px;
}

/* Bottom box (KOPENS copyright, etc.) */
.login_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0 20px 20px;
    width: 100%;
    height: 56px;
    background: #f1f1f1;
    font-size: 12px;
    color: #939393;
}
.login_box a { color: #6b7684; text-decoration: none; }
.login_box a:hover { color: #003d8f; }

/* Loading */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

/* Language toggle (login page). Front-end only - see login-lang.js.
 *
 * A segmented control, not a row of links. Picking a language is ONE choice with one live answer,
 * and a sliding thumb says so: the control moves, rather than two independent things lighting up.
 *
 * Segment count comes from PP_LANGS, never from this file. With two languages it reads as a
 * toggle; a third just adds a segment and the thumb narrows to match. The grid does that on its
 * own - inline-grid with 1fr auto-columns sizes every track to the widest label, which is what
 * keeps the thumb (an equal fraction of the track) aligned under labels of different lengths.
 * Equal-looking segments sized by each label's own width would drift apart the moment a language
 * with a longer name is added. */
.login_lang {
    --pp-lang-n: 2;   /* segment count, set by login-lang.js */
    --pp-lang-i: 0;   /* active index,  set by login-lang.js */
    /* Pinned to the card's top-right corner. Taken OUT of the flow on purpose: in the flow it
       pushed the logo down, and the card's height is what centres the form on the viewport. The
       containing block is .login_form, which is already position:absolute. It also stays the
       containing block for ::before (the thumb), which is why this is positioned at all. */
    position: absolute;
    top: 12px;
    right: 14px;
    margin: 0;
    z-index: 2;
    /* width:max-content keeps it hugging the labels instead of spanning the card. 1fr
       auto-columns still resolve to the widest label under max-content sizing, which is what
       holds the thumb aligned. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    padding: 3px;
    border-radius: 999px;
    background: #eef1f5;
    border: 1px solid #e3e7ed;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}
/* The thumb. translateX is a percentage of the THUMB's own width, so index x 100% lands it
   exactly one segment over - no per-language offsets to keep in sync. */
.login_lang::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--pp-lang-n));
    transform: translateX(calc(var(--pp-lang-i) * 100%));
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 64, .18);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.login_lang_btn {
    position: relative;   /* above the thumb */
    z-index: 1;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 999px;
    color: #79818c;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease;
}
.login_lang_btn:hover { color: #3b4350; }
.login_lang_btn.is-active { color: #123a6b; font-weight: 700; }
.login_lang_btn:focus-visible { outline: 2px solid #1b62c4; outline-offset: 2px; }
/* The thumb IS the state indicator; without motion the colour weight still carries it. */
@media (prefers-reduced-motion: reduce) {
    .login_lang::before { transition: none; }
}