/* ===========================
    Google Font
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* ===========================
    Variables
=========================== */

:root{
    --navy:#2F4156;
    --teal:#567C8D;
    --sky:#C8D9E6;
    --beige:#F5EFEB;
    --white:#FFFFFF;
}

/* ===========================
    Reset
=========================== */

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

body{
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:14px;
    background:var(--sky);
    color:var(--navy);
}

/* ===========================
    Layout
=========================== */
.wrapper {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* ===========================
    Sidebar
=========================== */
.sidebar {
    background: var(--navy);
    color: white;
    padding: 25px;
    height: 100vh;
    overflow: hidden;
}

.logo{
    margin-bottom:40px;
}

.site-logo{
    display:block;
    width:52px;
    height:auto;
    max-height:52px;
    object-fit:contain;
    object-position:left center;
}
.sidebar{position:relative;transition:padding .2s ease,transform .2s ease}
.navbar-heading{display:flex;align-items:center;gap:12px;min-width:0}
.sidebar-toggle{position:relative;display:inline-grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid var(--sky);border-radius:8px;background:var(--beige);color:var(--navy);font-size:15px;cursor:pointer;transition:.2s ease}
.sidebar-toggle:hover,.sidebar-toggle:focus-visible{background:var(--teal);border-color:var(--teal);color:#fff;outline:none}
.wrapper.sidebar-collapsed{grid-template-columns:82px minmax(0,1fr)}
.wrapper.sidebar-collapsed .sidebar{padding-left:14px;padding-right:14px}
.wrapper.sidebar-collapsed .sidebar .logo-brand h2,.wrapper.sidebar-collapsed .sidebar .logo p,.wrapper.sidebar-collapsed .sidebar .menu a:not(i),.wrapper.sidebar-collapsed .sidebar .admin-brand div,.wrapper.sidebar-collapsed .sidebar .admin-nav-label,.wrapper.sidebar-collapsed .sidebar .admin-menu a,.wrapper.sidebar-collapsed .sidebar .admin-sign-out,.wrapper.sidebar-collapsed .sidebar-menu span,.wrapper.sidebar-collapsed .sidebar-menu .menu-title{font-size:0}
.wrapper.sidebar-collapsed .sidebar .menu a,.wrapper.sidebar-collapsed .sidebar .admin-menu a,.wrapper.sidebar-collapsed .sidebar .admin-sign-out,.wrapper.sidebar-collapsed .sidebar-menu a{justify-content:center;gap:0}
.wrapper.sidebar-collapsed .sidebar i{font-size:15px}
.wrapper.sidebar-collapsed .site-logo,.wrapper.sidebar-collapsed .admin-brand-mark{width:38px}
.wrapper.sidebar-collapsed .admin-brand{justify-content:center;padding-left:0;padding-right:0}
.wrapper.sidebar-collapsed .admin-brand > div{display:none}
@media(max-width:768px){
 .wrapper,.wrapper.sidebar-collapsed{display:block;height:auto;min-height:100vh;overflow:visible}
 .sidebar,.admin-sidebar{position:fixed;z-index:1000;inset:0 auto 0 0;width:270px;transform:translateX(0);overflow-y:auto}
 .wrapper.sidebar-collapsed .sidebar{transform:translateX(-100%)}
 .wrapper:not(.sidebar-collapsed)::after{content:"";position:fixed;z-index:950;inset:0;background:rgba(47,65,86,.4)}
 .wrapper:not(.sidebar-collapsed) .sidebar{z-index:1000}
 .navbar .sidebar-toggle,.admin-navbar .sidebar-toggle{z-index:1100}
 .main{height:auto;min-height:100vh;overflow:visible}
 .navbar,.admin-navbar{position:sticky;top:0;z-index:900;padding:0 16px}
 .content,.admin-content{padding:18px 14px}
 .page-title{font-size:17px}
 .map-layout{grid-template-columns:1fr!important}
 #fullMap,#userMap{height:55vh!important;min-height:360px}
 .table-wrapper,.admin-table-wrap{overflow-x:auto}
}

.logo-brand{display:flex;align-items:center;gap:10px;}
.logo-brand h2{font-size:20px;font-weight:600;color:var(--white);}

.logo p{
    font-size:13px;
    opacity:.8;
}

.menu{
    list-style:none;
}

.menu li{
    margin-bottom:8px;
}

.menu a{
    display:flex;
    align-items:center;
    gap:12px;
    color:white;
    text-decoration:none;
    padding:14px 16px;
    border-radius:10px;
    font-size:14px;
    transition:.3s;
}

.menu a:hover{
    background:var(--teal);
}

.active a{
    background:var(--teal);
}

/* ===========================
    Main
=========================== */
.main {
    display: grid;
    grid-template-rows: 70px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow: hidden;
}

/* ===========================
    Navbar
=========================== */

.navbar{
    background:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    box-shadow:0 3px 12px rgba(47,65,86,.08);
}

.page-title{
    font-size:21px;
    font-weight:600;
}

.login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    background:var(--teal);
    color:#fff;
    text-decoration:none;   /* ← removes underline */
    border-radius:8px;
    font-size:13px;
    transition:.3s;
}

.login-btn:hover{
    background:var(--navy);
    color:#fff;
    text-decoration:none;   /* ← keep no underline on hover */
}

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

.content {
    position: relative;
    padding: 30px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* =========================
    Page Loader
========================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--beige);
    transition: opacity .4s ease,
                visibility .4s ease;
}

.page-loader.show {
    display: flex;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.loader-content h2 {
    color: var(--navy);
    font-size: 28px;
}

.loader-content p {
    color: var(--teal);
    font-size: 13px;
}

.loader-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid var(--sky);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: loaderSpin .8s linear infinite;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Keep Leaflet below the content loader */

#map{
    position: relative;
    z-index: 1;
}

.leaflet-container{
    z-index: 1 !important;
}

.leaflet-pane{
    z-index: 2 !important;
}

.leaflet-control{
    z-index: 3 !important;
}
.aerocloud-center-control{border:0!important;box-shadow:0 3px 10px rgba(47,65,86,.22)!important}
.aerocloud-center-button{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:0;border-radius:4px;background:#fff;color:var(--navy);font:600 11px 'Poppins',sans-serif;cursor:pointer}
.aerocloud-center-button:hover,.aerocloud-center-button:focus-visible{background:var(--teal);color:#fff;outline:none}
.aerocloud-center-button i{font-size:13px}
@media(max-width:600px){.aerocloud-center-button{width:34px;padding:0;justify-content:center}.aerocloud-center-button span{display:none}}

/* Content Loader */

.content-loader{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(245,239,235,.90);
    z-index:20;
}

.loader-logo{
    width:105px;
    height:auto;
    max-height:72px;
    object-fit:contain;
}

.content-loader.active{
    display:flex;
}

.content-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.content-loader-box p {
    color: var(--teal);
    font-size: 13px;
}

/* Contact modal shared by global and registered-user contact pages. */
body.modal-open{overflow:hidden}.contact-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(47,65,86,.55)}.contact-modal[hidden]{display:none}.contact-modal-dialog{position:relative;width:min(100%,520px);padding:28px;border-radius:14px;background:var(--white);box-shadow:0 18px 50px rgba(0,0,0,.25)}.contact-modal-dialog h2{color:var(--navy);font-size:21px}.contact-modal-dialog p{margin:5px 0 18px;color:var(--teal);font-size:12px}.contact-modal-close{position:absolute;top:14px;right:14px;border:0;background:none;color:var(--teal);font-size:20px;cursor:pointer}.contact-form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}.contact-form-field label{color:var(--navy);font-size:12px;font-weight:600}.contact-form-field input,.contact-form-field textarea{padding:10px;border:1px solid var(--sky);border-radius:8px;background:var(--beige);font:12px 'Poppins',sans-serif;color:var(--navy)}.contact-form-field textarea{min-height:100px;resize:vertical}.contact-form-status{min-height:18px;margin-top:10px;color:var(--teal);font-size:12px}

/* Shared station-map fallback for global and registered-user interfaces. */
.map-fallback{position:relative;overflow:hidden;background:linear-gradient(135deg,#dce9e9,#b8cddd);isolation:isolate}.map-fallback-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(86,124,141,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(86,124,141,.2) 1px,transparent 1px);background-size:42px 42px;transform:skewY(-8deg) scale(1.25);z-index:-1}.map-fallback-label{position:absolute;top:18px;left:18px;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.88);font-size:12px;font-weight:600;color:var(--navy)}.map-fallback-marker{position:absolute;top:46%;left:51%;display:flex;align-items:center;gap:8px;color:#b64040;transform:translate(-50%,-50%)}.map-fallback-marker i{font-size:37px;filter:drop-shadow(0 2px 2px rgba(47,65,86,.25))}.map-fallback-marker span{padding:7px 9px;border-radius:7px;background:var(--white);box-shadow:0 3px 10px rgba(47,65,86,.15);font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap}.map-fallback-note{position:absolute;right:14px;bottom:12px;left:14px;margin:0;padding:7px 9px;border-radius:7px;background:rgba(245,239,235,.9);font-size:10px;color:var(--teal)}