@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/GoogleMap.razor.rz.scp.css */
.map-key[b-n7mkqx5ybx] {
  position: absolute;
  right: 3rem;
  top: 3rem;
  background-color: #eee;
  padding: 0.7rem 0rem;
  border-radius: 20px;

}

  .map-key strong[b-n7mkqx5ybx] {
    text-align: center;
    padding: 0rem 1.5rem;
    border: 0px;
    border-bottom: 1px solid #888;
  }

  

  .map-key span[b-n7mkqx5ybx]{
    border: 1px solid deepskyblue;
    color:deepskyblue;
    padding:0.2rem;
  }

    .map-key span:hover[b-n7mkqx5ybx]{
      color: black;
      background-color: deepskyblue;
    }


.user-list[b-n7mkqx5ybx] {
  display: flex;
  flex-direction: column-reverse;
  max-height: 11rem;
  overflow-y: scroll;
}
  .user-list div[b-n7mkqx5ybx] {
    align-content: center;
    margin: auto .5rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    height: 2.2rem;
    padding-bottom: 0.2rem;
    
  }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-8nza4ir528] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-8nza4ir528] {
    flex: 1;
}

.sidebar[b-8nza4ir528] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-8nza4ir528] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-8nza4ir528]  a, .top-row[b-8nza4ir528]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-8nza4ir528]  a:hover, .top-row[b-8nza4ir528]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-8nza4ir528]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-8nza4ir528] {
        justify-content: space-between;
    }

    .top-row[b-8nza4ir528]  a, .top-row[b-8nza4ir528]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-8nza4ir528] {
        flex-direction: row;
    }

    .sidebar[b-8nza4ir528] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-8nza4ir528] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-8nza4ir528]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-8nza4ir528], article[b-8nza4ir528] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-8nza4ir528] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-8nza4ir528] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-348ysfgnv9] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-348ysfgnv9] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-348ysfgnv9] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-348ysfgnv9] {
    font-size: 1.1rem;
}

.bi[b-348ysfgnv9] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-truck[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-truck' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}

.bi-chat-left[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chat-left' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

.bi-globe-americas[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-globe-americas' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z'/%3E%3C/svg%3E");
}

.bi-funnel[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-funnel' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z'/%3E%3C/svg%3E");
}

.bi-whatsapp[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-whatsapp' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/%3E%3C/svg%3E");
}

.bi-bell[b-348ysfgnv9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bell' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6'/%3E%3C/svg%3E");
}





.nav-item[b-348ysfgnv9] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-348ysfgnv9] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-348ysfgnv9] {
        padding-bottom: 1rem;
    }

    .nav-item[b-348ysfgnv9]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-348ysfgnv9]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-348ysfgnv9]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-348ysfgnv9] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-348ysfgnv9] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-348ysfgnv9] {
        display: none;
    }

    .nav-scrollable[b-348ysfgnv9] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-69ax4s3jom],
.components-reconnect-repeated-attempt-visible[b-69ax4s3jom],
.components-reconnect-failed-visible[b-69ax4s3jom],
.components-pause-visible[b-69ax4s3jom],
.components-resume-failed-visible[b-69ax4s3jom],
.components-rejoining-animation[b-69ax4s3jom] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-retrying[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-failed[b-69ax4s3jom],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-69ax4s3jom] {
    display: block;
}


#components-reconnect-modal[b-69ax4s3jom] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-69ax4s3jom 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-69ax4s3jom 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-69ax4s3jom 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-69ax4s3jom]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-69ax4s3jom 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-69ax4s3jom {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-69ax4s3jom {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-69ax4s3jom {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-69ax4s3jom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-69ax4s3jom] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-69ax4s3jom] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-69ax4s3jom] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-69ax4s3jom] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-69ax4s3jom] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-69ax4s3jom] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-69ax4s3jom 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-69ax4s3jom] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-69ax4s3jom {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Map.razor.rz.scp.css */
/* Home.razor.css */

.home[b-9y80t037kn] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ── LEGEND ── */
.map-legend[b-9y80t037kn] {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 12px;
}

.legend-group[b-9y80t037kn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-title[b-9y80t037kn] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #64748b;
    margin-right: 2px;
}

.legend-divider[b-9y80t037kn] {
    width: 1px;
    height: 20px;
    background: rgba(0,0,0,0.1);
}

.legend-pill[b-9y80t037kn] {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    color: white;
}

.legend-pill--full[b-9y80t037kn] {
    background: #22c55e;
}

.legend-pill--low[b-9y80t037kn] {
    background: #f59e0b;
}

.legend-pill--normal[b-9y80t037kn] {
    background: #088F8F;
}

.legend-pill--avail[b-9y80t037kn] {
    background: #3b82f6 ;    
}

.legend-pill--notavail[b-9y80t037kn] {
    background: #ef4444 !important;
}

/* ── DETAIL PANEL ── */
.map-detail[b-9y80t037kn] {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 270px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-top: 3px solid #3b82f6;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    font-family: 'Inter', sans-serif;
}

    .map-detail[b-9y80t037kn]::-webkit-scrollbar {
        width: 3px;
    }

    .map-detail[b-9y80t037kn]::-webkit-scrollbar-track {
        background: transparent;
    }

    .map-detail[b-9y80t037kn]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 2px;
    }

.map-detail--full[b-9y80t037kn] {
    border-top-color: #22c55e;
}

.map-detail--low[b-9y80t037kn] {
    border-top-color: #f59e0b;
}

.map-detail--empty[b-9y80t037kn] {
    border-top-color: #94a3b8;
}

.map-detail--truck[b-9y80t037kn] {
    border-top-color: #3b82f6;
}

.map-detail__close[b-9y80t037kn] {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

    .map-detail__close:hover[b-9y80t037kn] {
        background: #e2e8f0;
        color: #1e293b;
    }

.map-detail__name[b-9y80t037kn] {
    padding: 16px 40px 4px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.map-detail__pct[b-9y80t037kn] {
    text-align: center;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    padding: 8px 16px;
    color: #1e293b;
}

    .map-detail__pct sup[b-9y80t037kn] {
        font-size: 18px;
        font-weight: 500;
    }

.map-detail__pct--full[b-9y80t037kn] {
    color: #22c55e;
}

.map-detail__pct--low[b-9y80t037kn] {
    color: #f59e0b;
}

.map-detail__pct--empty[b-9y80t037kn] {
    color: #94a3b8;
}

.map-detail__badge[b-9y80t037kn] {
    margin: 0 16px 8px;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
}

.badge--avail[b-9y80t037kn] {
    background: #22c55e;
}

.badge--notavail[b-9y80t037kn] {
    background: #ef4444;
}

.map-detail__rows[b-9y80t037kn] {
    padding: 4px 16px 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.drow[b-9y80t037kn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 11px;
}

    .drow:last-child[b-9y80t037kn] {
        border-bottom: none;
    }

    .drow span:first-child[b-9y80t037kn] {
        color: #94a3b8;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.8px;
        font-weight: 500;
    }

    .drow span:last-child[b-9y80t037kn] {
        font-size: 11px;
        color: #1e293b;
        font-family: 'JetBrains Mono', monospace;
    }

.ok[b-9y80t037kn] {
    color: #22c55e !important;
}

.err[b-9y80t037kn] {
    color: #ef4444 !important;
}

.map-detail__btn[b-9y80t037kn] {
    display: block;
    margin: 0 16px 16px;
    padding: 9px;
    text-align: center;
    border: 1px solid rgba(37,99,235,0.3);
    border-radius: 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

    .map-detail__btn:hover[b-9y80t037kn] {
        background: rgba(37,99,235,0.06);
    }
/* /Components/Pages/Matrix.razor.rz.scp.css */
/* Matrix.razor.css */

.app[b-e19ts1xvg2] {
    --bg: #f0f4f8;
    --card: #ffffff;
    --card2: #f8fafc;
    --bdr: rgba(0,0,0,0.08);
    --bdr2: rgba(0,0,0,0.15);
    --text: #1e293b;
    --muted: #94a3b8;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    min-height: 100vh;
}

/* ── HEADER ── */
.header[b-e19ts1xvg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--bdr);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.header__brand[b-e19ts1xvg2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__title[b-e19ts1xvg2] {
    font-size: 16px;
    font-weight: 700;
    color: black;
}

.header__count[b-e19ts1xvg2] {
    font-size: 12px;
    color: black;
}

/* ── SUMMARY ── */
.summary[b-e19ts1xvg2] {
    display: flex;
    gap: 1px;
    background: var(--bdr);
    border-bottom: 1px solid var(--bdr);
}

.summary-card[b-e19ts1xvg2] {
    flex: 1;
    padding: 16px 20px;
    cursor: pointer;
    position: relative;
    background: #ffffff;
    transition: background 0.15s;
    user-select: none;
}

    .summary-card:hover[b-e19ts1xvg2] {
        background: #f8fafc;
    }

.summary-card--active[b-e19ts1xvg2] {
    background: #f1f5f9;
}

.summary-card[b-e19ts1xvg2]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.summary-card:hover[b-e19ts1xvg2]::after,
.summary-card--active[b-e19ts1xvg2]::after {
    opacity: 1;
}

.summary-card--all[b-e19ts1xvg2]::after {
    background: #64748b;
}

.summary-card--full[b-e19ts1xvg2]::after {
    background: var(--full);
}

.summary-card--high[b-e19ts1xvg2]::after {
    background: var(--high);
}

.summary-card--low[b-e19ts1xvg2]::after {
    background: var(--low);
}



.summary__num[b-e19ts1xvg2] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: black;
}

.summary-card--full .summary__num[b-e19ts1xvg2] {
    color: var(--full);
}

.summary-card--low .summary__num[b-e19ts1xvg2] {
    color: var(--low);
}

.summary-card--empty .summary__num[b-e19ts1xvg2] {
    color: var(--empty);
}

.summary__lbl[b-e19ts1xvg2] {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ── GRID HEADER ── */
.grid-header[b-e19ts1xvg2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px 10px;
}

.grid-header__title[b-e19ts1xvg2] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: black;
}

.grid-header__count[b-e19ts1xvg2] {
    font-size: 11px;
    color: black;
}

.grid-header__clear[b-e19ts1xvg2] {
    margin-left: auto;
    background: white;
    border: 1px solid var(--bdr2);
    color: black;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

    .grid-header__clear:hover[b-e19ts1xvg2] {
        background: #f1f5f9;
        color: var(--text);
    }


/* ── GRID ── */
.grid[b-e19ts1xvg2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding: 0 32px 48px;
}

/* ── FLIP CARD ── */
.card[b-e19ts1xvg2] {
    height: 400px;
    perspective: 1000px;
    cursor: pointer;
}

.card__inner[b-e19ts1xvg2] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*flipping thead card ruby hover boss wants cite removed*/
/*.card:hover .card__inner {
    transform: rotateY(180deg);
}*/

.card.flipped .card__inner[b-e19ts1xvg2]{
    transform: rotateY(180deg);
}




.card__front[b-e19ts1xvg2],
.card__back[b-e19ts1xvg2] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card__front[b-e19ts1xvg2] {
    background: var(--card);
}

.card__back[b-e19ts1xvg2] {
    background: var(--card2);
    transform: rotateY(180deg);
    border-color: var(--bdr2);
}

/* Status left border */
.card--full .card__front[b-e19ts1xvg2] {
    border-left: 4px solid var(--full);
}



.card--low .card__front[b-e19ts1xvg2] {
    border-left: 4px solid var(--low);
    animation: lowglow-b-e19ts1xvg2 2.5s infinite;
}

.card--empty .card__front[b-e19ts1xvg2] {
    border-left: 4px solid var(--empty);
}

@keyframes lowglow-b-e19ts1xvg2 {
    0%,100% {
        border-left-color: var(--low);
    }

    50% {
        border-left-color: rgba(245,158,11,0.2);
    }
}

/* ── FRONT CONTENT ── */
.card__top[b-e19ts1xvg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card__id[b-e19ts1xvg2] {
    font-size: 11px;
    color: black;
}

.card__name[b-e19ts1xvg2] {
    font-size: 14px;
    font-weight: 600;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
   How it works:
   - .silo-icon-wrap is a container with overflow:hidden
   - .silo-fill is an absolutely positioned div at the BOTTOM
     Its height is set inline from silo.Percentage (0–100%)
     This makes it look like liquid rising inside the tank
   - .silo-img sits on TOP via z-index:2
     The PNG is black → we use CSS filter to make it dark so
     the coloured liquid shows through the transparent parts
   - .silo-pct floats over everything showing the number
   ══════════════════════════════════════════════════════════ */
.silo-icon-wrap[b-e19ts1xvg2] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #1e293b;
    min-height: 0;
}

/* Liquid fill — rises from bottom based on percentage */
.silo-fill[b-e19ts1xvg2] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* height is set inline: style="height:X%" */
    border-radius: 0 0 10px 10px;
    opacity: 0.75;
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Liquid shimmer effect */
    .silo-fill[b-e19ts1xvg2]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: shimmer-b-e19ts1xvg2 2.5s infinite;
    }

@keyframes shimmer-b-e19ts1xvg2 {
    0% {
        left: -60%;
    }

    100% {
        left: 160%;
    }
}




/* Percentage label over the icon */
.silo-pct[b-e19ts1xvg2] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    white-space: nowrap;
}

    .silo-pct sup[b-e19ts1xvg2] {
        font-size: 11px;
        font-weight: 500;
    }

/* ── FILL BAR ── */
.card__bar-track[b-e19ts1xvg2] {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.card__bar-fill[b-e19ts1xvg2] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.card__bar-fill--full[b-e19ts1xvg2] {
    background: var(--full);
}


.card__bar-fill--low[b-e19ts1xvg2] {
    background: var(--low);
}


/* ── CARD FOOTER ── */
.card__foot[b-e19ts1xvg2] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 8px;
    border-top: 1px solid var(--bdr);
    margin-top: auto;
}

.card__sys[b-e19ts1xvg2] {
    font-size: 11px;
    color: black;
}

.card__hint[b-e19ts1xvg2] {
    font-size: 10px;
    color: black;
    margin-left: auto;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card:hover .card__hint[b-e19ts1xvg2] {
    opacity: 0;
}

/* ── BACK CONTENT ── */
.card__name--back[b-e19ts1xvg2] {
    font-size: 14px;
    font-weight: 600;
    color: black;
}

.info-rows[b-e19ts1xvg2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.info-row[b-e19ts1xvg2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
}

    .info-row:last-child[b-e19ts1xvg2] {
        border-bottom: none;
    }

    .info-row span:first-child[b-e19ts1xvg2] {
        color: black;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.8px;
        font-weight: 500;
    }

    .info-row span:last-child[b-e19ts1xvg2] {
     
        font-size: 11px;
        color: black;
    }

.accent[b-e19ts1xvg2] {
    color: #2563eb;
}

.ok[b-e19ts1xvg2] {
    color: var(--full);
}

.err[b-e19ts1xvg2] {
    color: var(--err);
}

/* Show Map button */
.card__back-actions[b-e19ts1xvg2] {
    margin-top: auto;
    padding-top: 8px;
}

.btn-map[b-e19ts1xvg2] {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(37,99,235,0.3);
    background: rgba(37,99,235,0.06);
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

    .btn-map:hover[b-e19ts1xvg2] {
        background: rgba(37,99,235,0.12);
    }

    .btn-map:active[b-e19ts1xvg2] {
        transform: scale(0.97);
    }

/* ── BADGE ── */
.badge[b-e19ts1xvg2] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
}

.badge--full[b-e19ts1xvg2] {
    color: var(--full);
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.08);
}

.badge--low[b-e19ts1xvg2] {
    color: var(--low);
    border-color: rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.08);
}

.badge--normal[b-e19ts1xvg2] {
    color: var(--normal);
    border-color: rgba(148,163,184,0.4);
    background: rgba(148,163,184,0.08);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .header[b-e19ts1xvg2], .grid-header[b-e19ts1xvg2], .grid[b-e19ts1xvg2] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .summary-card[b-e19ts1xvg2] {
        padding: 12px 10px;
    }

    .summary__num[b-e19ts1xvg2] {
        font-size: 22px;
    }

    .grid[b-e19ts1xvg2] {
        grid-template-columns: 1fr 1fr;
    }
}



/*alarm dot*/
.status-dot[b-e19ts1xvg2] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
}

.status-dot--green[b-e19ts1xvg2] {
    background-color: #16a34a;
}

.status-dot--red[b-e19ts1xvg2] {
    background-color: #dc2626;
}

.alarm-dot[b-e19ts1xvg2] {
    display: inline-block;
    margin-left: 6px;
    color: #dc2626;
    font-weight: bold;
    font-size: 20px;
}
/* /Components/Pages/SiloDetails.razor.rz.scp.css */
/* SiloMap.razor.css — consistent with Matrix/Trucks white theme */

.silo-map-page[b-tkn4tywacu] {
    --bg: #f0f4f8;
    --bdr: rgba(0,0,0,0.08);
    --bdr2: rgba(0,0,0,0.15);
    --text: #1e293b;
    --muted: #94a3b8;
    --full: #22c55e;
    --low: #f59e0b;
    --empty: #94a3b8;
    --err: #ef4444;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

/* ── HEADER — matches Matrix/Trucks header ── */
.map-header[b-tkn4tywacu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: white;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.map-header__back[b-tkn4tywacu] {
    background: #f1f5f9;
    border: 1px solid var(--bdr2);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

    .map-header__back:hover[b-tkn4tywacu] {
        background: #e2e8f0;
    }

.map-header__title[b-tkn4tywacu] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

/* ── MAP BODY ── */
.map-body[b-tkn4tywacu] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.map-container[b-tkn4tywacu] {
    width: 100%;
    height: 100%;
}

/* ── DETAIL PANEL — white, consistent with cards ── */
.detail-panel[b-tkn4tywacu] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 280px;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    border-top: 4px solid var(--low);
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

    .detail-panel[b-tkn4tywacu]::-webkit-scrollbar {
        width: 4px;
    }

    .detail-panel[b-tkn4tywacu]::-webkit-scrollbar-track {
        background: transparent;
    }

    .detail-panel[b-tkn4tywacu]::-webkit-scrollbar-thumb {
        background: var(--bdr2);
        border-radius: 2px;
    }

.detail-panel--full[b-tkn4tywacu] {
    border-top-color: var(--full);
}

.detail-panel--low[b-tkn4tywacu] {
    border-top-color: var(--low);
}

.detail-panel--empty[b-tkn4tywacu] {
    border-top-color: var(--empty);
}

.detail-panel__head[b-tkn4tywacu] {
    padding: 16px;
    border-bottom: 1px solid var(--bdr);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.detail-panel__name[b-tkn4tywacu] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.detail-panel__pct[b-tkn4tywacu] {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
}

    .detail-panel__pct sup[b-tkn4tywacu] {
        font-size: 14px;
        font-weight: 500;
    }

.detail-panel__pct--full[b-tkn4tywacu] {
    color: var(--full);
}

.detail-panel__pct--low[b-tkn4tywacu] {
    color: var(--low);
}

.detail-panel__pct--empty[b-tkn4tywacu] {
    color: var(--empty);
}

.detail-panel__rows[b-tkn4tywacu] {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
}

.drow[b-tkn4tywacu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
}

    .drow:last-child[b-tkn4tywacu] {
        border-bottom: none;
    }

    .drow span:first-child[b-tkn4tywacu] {
        color: var(--muted);
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.8px;
        font-weight: 500;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .drow span:last-child[b-tkn4tywacu] {
        font-size: 11px;
        color: var(--text);
        text-align: right;
        font-family: 'JetBrains Mono', monospace;
    }

.accent[b-tkn4tywacu] {
    color: #2563eb;
}

.ok[b-tkn4tywacu] {
    color: var(--full);
}

.err[b-tkn4tywacu] {
    color: var(--err);
}

/* ── BADGE — matches Matrix badges ── */
.badge[b-tkn4tywacu] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.badge--full[b-tkn4tywacu] {
    color: #22c55e;
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.08);
}

.badge--low[b-tkn4tywacu] {
    color: #f59e0b;
    border-color: rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.08);
}

.badge--normal[b-tkn4tywacu] {
    color: #94a3b8;
    border-color: rgba(148,163,184,0.4);
    background: rgba(148,163,184,0.08);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .map-header[b-tkn4tywacu] {
        padding: 12px 16px;
    }

    .detail-panel[b-tkn4tywacu] {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 14px 14px 0 0;
    }
}
/* /Components/Pages/TruckDetails.razor.rz.scp.css */
.truck-map-page[b-iztlmgpvfk] {
    --bg: #f0f4f8;
    --bdr: rgba(0,0,0,0.08);
    --bdr2: rgba(0,0,0,0.15);
    --text: #1e293b;
    --muted: #94a3b8;
    --avail: #22c55e;
    --notavail: #ef4444;
    --err: #ef4444;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

/*HEADER*/
.map-header[b-iztlmgpvfk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: white;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.map-header__back[b-iztlmgpvfk] {
    background: #f1f5f9;
    border: 1px solid var(--bdr2);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

    .map-header__back:hover[b-iztlmgpvfk] {
        background: #e2e8f0;
    }

.map-header__title[b-iztlmgpvfk] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

/* ── MAP BODY ── */
.map-body[b-iztlmgpvfk] {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.map-container[b-iztlmgpvfk] {
    width: 100%;
    height: 100%;
}

/* ── DETAIL PANEL ── */
.detail-panel[b-iztlmgpvfk] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 280px;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    border-top: 4px solid #3b82f6;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

    .detail-panel[b-iztlmgpvfk]::-webkit-scrollbar {
        width: 4px;
    }

    .detail-panel[b-iztlmgpvfk]::-webkit-scrollbar-track {
        background: transparent;
    }

    .detail-panel[b-iztlmgpvfk]::-webkit-scrollbar-thumb {
        background: var(--bdr2);
        border-radius: 2px;
    }

.detail-panel--truck[b-iztlmgpvfk] {
    border-top-color: #ef4444;
}

.detail-panel__head[b-iztlmgpvfk] {
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--bdr);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.detail-panel__name[b-iztlmgpvfk] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.detail-panel__sub[b-iztlmgpvfk] {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}

.detail-panel__rows[b-iztlmgpvfk] {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
}

.drow[b-iztlmgpvfk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
}

    .drow:last-child[b-iztlmgpvfk] {
        border-bottom: none;
    }

    .drow span:first-child[b-iztlmgpvfk] {
        color: var(--muted);
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.8px;
        font-weight: 500;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .drow span:last-child[b-iztlmgpvfk] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--text);
        text-align: right;
    }

.accent[b-iztlmgpvfk] {
    color: #ef4444;
}

.ok[b-iztlmgpvfk] {
    color: var(--avail);
}

.err[b-iztlmgpvfk] {
    color: var(--notavail);
}

.detail-loading[b-iztlmgpvfk] {
    padding: 32px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ── BADGES ── */
.badge[b-iztlmgpvfk] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}

.badge--avail[b-iztlmgpvfk] {
    color: #22c55e;
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.08);
}

.badge--notavail[b-iztlmgpvfk] {
    color: #ef4444;
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.08);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .map-header[b-iztlmgpvfk] {
        padding: 12px 16px;
    }

    .detail-panel[b-iztlmgpvfk] {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 14px 14px 0 0;
    }
}
/* /Components/Pages/Trucks.razor.rz.scp.css */

.app[b-yly3vgkr50] {
    --bg: #0f1923;
    --card: #162230;
    --card2: #0d1a25;
    --bdr: rgba(255,255,255,0.07);
    --bdr2: rgba(255,255,255,0.12);
    --text: #e2eaf2;
    --muted: #5a7a95;
    --active: #22c55e;
   
    --alarm: #ef4444;
    --avail: #06b6d4;

    background: white;
    color: black;
    font-size: 14px;
    min-height: 100vh;
}

/* ── HEADER ── */
.header[b-yly3vgkr50] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--bdr);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(8px);
}

.header__brand[b-yly3vgkr50] {
    display: flex;
    align-items: center;
    gap: 10px;
}


.header__title[b-yly3vgkr50] {
    font-size: 16px;
    font-weight: 600;
}

.header__count[b-yly3vgkr50] {
    font-size: 12px;
    color: var(--muted);
    
}

/* ── SUMMARY ── */
.summary[b-yly3vgkr50] {
    display: flex;
    gap: 1px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--bdr);
}

.summary-card[b-yly3vgkr50] {
    flex: 1;
    padding: 16px 20px;
    cursor: pointer;
    position: relative;
    background: rgba(255,255,255,0.02);
    transition: background 0.15s;
    user-select: none;
}

.summary-card:hover[b-yly3vgkr50] {
    background: rgba(255,255,255,0.05);
}

.summary-card--active[b-yly3vgkr50] {
    background: rgba(255,255,255,0.07);
}

.summary-card[b-yly3vgkr50]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.summary-card:hover[b-yly3vgkr50]::after,
.summary-card--active[b-yly3vgkr50]::after {
    opacity: 1;
}

/*for colour under summary card*/
.summary-card--all[b-yly3vgkr50]::after {
    background: aqua;
}

.summary-card--avail[b-yly3vgkr50]::after {
    background: green;
}

.summary-card--notavail[b-yly3vgkr50]::after {
    background: red;
}

.summary__num[b-yly3vgkr50] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.summary-card--all .summary__num[b-yly3vgkr50] {
    color: black;
}

.summary-card--avail .summary__num[b-yly3vgkr50] {
    color: black;
}
.summary-card--notavail.summary__num[b-yly3vgkr50] {
    color: black;
}

.btn-map[b-yly3vgkr50] {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(37,99,235,0.3);
    background: rgba(37,99,235,0.06);
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

    .btn-map:hover[b-yly3vgkr50] {
        background: rgba(37,99,235,0.12);
    }

    .btn-map:active[b-yly3vgkr50] {
        transform: scale(0.97);
    }

/* ── GRID HEADER ── */
.grid-header[b-yly3vgkr50] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px 10px;
}

.grid-header__title[b-yly3vgkr50] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: black;
}

.grid-header__count[b-yly3vgkr50] {
    font-size: 11px;
    color: rgba(255,255,255,0.2);

}

.grid-header__clear[b-yly3vgkr50] {
    margin-left: auto;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--bdr2);
    color: var(--muted);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.grid-header__clear:hover[b-yly3vgkr50] {
        background: rgba(255,255,255,0.1);
        color: var(--text);
 }


/* ── GRID ── */
.grid[b-yly3vgkr50] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding: 0 32px 48px;
}

/* ── FLIP CARD ── */
.card[b-yly3vgkr50] {
    height: 400px;
    perspective: 1000px;
    cursor: pointer;
}

.card__inner[b-yly3vgkr50] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*.card:hover .card__inner {
    transform: rotateY(180deg);
}*/

.card.flipped .card__inner[b-yly3vgkr50]{
    transform: rotateY(180deg);
}

.card__front[b-yly3vgkr50],
.card__back[b-yly3vgkr50] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
}

.card__front[b-yly3vgkr50] {
    background: white;
}

.card__back[b-yly3vgkr50] {
    background: white;
    transform: rotateY(180deg);
    border-color: var(--bdr2);
}

.card--active .card__front[b-yly3vgkr50] {
    border-left: 3px solid var(--active);
}

.card--idle .card__front[b-yly3vgkr50] {
    border-left: 3px solid var(--idle);
}

.card--alarm .card__front[b-yly3vgkr50] {
    border-left: 3px solid var(--alarm);
    animation: alarmglow-b-yly3vgkr50 1.5s infinite;
}

@keyframes alarmglow-b-yly3vgkr50 {
    0%,100% {
        border-left-color: var(--alarm);
    }

    50% {
        border-left-color: rgba(239,68,68,0.15);
    }
}

/* ── FRONT CONTENT ── */
.card__top[b-yly3vgkr50] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card__id[b-yly3vgkr50] {
    font-size: 11px;
    color: black;
   
}

.card__name[b-yly3vgkr50] {
    font-size: 14px;
    font-weight: 600;
}

.card__reg[b-yly3vgkr50] {
    font-size: 11px;
    color: black;
    
    text-align: center;
}

/* Truck PNG */
.truck-icon-wrap[b-yly3vgkr50] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px 0;
}

.truck-img[b-yly3vgkr50] {
    width: 120px;
    height: auto;
}


/* Mini stats row */
.card__mini-stats[b-yly3vgkr50] {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--bdr);
    border-bottom: 1px solid var(--bdr);
}

.mini-stat[b-yly3vgkr50] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mini-stat__val[b-yly3vgkr50] {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: black;
}

.mini-stat__lbl[b-yly3vgkr50] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: black;
    font-weight: 500;
}

/* Footer */
.card__foot[b-yly3vgkr50] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
}


@keyframes pdot-b-yly3vgkr50 {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

.card__sys[b-yly3vgkr50] {
    font-size: 10px;
    color: var(--muted);
   
}

.card__hint[b-yly3vgkr50] {
    font-size: 10px;
    color: rgba(255,255,255,0.18);
    margin-left: auto;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card:hover .card__hint[b-yly3vgkr50] {
    opacity: 0;
}

/*BACK CONTENT */
.card__name--back[b-yly3vgkr50] {
    font-size: 13px;
    font-weight: 600;
}

.info-rows[b-yly3vgkr50] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.info-row[b-yly3vgkr50] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--bdr);
    font-size: 11px;
}

    .info-row:last-child[b-yly3vgkr50] {
        border-bottom: none;
    }

    .info-row span:first-child[b-yly3vgkr50] {
        color: black;
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0.8px;
        font-weight: 500;
    }

    .info-row span:last-child[b-yly3vgkr50] {
     
        font-size: 11px;
    }



.ok[b-yly3vgkr50] {
    color: var(--active);
}

.err[b-yly3vgkr50] {
    color: var(--alarm);
}



/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .header[b-yly3vgkr50], .grid-header[b-yly3vgkr50], .grid[b-yly3vgkr50] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .grid[b-yly3vgkr50] {
        grid-template-columns: 1fr 1fr;
    }

    .summary-card[b-yly3vgkr50] {
        padding: 12px 10px;
    }
}


/*alarm dot*/
.status-dot[b-yly3vgkr50] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
}

.status-dot--green[b-yly3vgkr50] {
    background-color: #16a34a;
}

.status-dot--red[b-yly3vgkr50] {
    background-color: #dc2626;
}

.alarm-dot[b-yly3vgkr50] {
    display: inline-block;
    margin-left: 6px;
    color: #dc2626;
    font-weight: bold;
    font-size: 16px;
}