/* ==========================================================
   NEXARIUM EARTH 2.1
   style.css
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* ==========================================================
   ROOT
========================================================== */

:root{

    --primary:#0ea5e9;
    --primary-dark:#0369a1;
    --primary-light:#38bdf8;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --background:#eef5fb;

    --panel:#ffffff;

    --header:#0f172a;

    --footer:#0f172a;

    --text:#1e293b;

    --text-light:#64748b;

    --border:#dbe4ef;

    --radius:18px;

    --shadow:

        0 8px 25px rgba(0,0,0,.08);

    --header-height:72px;

    --footer-height:52px;

}

/* ==========================================================
   HTML
========================================================== */

html{

    scroll-behavior:smooth;

    height:100%;

}

/* ==========================================================
   BODY
========================================================== */

body{

    height:100vh;

    overflow:hidden;

    background:var(--background);

    color:var(--text);

    font-family:

        Inter,

        Segoe UI,

        Arial,

        sans-serif;

}

/* ==========================================================
   APP
========================================================== */

#app{

    display:flex;

    flex-direction:column;

    height:100vh;

}

/* ==========================================================
   HEADER
========================================================== */

header{

    height:var(--header-height);

    background:var(--header);

    color:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

    border-bottom:4px solid var(--primary);

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo h1{

    font-size:2rem;

    font-weight:800;

    letter-spacing:1px;

}

.logo small{

    color:#cbd5e1;

}

#utc-clock{

    font-size:1.3rem;

    font-weight:bold;

    color:#7dd3fc;

}

/* ==========================================================
   MAIN
========================================================== */

main{

    flex:1;

    display:grid;

    grid-template-columns:

        1fr

        380px;

    overflow:hidden;

}

/* ==========================================================
   MAP
========================================================== */

#map{

    width:100%;

    height:100%;

    background:#dbeafe;

}

/* ==========================================================
   SIDEBAR
========================================================== */

#sidebar{

    background:#f8fbff;

    border-left:1px solid var(--border);

    overflow-y:auto;

    overflow-x:hidden;

    padding:18px;

}

/* ==========================================================
   CARDS
========================================================== */

.card{

    background:var(--panel);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:18px;

    margin-bottom:18px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-2px);

}

.card h2{

    color:var(--primary);

    margin-bottom:12px;

    font-size:1.1rem;

}

.card div{

    line-height:1.7;

    font-size:.98rem;

}

/* ==========================================================
   STATUS
========================================================== */

.status-dot{

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    margin-right:8px;

    animation:pulse 2s infinite;

}

.online{

    color:var(--success);

    font-weight:bold;

}

.offline{

    color:var(--danger);

    font-weight:bold;

}

.loading{

    color:var(--text-light);

    font-style:italic;

}
/* ==========================================================
   NEXARIUM EARTH 2.1
   style.css
   PART 2
========================================================== */


/* ==========================================================
   FOOTER
========================================================== */

footer{

    height:var(--footer-height);

    background:var(--footer);

    color:#cbd5e1;

    display:flex;

    justify-content:center;

    align-items:center;

    border-top:4px solid var(--primary);

    font-size:.95rem;

}



/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--primary-dark);

}



/* ==========================================================
   BUTTONS
========================================================== */

button{

    background:var(--primary);

    color:#ffffff;

    border:none;

    border-radius:12px;

    padding:10px 18px;

    cursor:pointer;

    transition:.25s;

    font-size:.95rem;

    font-weight:600;

}

button:hover{

    background:var(--primary-dark);

}

button:active{

    transform:scale(.97);

}



/* ==========================================================
   INPUTS
========================================================== */

input,

select{

    width:100%;

    padding:12px;

    border-radius:12px;

    border:1px solid var(--border);

    outline:none;

    transition:.25s;

    background:#ffffff;

}

input:focus,

select:focus{

    border-color:var(--primary);

}



/* ==========================================================
   LEAFLET
========================================================== */

.leaflet-container{

    background:#dbeafe;

}



.leaflet-control-zoom{

    border:none !important;

    box-shadow:var(--shadow);

}



.leaflet-control-zoom a{

    width:36px;

    height:36px;

    line-height:36px;

}



.leaflet-control-layers{

    border-radius:14px;

    box-shadow:var(--shadow);

    overflow:hidden;

}



.leaflet-popup-content-wrapper{

    border-radius:14px;

}



.leaflet-popup-content{

    line-height:1.6;

    font-size:.95rem;

}



.leaflet-tooltip{

    border-radius:8px;

}



/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:8px;

}



::-webkit-scrollbar-thumb{

    background:#94a3b8;

    border-radius:10px;

}



::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}



::-webkit-scrollbar-track{

    background:#e2e8f0;

}



/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}



@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* ==========================================================
   CARD EFFECTS
========================================================== */

.card{

    animation:fadeIn .35s ease;

}



.card:hover{

    box-shadow:

        0 12px 30px rgba(0,0,0,.12);

}



/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:999px;

    background:var(--primary);

    color:#ffffff;

    font-size:.75rem;

    font-weight:bold;

}



.badge-success{

    background:var(--success);

}



.badge-warning{

    background:var(--warning);

}



.badge-danger{

    background:var(--danger);

}



/* ==========================================================
   UTILITIES
========================================================== */

.hidden{

    display:none !important;

}



.center{

    display:flex;

    justify-content:center;

    align-items:center;

}



.text-center{

    text-align:center;

}



.text-right{

    text-align:right;

}



.mt-10{

    margin-top:10px;

}



.mt-20{

    margin-top:20px;

}



.mb-10{

    margin-bottom:10px;

}



.mb-20{

    margin-bottom:20px;

}



.round{

    border-radius:999px;

}



.shadow{

    box-shadow:var(--shadow);

}
/* ==========================================================
   NEXARIUM EARTH 2.1
   style.css
   PART 3
========================================================== */


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:1024px){

    main{

        grid-template-columns:1fr;

        grid-template-rows:55vh 45vh;

    }

    #sidebar{

        border-left:none;

        border-top:1px solid var(--border);

        padding:14px;

    }

}



@media (max-width:768px){

    header{

        flex-direction:column;

        justify-content:center;

        align-items:flex-start;

        height:auto;

        padding:14px;

        gap:10px;

    }

    .logo{

        gap:10px;

    }

    .logo h1{

        font-size:1.4rem;

    }

    .logo small{

        font-size:.8rem;

    }

    #utc-clock{

        font-size:1rem;

    }

    main{

        grid-template-columns:1fr;

        grid-template-rows:50vh auto;

    }

    #sidebar{

        padding:12px;

    }

    .card{

        padding:14px;

        margin-bottom:14px;

    }

}



@media (max-width:480px){

    .logo h1{

        font-size:1.15rem;

    }

    .logo small{

        display:none;

    }

    header{

        padding:12px;

    }

    footer{

        font-size:.8rem;

        text-align:center;

        padding:8px;

    }

    .card h2{

        font-size:1rem;

    }

}



/* ==========================================================
   LARGE DISPLAYS
========================================================== */

@media (min-width:1600px){

    #sidebar{

        width:460px;

    }

    .card{

        padding:24px;

    }

    .card h2{

        font-size:1.35rem;

    }

    .card div{

        font-size:1.05rem;

    }

}



@media (min-width:2200px){

    body{

        font-size:18px;

    }

    #sidebar{

        width:520px;

    }

}



/* ==========================================================
   LANDSCAPE PHONES
========================================================== */

@media (max-height:550px){

    header{

        height:60px;

    }

    footer{

        display:none;

    }

    main{

        height:calc(100vh - 60px);

    }

}



/* ==========================================================
   PRINT
========================================================== */

@media print{

    header,

    footer,

    #sidebar{

        display:none;

    }

    #map{

        width:100%;

        height:100vh;

    }

}



/* ==========================================================
   DARK MODE SUPPORT
========================================================== */

@media (prefers-color-scheme:dark){

    :root{

        --background:#0b1220;

        --panel:#111827;

        --text:#ffffff;

        --text-light:#94a3b8;

        --border:#1f2937;

    }

}



/* ==========================================================
   OBS MODE
========================================================== */

body.obs header{

    height:56px;

}

body.obs footer{

    display:none;

}

body.obs main{

    height:calc(100vh - 56px);

}



/* ==========================================================
   FULLSCREEN
========================================================== */

:fullscreen #sidebar{

    background:#ffffff;

}



/* ==========================================================
   LOADING SPINNER
========================================================== */

.spinner{

    width:28px;

    height:28px;

    border:4px solid #dbeafe;

    border-top:4px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}



/* ==========================================================
   FADE CLASSES
========================================================== */

.fade-in{

    animation:fadeIn .4s ease;

}

.fade-out{

    opacity:0;

    transition:.3s;

}



/* ==========================================================
   MAP POPUP TABLE
========================================================== */

.popup-table{

    width:100%;

    border-collapse:collapse;

}

.popup-table td{

    padding:4px 0;

}



/* ==========================================================
   STATUS COLORS
========================================================== */

.live{

    color:#16a34a;

}

.warning{

    color:#f59e0b;

}

.danger{

    color:#dc2626;

}



/* ==========================================================
   END
========================================================== */