/* ============================================================
   GAMIN - Server Control Center
   Complete CSS (original + additions merged)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---------- Variables ---------- */

:root{
    --bg:#0b1017;
    --surface:#161b22;
    --surface2:#1d232c;
    --border:#2d333b;
    --text:#f0f6fc;
    --muted:#8b949e;
    --blue:#58a6ff;
    --green:#3fb950;
    --yellow:#d29922;
    --red:#f85149;
    --radius:18px;
    --shadow:0 15px 35px rgba(0,0,0,.30);
    --transition:.25s ease;
}

/* ---------- Reset ---------- */

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

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#10151d; }
::-webkit-scrollbar-thumb{ background:#2d333b; border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:#58a6ff; }

/* ---------- Links ---------- */

a{ color:inherit; text-decoration:none; }

/* ============================================================
   Boot Screen
============================================================ */

#bootScreen{
    position:fixed;
    inset:0;
    background:#090d13;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:.8s;
}

.bootLogo{ text-align:center; }

.bootLogo h1{
    font-size:70px;
    font-weight:800;
    letter-spacing:8px;
    color:white;
}

.bootLogo p{
    margin-top:15px;
    color:var(--muted);
    font-size:18px;
}

/* ============================================================
   App
============================================================ */

#app{
    opacity:0;
    transition:.6s;
}

/* ============================================================
   Container
============================================================ */

main{
    width:min(1500px,94%);
    margin:auto;
}

/* ============================================================
   Header
============================================================ */

header{
    width:min(1500px,94%);
    margin:35px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo h1{
    font-size:38px;
    font-weight:800;
}

.logo i{
    color:var(--blue);
    margin-right:10px;
}

.logo span{
    display:block;
    margin-top:8px;
    color:var(--muted);
}

.headerRight{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}

.serviceStatus{
    display:flex;
    gap:15px;
}

#clock{
    font-size:18px;
    font-weight:700;
}

/* ============================================================
   Card Grid
============================================================ */

.cardGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* ============================================================
   Generic Card
============================================================ */

.card{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:35px;
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:var(--transition);
    min-height:270px;
}

.hardware{
    grid-column:1 / -1;
    cursor:default;
}

/* ============================================================
   Orb
============================================================ */

.orb{
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    right:-35px;
    top:-35px;
    filter:blur(40px);
    opacity:.18;
    transition:.4s;
}

.minecraftOrb{ background:#58a6ff; }
.dockerOrb{    background:#00d4ff; }
.cockpitOrb{   background:#ff9d00; }
.hardwareOrb{  background:#3fb950; }
.infoOrb{      background:#a371f7; }

/* ============================================================
   Card Content
============================================================ */

.icon{
    position:relative;
    font-size:64px;
    margin-bottom:25px;
    transition:.3s;
}

.card h2{
    font-size:28px;
    margin-bottom:12px;
}

.card p{
    color:var(--muted);
    line-height:1.6;
    font-size:15px;
}

.button{
    display:inline-flex;
    align-items:center;
    margin-top:35px;
    color:var(--blue);
    font-weight:700;
    transition:.25s;
}

/* ============================================================
   Card Hover
============================================================ */

.card:hover{
    transform:translateY(-8px);
    border-color:var(--blue);
    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 30px rgba(88,166,255,.18);
}

.card:active{
    transform:translateY(2px) scale(.985);
}

.card:hover .orb{
    opacity:.35;
    transform:scale(1.35);
}

.card:hover .icon{
    transform:scale(1.12) rotate(-4deg);
}

.card h2{ transition:.25s; }
.card:hover h2{ color:var(--blue); }

.card p{ transition:.25s; }
.card:hover p{ color:#c9d1d9; }

.button{
    position:relative;
    overflow:hidden;
}

.button::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:0;
    height:2px;
    background:var(--blue);
    transition:.25s;
}

.card:hover .button{
    letter-spacing:.5px;
    transform:translateX(8px);
}

.card:hover .button::after{ width:100%; }

/* ============================================================
   Floating Animation
============================================================ */

@keyframes float{
    0%{   transform:translateY(0);    }
    50%{  transform:translateY(-6px); }
    100%{ transform:translateY(0);    }
}

.minecraft .icon{ animation:float 5s   ease-in-out infinite; }
.portainer .icon{ animation:float 5.5s ease-in-out infinite; }
.cockpit   .icon{ animation:float 6s   ease-in-out infinite; }
.hardware  .icon{ animation:float 6.5s ease-in-out infinite; }

/* ============================================================
   Shine Effect
============================================================ */

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.07),transparent);
    transition:.8s;
}

.card:hover::before{ left:140%; }

/* ============================================================
   Colored Top Border
============================================================ */

.minecraft{ border-top:4px solid #58a6ff; }
.portainer{ border-top:4px solid #00d4ff; }
.cockpit{   border-top:4px solid #ff9800; }
.hardware{  border-top:4px solid #3fb950; }

/* ============================================================
   Glass Highlight
============================================================ */

.card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 35%);
    pointer-events:none;
}

/* ============================================================
   Cursor
============================================================ */

.minecraft,
.portainer,
.cockpit{ cursor:pointer; }

/* ============================================================
   Hardware Monitor
============================================================ */

.hardware{
    display:flex;
    flex-direction:column;
    min-height:500px;
}

.hardware .icon{ margin-bottom:20px; }
.hardware h2{   margin-bottom:30px; }

/* ---------- Stat Row ---------- */

.stat{
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:15px;
    margin-bottom:22px;
}

.stat:last-child{ margin-bottom:0; }

.stat span{
    color:var(--muted);
    font-size:14px;
    font-weight:500;
}

.stat strong{
    color:var(--text);
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
}

/* ---------- Progress Bar ---------- */

.bar{
    width:100%;
    height:10px;
    background:#0d1117;
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.05);
}

.bar div{
    width:0%;
    height:100%;
    border-radius:999px;
    transition:width .6s ease, background-color .3s ease;
}

#cpuBar{
    background:linear-gradient(90deg,#58a6ff,#4fc3ff);
}

#ramBar{
    background:linear-gradient(90deg,#3fb950,#5bd36d);
}

#diskBar{
    background:linear-gradient(90deg,#d29922,#f0b94c);
}

/* ---------- Temperature ---------- */

#cpuTemp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(88,166,255,.12);
    border:1px solid rgba(88,166,255,.25);
    color:#79c0ff;
}

#uptime{ color:#58a6ff; }

.hardware:hover #cpuTemp{
    background:rgba(88,166,255,.18);
}

/* ---------- Usage Colours (set via JS) ---------- */

.usage-low{
    background:linear-gradient(90deg,#3fb950,#5bd36d) !important;
}

.usage-medium{
    background:linear-gradient(90deg,#d29922,#f0b94c) !important;
}

.usage-high{
    background:linear-gradient(90deg,#f85149,#ff7b72) !important;
}

/* ---------- Value Flash ---------- */

@keyframes valueFlash{
    0%{   transform:scale(1);    }
    50%{  transform:scale(1.08); }
    100%{ transform:scale(1);    }
}

.value-update{ animation:valueFlash .35s ease; }

/* ---------- Bar Glow ---------- */

@keyframes barGlow{
    0%{   filter:brightness(1);    }
    50%{  filter:brightness(1.35); }
    100%{ filter:brightness(1);    }
}

.bar-update{ animation:barGlow .45s ease; }

/* ---------- Hardware Fade-In ---------- */

.hardware .stat{
    opacity:0;
    transform:translateY(15px);
    animation:statFade .5s forwards;
}

.hardware .stat:nth-child(3){ animation-delay:.10s; }
.hardware .stat:nth-child(4){ animation-delay:.18s; }
.hardware .stat:nth-child(5){ animation-delay:.26s; }
.hardware .stat:nth-child(6){ animation-delay:.34s; }
.hardware .stat:nth-child(7){ animation-delay:.42s; }

@keyframes statFade{
    to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   Quick Console
============================================================ */

.console{
    margin-top:50px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* ---------- Console Header ---------- */

.consoleTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 28px;
    border-bottom:1px solid var(--border);
    background:#1b2028;
}

.consoleTop h2{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:24px;
    font-weight:700;
}

.consoleTop i{ color:var(--blue); }

#consoleState{
    position:relative;
    padding-left:18px;
    color:var(--green);
    font-weight:700;
    font-size:14px;
}

#consoleState.connected::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:9px;
    height:9px;
    border-radius:50%;
    background:#3fb950;
    box-shadow:0 0 10px rgba(63,185,80,.6);
}

#consoleState.disconnected{
    color:var(--red);
}

#consoleState.disconnected::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:9px;
    height:9px;
    border-radius:50%;
    background:#f85149;
    box-shadow:0 0 10px rgba(248,81,73,.6);
}

/* ---------- Terminal ---------- */

#consoleLog{
    background:#090d13;
    color:#d7dde5;
    font-family:Consolas,"Cascadia Code",monospace;
    font-size:14px;
    height:420px;
    overflow-y:auto;
    padding:20px;
    line-height:1.7;
}

/* ---------- Console Lines ---------- */

.line{
    margin-bottom:6px;
    white-space:pre-wrap;
    word-break:break-word;
    animation:consoleFade .18s;
}

@keyframes consoleFade{
    from{ opacity:0; transform:translateY(4px); }
    to{   opacity:1; transform:translateY(0);   }
}

.line.info{    color:#9cdcfe; }
.line.warn{    color:#ffd166; }
.line.error{   color:#ff6b6b; }
.line.success{ color:#3fb950; }
.line.player{  color:#b392f0; }
.line.command{ color:#58a6ff; }
.line.chat{    color:#f0f6fc; }

/* ---------- Console Empty ---------- */

.consoleEmpty{
    color:#6e7681;
    text-align:center;
    margin-top:140px;
    font-style:italic;
}

/* ---------- Prompt ---------- */

.prompt{
    color:var(--green);
    margin-right:10px;
}

/* ---------- Blinking Cursor ---------- */

.cursor{
    display:inline-block;
    width:9px;
    height:18px;
    background:#58a6ff;
    animation:blink 1s infinite;
}

@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Console Scrollbar ---------- */

#consoleLog::-webkit-scrollbar{ width:12px; }
#consoleLog::-webkit-scrollbar-track{ background:#090d13; }
#consoleLog::-webkit-scrollbar-thumb{ background:#30363d; border-radius:20px; }
#consoleLog::-webkit-scrollbar-thumb:hover{ background:#58a6ff; }

/* ============================================================
   Command Area
============================================================ */

.command{
    display:flex;
    gap:15px;
    padding:20px;
    border-top:1px solid var(--border);
    background:#11161d;
}

.command input{
    flex:1;
    height:50px;
    background:#0b1017;
    border:1px solid var(--border);
    color:white;
    border-radius:12px;
    padding:0 18px;
    font-size:15px;
    outline:none;
    transition:.25s;
}

.command input:focus{
    border-color:var(--blue);
    box-shadow:0 0 15px rgba(88,166,255,.25);
}

.command button{
    width:145px;
    border:none;
    border-radius:12px;
    background:var(--blue);
    color:white;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.command button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(88,166,255,.35);
}

.command button:active{
    transform:scale(.96);
}

/* ============================================================
   Status Dots
============================================================ */

.statusDot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:8px;
}

.statusDot.green{
    background:#00ff66;
    box-shadow:0 0 8px #00ff66;
}

.statusDot.red{
    background:#ff3333;
    box-shadow:0 0 8px #ff3333;
}

/* ============================================================
   Status Label  (wrapper around dot + text in header)
============================================================ */

.statusLabel{
    display:inline-flex;
    align-items:center;
    font-weight:600;
    font-size:14px;
}

/* ============================================================
   Server Information Card
============================================================ */

.serverInfo{ border-top:4px solid #a371f7; }

.infoOrb{ background:#a371f7; }

.serverInfo .icon{ color:#a371f7; }
.serverInfo:hover .icon{ color:#c297ff; }

.infoList{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:22px;
}

.infoRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:12px 14px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
}

.infoRow span{
    color:var(--muted);
    font-size:14px;
}

.infoRow strong{
    color:var(--text);
    font-size:14px;
    text-align:right;
    word-break:break-word;
}

/* ============================================================
   Admin Login Overlay
============================================================ */

#loginModal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(9,13,19,.82);
    backdrop-filter:blur(8px);
    z-index:100000;
    padding:20px;
}

.loginBox{
    width:min(380px,100%);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:35px;
    box-shadow:var(--shadow);
}

.loginBox h2{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:28px;
    margin-bottom:25px;
}

.loginBox h2 i{ color:var(--blue); }

.loginBox input{
    width:100%;
    height:50px;
    margin-bottom:16px;
    padding:0 15px;
    background:#0d1117;
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font-family:inherit;
    font-size:15px;
    outline:none;
    transition:.25s;
}

.loginBox input:focus{
    border-color:var(--blue);
    box-shadow:0 0 15px rgba(88,166,255,.18);
}

.loginBox input::placeholder{ color:var(--muted); }

/* Autofill fix */
.loginBox input:-webkit-autofill,
.loginBox input:-webkit-autofill:hover,
.loginBox input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    -webkit-box-shadow:0 0 0 1000px #0d1117 inset;
    transition:background-color 9999s ease-in-out 0s;
}

.loginButtons{
    display:flex;
    gap:15px;
    margin-top:5px;
}

.loginButtons button{
    flex:1;
    height:50px;
    border:none;
    border-radius:12px;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

#loginConfirm{
    background:var(--blue);
    color:white;
}

#loginConfirm:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(88,166,255,.35);
}

#loginConfirm:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

#loginCancel{
    background:var(--surface2);
    color:var(--text);
}

#loginCancel:hover{
    background:#30363d;
    transform:translateY(-2px);
}

/* ============================================================
   Admin Button
============================================================ */

.adminButton{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.adminButton i{ color:var(--red); }

.adminButton:hover{
    transform:translateY(-2px);
    border-color:var(--blue);
    box-shadow:0 8px 20px rgba(88,166,255,.18);
}

.adminButton.unlocked{ border-color:var(--green); }
.adminButton.unlocked i{ color:var(--green); }

/* ============================================================
   Toast Notification
============================================================ */

.gamin-notice{
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:200000;
    padding:14px 22px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    box-shadow:0 8px 30px rgba(0,0,0,.4);
    animation:noticeIn .25s ease;
    max-width:320px;
}

@keyframes noticeIn{
    from{ opacity:0; transform:translateY(12px); }
    to{   opacity:1; transform:translateY(0);    }
}

.gamin-notice.success{
    background:#1a3d25;
    border:1px solid var(--green);
    color:var(--green);
}

.gamin-notice.error{
    background:#3d1a1a;
    border:1px solid var(--red);
    color:var(--red);
}

.gamin-notice.warn{
    background:#3d2e0a;
    border:1px solid var(--yellow);
    color:var(--yellow);
}

.gamin-notice.info{
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text);
}

/* ============================================================
   Page Animations
============================================================ */

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(25px); }
    to{   opacity:1; transform:translateY(0);    }
}

header             { animation:fadeUp .5s ease;       }
.card:nth-child(1) { animation:fadeUp .5s .10s both;  }
.card:nth-child(2) { animation:fadeUp .5s .20s both;  }
.card:nth-child(3) { animation:fadeUp .5s .30s both;  }
.card:nth-child(4) { animation:fadeUp .5s .40s both;  }
.console           { animation:fadeUp .6s .55s both;  }

/* ============================================================
   Boot / App Transitions
============================================================ */

#bootScreen.hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

#app.loaded{ opacity:1; }

/* ============================================================
   Background Glow
============================================================ */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 15% 20%,rgba(88,166,255,.08),transparent 30%),
        radial-gradient(circle at 85% 15%,rgba(63,185,80,.05),transparent 30%),
        radial-gradient(circle at 50% 90%,rgba(88,166,255,.05),transparent 35%);
    z-index:-1;
}

@keyframes drift{
    0%{   transform:translateY(0px);   }
    50%{  transform:translateY(-20px); }
    100%{ transform:translateY(0px);   }
}

body::after{
    content:"";
    position:fixed;
    width:700px;
    height:700px;
    right:-250px;
    top:-250px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(88,166,255,.05),transparent 70%);
    animation:drift 18s ease-in-out infinite;
    z-index:-2;
}

/* ============================================================
   Clock
============================================================ */

#clock{
    font-variant-numeric:tabular-nums;
    letter-spacing:1px;
}

/* ============================================================
   Focus Accessibility
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
}

/* ============================================================
   Responsive
============================================================ */

@media(max-width:1200px){
    .cardGrid{ grid-template-columns:1fr; }
}

@media(max-width:900px){
    header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }
    .headerRight{
        width:100%;
        align-items:flex-start;
    }
    .serviceStatus{ flex-wrap:wrap; }
}

@media(max-width:700px){
    .card{ padding:25px; }
    .card h2{ font-size:24px; }
    .icon{ font-size:52px; }
    .consoleTop{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .command{ flex-direction:column; }
    .command button{ width:100%; height:50px; }
}

@media(max-width:500px){
    .logo h1{ font-size:30px; }
    .bootLogo h1{ font-size:48px; }
    .bootLogo p{ font-size:16px; }
    #consoleLog{ height:320px; }
    .infoRow{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .infoRow strong{ text-align:left; }
}

@media(prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
}