/* _content/ITAM.Web/Components/Layout/AppBreadcrumb.razor.rz.scp.css */
/* The trail sits between the header and the page's own title, so it has to read as navigation
   furniture — quiet, one line, never competing with the h1 underneath it. */
.itam-crumbs-host[b-k38cd0daxt]  .itam-crumbs {
    margin-bottom: .85rem;
    padding: .3rem 0;
    font-size: .82rem;
    line-height: 1.4;
}

/* Long Thai labels on a narrow window scroll sideways inside the bar instead of wrapping into a
   three-line block that pushes the page down. */
.itam-crumbs-host[b-k38cd0daxt]  .itam-crumbs .mud-breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.itam-crumbs-host[b-k38cd0daxt]  .itam-crumbs .mud-breadcrumb-item {
    white-space: nowrap;
}

/* The last step is where you are, not somewhere to go. */
.itam-crumbs-host[b-k38cd0daxt]  .itam-crumbs .mud-breadcrumb-item:last-child {
    font-weight: 600;
    opacity: .85;
}

/* Navigation furniture is not part of a printed document (the print pages share this layout). */
@media print {
    .itam-crumbs-host[b-k38cd0daxt]  .itam-crumbs {
        display: none;
    }
}
/* _content/ITAM.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ga56ihjkus] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ga56ihjkus] {
    flex: 1;
}

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

.top-row[b-ga56ihjkus] {
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-ga56ihjkus] {
    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-ga56ihjkus] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/ITAM.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-2s9bql2p3w] {
    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-2s9bql2p3w] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

.navbar-brand[b-2s9bql2p3w] {
    font-size: 1.1rem;
}

.bi[b-2s9bql2p3w] {
    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-2s9bql2p3w] {
    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-2s9bql2p3w] {
    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-2s9bql2p3w] {
    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");
}

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

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

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

    .nav-item[b-2s9bql2p3w]  .nav-link {
        color: var(--mud-palette-lines-default);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

.nav-scrollable[b-2s9bql2p3w] {
    display: none;
}

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/ITAM.Web/Components/Pages/Admin/LabelPrinterSettingsCard.razor.rz.scp.css */
/* The uploaded logo as uploaded — the sticker preview beside it shows what the printer makes of it. */
.lps-logo[b-p1hm3fuofl] {
    display: flex; align-items: center; justify-content: center;
    min-width: 96px; height: 52px; padding: 4px 10px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}
.lps-logo img[b-p1hm3fuofl] { max-height: 40px; max-width: 160px; }
.lps-logo-empty[b-p1hm3fuofl] { font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* The preview stays on screen while the longer form beside it scrolls. */
.lps-aside[b-p1hm3fuofl] { position: sticky; top: 76px; }
/* _content/ITAM.Web/Components/Pages/Assets/AssetCreate.razor.rz.scp.css */
.ac-header[b-w0qedvyayv] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ac-page[b-w0qedvyayv]  .ac-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.ac-page[b-w0qedvyayv]  .ac-card {
    max-width: 880px;
}

.ac-section-title[b-w0qedvyayv] {
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 1.25rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ac-section-title:first-child[b-w0qedvyayv] {
    margin-top: 0;
}

.ac-grid[b-w0qedvyayv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.ac-field[b-w0qedvyayv] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ac-field label[b-w0qedvyayv] {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.ac-req[b-w0qedvyayv] {
    color: var(--mud-palette-error);
}

.ac-page[b-w0qedvyayv]  .ac-input {
    width: 100%;
}

.ac-page[b-w0qedvyayv]  .ac-error {
    margin-top: 1rem;
}

.ac-actions[b-w0qedvyayv] {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ─── attachments picked before save ─── */
.ac-docs[b-w0qedvyayv] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ac-docs-head[b-w0qedvyayv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.ac-page[b-w0qedvyayv]  .ac-doc-type {
    min-width: 160px;
}

.ac-doc-pick[b-w0qedvyayv] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    border: 1px dashed var(--mud-palette-text-disabled);
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    background: var(--mud-palette-background-gray);
}

.ac-doc-pick:hover[b-w0qedvyayv] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ac-doc-pick-off[b-w0qedvyayv] {
    opacity: .5;
    pointer-events: none;
}

.ac-docs-head .ac-hint[b-w0qedvyayv] {
    flex-basis: 100%;
}

.ac-hint[b-w0qedvyayv] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.ac-doc-none[b-w0qedvyayv] {
    margin: 0;
    font-size: .8rem;
    color: var(--mud-palette-text-disabled);
}

.ac-doc-list[b-w0qedvyayv] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ac-doc[b-w0qedvyayv] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

.ac-doc-name[b-w0qedvyayv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    color: var(--mud-palette-text-primary);
}

.ac-doc-size[b-w0qedvyayv] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
/* _content/ITAM.Web/Components/Pages/Assets/AssetDetail.razor.rz.scp.css */
.ad-header[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ad-header-actions[b-u5v6ow5b4p] {
    margin-left: auto;
    display: flex;
    gap: .5rem;
}

/* ─────────────  INLINE EDIT  ───────────── */
.ad-edit[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ad-efield[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ad-efield label[b-u5v6ow5b4p] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.ad-req[b-u5v6ow5b4p] { color: var(--mud-palette-error); }

.ad-page[b-u5v6ow5b4p]  .ad-input { width: 100%; }

.ad-page[b-u5v6ow5b4p]  .ad-edit-error { margin-top: .25rem; }

.ad-edit-actions[b-u5v6ow5b4p] {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: .5rem;
    padding-top: .85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ─────────────  HERO  ───────────── */
.ad-page[b-u5v6ow5b4p]  .ad-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.ad-hero-icon[b-u5v6ow5b4p] {
    font-size: 3.2rem;
    line-height: 1;
}

.ad-hero-body[b-u5v6ow5b4p] {
    flex: 1;
    min-width: 0;
}

.ad-hero-top[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.ad-page[b-u5v6ow5b4p]  .ad-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.ad-brand[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    margin: .25rem 0 0;
}

.ad-code[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-disabled);
    font-size: .82rem;
    font-weight: 600;
    margin: .1rem 0 0;
}

.ad-hero-price[b-u5v6ow5b4p] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-success);
    white-space: nowrap;
}

/* ─────────────  STATUS BADGE  ───────────── */
.al-status[b-u5v6ow5b4p] {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.st-inuse[b-u5v6ow5b4p] { background: rgba(var(--mud-palette-success-rgb), 0.12); color: var(--mud-palette-success); }
.st-available[b-u5v6ow5b4p] { background: rgba(var(--mud-palette-info-rgb), 0.12); color: var(--mud-palette-primary); }
.st-maintenance[b-u5v6ow5b4p] { background: rgba(var(--mud-palette-warning-rgb), 0.12); color: var(--mud-palette-warning); }
.st-retired[b-u5v6ow5b4p] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
/* Warranty that has run out. Not st-retired: a retired asset is finished with, an out-of-warranty
   one is still in service and now costs money to fix. */
.st-expired[b-u5v6ow5b4p] { background: rgba(var(--mud-palette-error-rgb), 0.12); color: var(--mud-palette-error); }
.st-default[b-u5v6ow5b4p] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

/* ─────────────  LAYOUT  ───────────── */
.ad-cols[b-u5v6ow5b4p] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.ad-page[b-u5v6ow5b4p]  .ad-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 .9rem;
}

/* info definition list */
.ad-dl[b-u5v6ow5b4p] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1rem;
    margin: 0;
}

.ad-dl dt[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
}

.ad-dl dd[b-u5v6ow5b4p] {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: .85rem;
    font-weight: 600;
    text-align: right;
}

.ad-history[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ad-hist-head[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.ad-hist-head[b-u5v6ow5b4p]  .ad-card-title {
    margin-bottom: 0;
}

.ad-addform[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: .9rem;
    margin: .85rem 0;
}

.ad-none[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-disabled);
    font-size: .85rem;
    margin: 0;
}

.ad-page[b-u5v6ow5b4p]  .ad-grid {
    font-size: .85rem;
}

/* ─────────────  STATES  ───────────── */
.ad-loading[b-u5v6ow5b4p],
.ad-empty[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-disabled);
    gap: .75rem;
}

.ad-empty-icon[b-u5v6ow5b4p] { font-size: 3rem; }

/* ─────────────  TABS  ───────────── */
.ad-page[b-u5v6ow5b4p]  .ad-tabs {
    margin-top: .25rem;
}

/* ─────────────  OVERVIEW SIDE COLUMN  ───────────── */
.ad-side[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ad-page[b-u5v6ow5b4p]  .ad-side-card {
    height: fit-content;
}

/* financial breakdown */
.ad-fin[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.ad-fin-row[b-u5v6ow5b4p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
}

.ad-fin-row strong[b-u5v6ow5b4p] { color: var(--mud-palette-text-primary); }
.ad-fin-dep[b-u5v6ow5b4p] { color: var(--mud-palette-error) !important; }

.ad-fin-total[b-u5v6ow5b4p] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: .55rem;
    margin-top: .15rem;
}

.ad-fin-total span[b-u5v6ow5b4p] { font-weight: 600; color: var(--mud-palette-text-primary); }
.ad-fin-total strong[b-u5v6ow5b4p] {
    font-size: 1.15rem;
    color: var(--mud-palette-success) !important;
}

.ad-fin-note[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-disabled);
    font-size: .72rem;
    margin: .6rem 0 0;
}

/* warranty progress bar (mirror of the list) */
.ad-warranty-track[b-u5v6ow5b4p] {
    height: 7px;
    background: var(--mud-palette-lines-default);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .7rem;
}

.ad-warranty-fill[b-u5v6ow5b4p] {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.al-w-ok[b-u5v6ow5b4p] { background: var(--mud-palette-success); }
.al-w-soon[b-u5v6ow5b4p] { background: var(--mud-palette-warning); }
.al-w-expired[b-u5v6ow5b4p] { background: var(--mud-palette-error); }

/* QR code */
.ad-page[b-u5v6ow5b4p]  .ad-qr { text-align: center; }

.ad-qr-img[b-u5v6ow5b4p] {
    width: 160px;
    height: 160px;
    image-rendering: pixelated;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 6px;
    background: var(--mud-palette-surface);
}

.ad-qr-code[b-u5v6ow5b4p] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
    margin: .6rem 0 0;
    letter-spacing: .03em;
}

/* ─────────────  DOCUMENTS  ───────────── */
.ad-upload-btn[b-u5v6ow5b4p] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    background: rgba(var(--mud-palette-info-rgb), 0.12);
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-info);
    padding: .35rem .75rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 600;
}

.ad-upload-btn:hover[b-u5v6ow5b4p] { background: rgba(var(--mud-palette-info-rgb), 0.12); }
.ad-upload-btn[b-u5v6ow5b4p]  .mud-icon-root { font-size: 1rem; }

.ad-doc-list[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .85rem;
}

.ad-doc[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.ad-doc-icon[b-u5v6ow5b4p] { font-size: 1.1rem; }

.ad-doc-name[b-u5v6ow5b4p] {
    flex: 1;
    min-width: 0;
    color: var(--mud-palette-primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-doc-name:hover[b-u5v6ow5b4p] { text-decoration: underline; }
.ad-doc-size[b-u5v6ow5b4p] { color: var(--mud-palette-text-disabled); font-size: .76rem; }

.ad-page[b-u5v6ow5b4p]  .ad-doc-type { min-width: 150px; }

.ad-doc-hint[b-u5v6ow5b4p] {
    margin: .5rem 0 0;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

.ad-doc-group[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.ad-doc-group + .ad-doc-list[b-u5v6ow5b4p] { margin-top: .5rem; }

/* ─────────────  RELATED ASSETS  ───────────── */
.ad-rel-group[b-u5v6ow5b4p] { margin-top: .85rem; }
.ad-rel-group:first-of-type[b-u5v6ow5b4p] { margin-top: 0; }

.ad-rel-label[b-u5v6ow5b4p] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: .45rem;
}

.ad-rel-item[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    margin-bottom: .4rem;
    transition: background .12s ease, transform .12s ease;
}

.ad-rel-item:hover[b-u5v6ow5b4p] { background: var(--mud-palette-background-gray); transform: translateX(2px); }
.ad-rel-ic[b-u5v6ow5b4p] { font-size: 1.2rem; }
.ad-rel-name[b-u5v6ow5b4p] { flex: 1; font-weight: 600; color: var(--mud-palette-text-primary); font-size: .88rem; }
.ad-rel-code[b-u5v6ow5b4p] { color: var(--mud-palette-text-disabled); font-size: .78rem; font-weight: 600; }

/* ─────────────  AUDIT LOG  ───────────── */
.ad-audit[b-u5v6ow5b4p] {
    display: flex;
    flex-direction: column;
}

.ad-audit-row[b-u5v6ow5b4p] {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--mud-palette-background-gray);
    font-size: .84rem;
}

.ad-audit-row:last-child[b-u5v6ow5b4p] { border-bottom: none; }

.ad-audit-time[b-u5v6ow5b4p] {
    color: var(--mud-palette-text-disabled);
    font-size: .76rem;
    white-space: nowrap;
    min-width: 110px;
}

.ad-audit-action[b-u5v6ow5b4p] { font-weight: 600; color: var(--mud-palette-text-primary); }
.ad-audit-data[b-u5v6ow5b4p] { color: var(--mud-palette-text-secondary); }

@media (max-width: 768px) {
    .ad-cols[b-u5v6ow5b4p] { grid-template-columns: 1fr; }
}

.ad-doc-actions[b-u5v6ow5b4p] {
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* _content/ITAM.Web/Components/Pages/Assets/AssetLabels.razor.rz.scp.css */
/* Everything styled here is plain markup this page renders; the one rule reaching into MudDataGrid's own
   rows goes through ::deep from .lp-page, which does carry the scope. */

.lp-header[b-w5elq2swor] {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.lp-heading[b-w5elq2swor] { display: flex; flex-direction: column; gap: 2px; }
.lp-sub[b-w5elq2swor] { color: var(--mud-palette-text-secondary); font-size: .875rem; }
.lp-header-right[b-w5elq2swor] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Which printer a run will go to, visible before anything is pressed. */
.lp-printer[b-w5elq2swor] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600;
}
.lp-printer.ok[b-w5elq2swor] { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); color: var(--mud-palette-success); }
.lp-printer.off[b-w5elq2swor] { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: var(--mud-palette-warning-darken); }
.lp-dot[b-w5elq2swor] { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

.lp-title[b-w5elq2swor] { font-weight: 600; font-size: .9rem; }
.lp-muted[b-w5elq2swor] { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.lp-chips[b-w5elq2swor] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.lp-chip-count[b-w5elq2swor] {
    margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}
.lp-filters[b-w5elq2swor] { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }

/* List beside preview on a wide screen; stacked below 1200px, where a 380px panel would squeeze the grid. */
.lp-body[b-w5elq2swor] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.lp-side[b-w5elq2swor] { position: sticky; top: 76px; }
@media (max-width: 1200px) {
    .lp-body[b-w5elq2swor] { grid-template-columns: minmax(0, 1fr); }
    .lp-side[b-w5elq2swor] { position: static; }
}

.lp-selectbar[b-w5elq2swor] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 2px 10px; }
.lp-count b[b-w5elq2swor] { font-size: 1.1rem; color: var(--mud-palette-primary); }
.lp-hidden[b-w5elq2swor] { font-size: .8rem; color: var(--mud-palette-warning-darken); }
.lp-spacer[b-w5elq2swor] { flex: 1; }

.lp-code[b-w5elq2swor] { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.lp-mono[b-w5elq2swor] { font-family: "Cascadia Mono", Consolas, monospace; font-size: .8rem; }
.lp-never[b-w5elq2swor] {
    font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    color: var(--mud-palette-warning-darken);
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}
.lp-status[b-w5elq2swor] { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.lp-status.inuse[b-w5elq2swor] { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.lp-status.available[b-w5elq2swor] { color: var(--mud-palette-info); background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.lp-status.maintenance[b-w5elq2swor] { color: var(--mud-palette-warning-darken); background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); }
.lp-status.retired[b-w5elq2swor] { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }

/* The row whose sticker the panel is showing. */
.lp-page[b-w5elq2swor]  .lp-row-focus > td { background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent) !important; }
.lp-page[b-w5elq2swor]  .lp-row-focus { cursor: default; }

.lp-nocode[b-w5elq2swor] { margin-top: 10px; font-size: .8rem; color: var(--mud-palette-text-secondary); }

.lp-side-head[b-w5elq2swor] { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lp-empty[b-w5elq2swor] {
    padding: 36px 16px; text-align: center; font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default); border-radius: 10px;
}
.lp-focus[b-w5elq2swor] { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.lp-focus-text[b-w5elq2swor] { flex: 1; min-width: 0; text-align: center; font-size: .85rem; line-height: 1.35; }

/* A sticker still being drawn: the label's own proportions, shimmering, so the panel does not jump. */
.lp-wait[b-w5elq2swor] {
    display: block; width: 100%; aspect-ratio: 440 / 240; border-radius: 10px;
    background: linear-gradient(90deg, var(--mud-palette-background-gray) 25%, var(--mud-palette-lines-default) 50%, var(--mud-palette-background-gray) 75%);
    background-size: 200% 100%;
    animation: lpShimmer-b-w5elq2swor 1.2s linear infinite;
}
.lp-wait.small[b-w5elq2swor] { border-radius: 4px; }
@keyframes lpShimmer-b-w5elq2swor { to { background-position: -200% 0; } }

.lp-thumbs[b-w5elq2swor] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    max-height: 52vh; overflow: auto; padding: 2px;
}
.lp-thumb[b-w5elq2swor] {
    display: flex; flex-direction: column; gap: 4px; padding: 6px; cursor: pointer;
    font: inherit; color: inherit; text-align: center;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
    background: var(--mud-palette-background-gray);
    transition: border-color .15s ease, transform .15s ease;
}
.lp-thumb:hover[b-w5elq2swor] { border-color: var(--mud-palette-primary); transform: translateY(-1px); }
.lp-thumb.focus[b-w5elq2swor] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.lp-thumb img[b-w5elq2swor] { width: 100%; height: auto; image-rendering: pixelated; border-radius: 4px; }
.lp-thumb-code[b-w5elq2swor] { font-size: .72rem; font-weight: 700; font-family: "Cascadia Mono", Consolas, monospace; }

.lp-total[b-w5elq2swor] { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.lp-total-num[b-w5elq2swor] { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--mud-palette-primary); }

@media (prefers-reduced-motion: reduce) {
    .lp-wait[b-w5elq2swor] { animation: none; }
    .lp-thumb[b-w5elq2swor] { transition: none; }
}
/* _content/ITAM.Web/Components/Pages/Assets/AssetList.razor.rz.scp.css */
/* ─────────────  HEADER  ───────────── */
.al-header[b-h4uv2a9t40] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.al-header[b-h4uv2a9t40]  .al-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.al-subtitle[b-h4uv2a9t40] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
}

.al-header-right[b-h4uv2a9t40] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* view toggle */
.al-viewtoggle[b-h4uv2a9t40] {
    display: inline-flex;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 3px;
}

.al-vt-btn[b-h4uv2a9t40] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: none;
    background: transparent;
    padding: .45rem .85rem;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}

.al-vt-btn.active[b-h4uv2a9t40] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.al-vt-btn[b-h4uv2a9t40]  .mud-icon-root { font-size: 1rem; }

/* ─────────────  KPI ROW  ───────────── */
/* auto-fit so the eight tiles take one row on a desktop and fold to two or three on a laptop,
   rather than always four across and always two rows deep. */
.al-kpi-row[b-h4uv2a9t40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: .5rem;
    margin-bottom: .85rem;
}

/* Figure beside label, not above it. Centred and stacked, each of these was two lines of text
   plus 16px of padding either side — 88px tall to carry a number under six letters. */
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-card {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    border-left: 4px solid var(--mud-palette-lines-default);
}

.al-kpi-value[b-h4uv2a9t40] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.al-kpi-label[b-h4uv2a9t40] {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    line-height: 1.25;
    min-width: 0;
}

.al-kpi-row[b-h4uv2a9t40]  .al-kpi-total { border-left-color: var(--mud-palette-secondary); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-inuse { border-left-color: var(--mud-palette-success); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-available { border-left-color: var(--mud-palette-info); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-maintenance { border-left-color: var(--mud-palette-warning); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-retired { border-left-color: var(--mud-palette-error); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-value-total { border-left-color: var(--mud-palette-info); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-value-current { border-left-color: var(--mud-palette-success); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-warranty { border-left-color: var(--mud-palette-warning); }
.al-kpi-row[b-h4uv2a9t40]  .al-kpi-warranty .al-kpi-value { color: var(--mud-palette-warning); }

/* ─────────────  TOOLBAR  ───────────── */
.al-toolbar[b-h4uv2a9t40] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.al-search[b-h4uv2a9t40] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: .5rem .75rem;
    flex: 1 1 280px;
    min-width: 240px;
}

.al-search[b-h4uv2a9t40]  .mud-icon-root { color: var(--mud-palette-text-disabled); }

.al-search input[b-h4uv2a9t40] {
    border: none;
    outline: none;
    flex: 1;
    font-size: .9rem;
    background: transparent;
}

/* A width, not just a min-width: a MudBlazor select takes the whole remaining row whatever the
   input draws, so the one filter that wrapped to a line by itself came out 840px wide while the
   four above it were 250. Same trap as the toolbar search box. */
.al-toolbar[b-h4uv2a9t40]  .al-filter-dd {
    flex: 0 0 auto;
    width: 190px;
    min-width: 150px;
}

.al-clear-btn[b-h4uv2a9t40] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.12);
    background: rgba(var(--mud-palette-error-rgb), 0.12);
    color: var(--mud-palette-error);
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s ease;
}

.al-clear-btn:hover[b-h4uv2a9t40] { background: rgba(var(--mud-palette-error-rgb), 0.12); }
.al-clear-btn[b-h4uv2a9t40]  .mud-icon-root { font-size: 1rem; }

/* network status tools */
.al-net-tools[b-h4uv2a9t40] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.al-net-btn[b-h4uv2a9t40] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s ease;
}

.al-net-btn:hover:not(:disabled)[b-h4uv2a9t40] { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }
.al-net-btn:disabled[b-h4uv2a9t40] { opacity: .6; cursor: default; }
.al-net-btn.active[b-h4uv2a9t40] { background: rgba(var(--mud-palette-success-rgb), 0.12); border-color: rgba(var(--mud-palette-success-rgb), 0.12); color: var(--mud-palette-success); font-weight: 600; }
.al-net-btn[b-h4uv2a9t40]  .mud-icon-root { font-size: 1rem; }

.al-net-legend[b-h4uv2a9t40] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.al-net-time[b-h4uv2a9t40] { font-size: .74rem; color: var(--mud-palette-text-disabled); }

/* ping status dot */
.al-ping[b-h4uv2a9t40] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: .35rem;
    background: var(--mud-palette-lines-default);
}

.al-ping-online[b-h4uv2a9t40] { background: var(--mud-palette-success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.al-ping-offline[b-h4uv2a9t40] { background: var(--mud-palette-error); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.al-ping-unknown[b-h4uv2a9t40] { background: var(--mud-palette-lines-default); }
.al-ping-checking[b-h4uv2a9t40] { background: var(--mud-palette-warning); animation: al-ping-pulse-b-h4uv2a9t40 1s ease-in-out infinite; }

@keyframes al-ping-pulse-b-h4uv2a9t40 {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ─────────────  CARD GRID  ───────────── */
.al-grid[b-h4uv2a9t40] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
    gap: .75rem;
    /* Each card ends where its content does. Stretched to the row's tallest, a camera with four
       facts drew 75px of empty card under its last line — inside its own border, which reads as
       the card being unfinished rather than as the row being ragged. */
    align-items: start;
}

.al-grid[b-h4uv2a9t40]  .al-card {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

.al-grid[b-h4uv2a9t40]  .al-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.al-card-top[b-h4uv2a9t40] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.al-card-icon[b-h4uv2a9t40] {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.al-card-titles[b-h4uv2a9t40] {
    flex: 1;
    min-width: 0;
}

.al-grid[b-h4uv2a9t40]  .al-card-name {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-card-code[b-h4uv2a9t40] {
    display: block;
    font-size: .78rem;
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
}

.al-card-type[b-h4uv2a9t40] {
    display: inline-block;
    margin-top: .15rem;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    padding: .05rem .45rem;
    border-radius: 4px;
}

/* badges row */
.al-card-badges[b-h4uv2a9t40] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.al-badge[b-h4uv2a9t40] {
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 5px;
    white-space: nowrap;
}

.al-badge-assigned[b-h4uv2a9t40] { background: rgba(var(--mud-palette-info-rgb), 0.12); color: var(--mud-palette-primary); }
.al-badge-unassigned[b-h4uv2a9t40] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-disabled); }
.al-badge-expired[b-h4uv2a9t40] { background: rgba(var(--mud-palette-error-rgb), 0.12); color: var(--mud-palette-error); }
.al-badge-warn[b-h4uv2a9t40] { background: rgba(var(--mud-palette-warning-rgb), 0.12); color: var(--mud-palette-warning); }
.al-badge-ticket[b-h4uv2a9t40] { background: #faf5ff; color: var(--mud-palette-secondary); }

/* Wrapped, not stacked. Four short facts on four lines is three lines of card spent on the
   left-hand third of each of them. */
.al-card-meta[b-h4uv2a9t40] {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .7rem;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.al-card-meta span[b-h4uv2a9t40] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ───── the marks this asset carries ─────
   auto-fit rather than a fixed two, because the sheet only draws the fields that have a value:
   a camera has four and a workstation seven, and a hard two columns leaves the short one with a
   hole in it. */
.al-spec[b-h4uv2a9t40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: .1rem .9rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: .4rem .6rem;
}

/* The label and its value on one line, pushed apart. Stacked, each fact cost two lines and the
   label — the part that is the same on every card — got the same room as the value. */
.al-spec-item[b-h4uv2a9t40] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    line-height: 1.5;
}

.al-spec-k[b-h4uv2a9t40] {
    flex: 0 0 auto;
    font-size: .66rem;
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
    letter-spacing: .01em;
}

.al-spec-v[b-h4uv2a9t40] {
    min-width: 0;
    text-align: right;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-spec-v.mono[b-h4uv2a9t40],
.al-cell-mono[b-h4uv2a9t40] {
    font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
    font-size: .78rem;
    letter-spacing: -.01em;
}

.al-spec-v.al-w-expired[b-h4uv2a9t40] { color: var(--mud-palette-error); }
.al-spec-v.al-w-soon[b-h4uv2a9t40] { color: var(--mud-palette-warning); }
.al-spec-v.al-w-ok[b-h4uv2a9t40] { color: var(--mud-palette-success); }

.al-cell-mono[b-h4uv2a9t40] { color: var(--mud-palette-text-primary); }

/* warranty widget */
.al-warranty[b-h4uv2a9t40] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* Under the end date in the grid: the term is context for the date above it, not a second
   figure competing with it. */
.al-warranty-term[b-h4uv2a9t40] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.al-warranty-head[b-h4uv2a9t40] {
    display: flex;
    justify-content: space-between;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.al-warranty-track[b-h4uv2a9t40] {
    height: 6px;
    background: var(--mud-palette-lines-default);
    border-radius: 999px;
    overflow: hidden;
}

.al-warranty-fill[b-h4uv2a9t40] {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.al-w-ok[b-h4uv2a9t40] { color: var(--mud-palette-success); }
.al-warranty-fill.al-w-ok[b-h4uv2a9t40] { background: var(--mud-palette-success); }
.al-w-soon[b-h4uv2a9t40] { color: var(--mud-palette-warning); }
.al-warranty-fill.al-w-soon[b-h4uv2a9t40] { background: var(--mud-palette-warning); }
.al-w-expired[b-h4uv2a9t40] { color: var(--mud-palette-error); }
.al-warranty-fill.al-w-expired[b-h4uv2a9t40] { background: var(--mud-palette-error); }

/* footer: price + current value */
.al-card-foot[b-h4uv2a9t40] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    border-top: 1px solid var(--mud-palette-background-gray);
    padding-top: .5rem;
    margin-top: .15rem;
}

.al-card-price[b-h4uv2a9t40] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mud-palette-success);
}

.al-card-current[b-h4uv2a9t40] {
    font-size: .72rem;
    color: var(--mud-palette-text-disabled);
}

/* ─────────────  STATUS BADGE  ───────────── */
.al-status[b-h4uv2a9t40] {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.st-inuse[b-h4uv2a9t40] { background: rgba(var(--mud-palette-success-rgb), 0.12); color: var(--mud-palette-success); }
.st-available[b-h4uv2a9t40] { background: rgba(var(--mud-palette-info-rgb), 0.12); color: var(--mud-palette-primary); }
.st-maintenance[b-h4uv2a9t40] { background: rgba(var(--mud-palette-warning-rgb), 0.12); color: var(--mud-palette-warning); }
.st-retired[b-h4uv2a9t40] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
/* Warranty that has run out. Not st-retired: a retired asset is finished with, an out-of-warranty
   one is still in service and now costs money to fix. */
.st-expired[b-h4uv2a9t40] { background: rgba(var(--mud-palette-error-rgb), 0.12); color: var(--mud-palette-error); }
.st-default[b-h4uv2a9t40] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

/* ─────────────  TABLE  ───────────── */
.al-table-view[b-h4uv2a9t40]  .al-datagrid {
    border-radius: 10px;
    overflow: hidden;
}

.al-datagrid[b-h4uv2a9t40]  .mud-table-root tr { cursor: pointer; }

.al-grid-icon[b-h4uv2a9t40] { font-size: 1.3rem; }

/* ─────────────  STATES  ───────────── */
.al-loading[b-h4uv2a9t40],
.al-empty[b-h4uv2a9t40] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-disabled);
    gap: .75rem;
}

.al-empty-icon[b-h4uv2a9t40] { font-size: 3rem; }

@media (max-width: 1100px) {
    .al-kpi-row[b-h4uv2a9t40] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .al-kpi-row[b-h4uv2a9t40] { grid-template-columns: 1fr; }
    .al-header[b-h4uv2a9t40] { align-items: stretch; }
}
/* _content/ITAM.Web/Components/Pages/Employees/Index.razor.rz.scp.css */
/* ─────────────  HEADER  ───────────── */
.em-header[b-pdqkxn9l1m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.em-page[b-pdqkxn9l1m]  .em-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.em-subtitle[b-pdqkxn9l1m] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
}

.em-header-right[b-pdqkxn9l1m] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* view toggle */
.em-viewtoggle[b-pdqkxn9l1m] {
    display: inline-flex;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 3px;
}

.em-vt-btn[b-pdqkxn9l1m] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: none;
    background: transparent;
    padding: .45rem .85rem;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}

.em-vt-btn.active[b-pdqkxn9l1m] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.em-vt-btn[b-pdqkxn9l1m]  .mud-icon-root { font-size: 1rem; }

/* ─────────────  KPI ROW  ───────────── */
.em-kpi-row[b-pdqkxn9l1m] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.em-page[b-pdqkxn9l1m]  .em-kpi-card {
    text-align: center;
    border-left: 4px solid var(--mud-palette-lines-default);
}

.em-kpi-value[b-pdqkxn9l1m] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.em-kpi-label[b-pdqkxn9l1m] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    margin-top: .25rem;
}

.em-page[b-pdqkxn9l1m]  .em-kpi-total { border-left-color: var(--mud-palette-primary); }
.em-page[b-pdqkxn9l1m]  .em-kpi-dept { border-left-color: var(--mud-palette-secondary); }
.em-page[b-pdqkxn9l1m]  .em-kpi-branch { border-left-color: var(--mud-palette-success); }

/* ─────────────  TOOLBAR  ───────────── */
.em-toolbar[b-pdqkxn9l1m] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.em-search[b-pdqkxn9l1m] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: .5rem .75rem;
    flex: 1 1 280px;
    min-width: 240px;
}

.em-search[b-pdqkxn9l1m]  .mud-icon-root { color: var(--mud-palette-text-disabled); }

.em-search input[b-pdqkxn9l1m] {
    border: none;
    outline: none;
    flex: 1;
    font-size: .9rem;
    background: transparent;
}

.em-page[b-pdqkxn9l1m]  .em-filter-dd {
    min-width: 170px;
}

/* ─────────────  AVATAR  ───────────── */
.em-avatar[b-pdqkxn9l1m] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.em-avatar-sm[b-pdqkxn9l1m] {
    width: 34px;
    height: 34px;
    font-size: .8rem;
    box-shadow: none;
}

/* ─────────────  CARD GRID  ───────────── */
.em-grid[b-pdqkxn9l1m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.em-page[b-pdqkxn9l1m]  .em-card {
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.em-page[b-pdqkxn9l1m]  .em-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.em-card-top[b-pdqkxn9l1m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.em-card-actions[b-pdqkxn9l1m] {
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: opacity .12s ease;
}

.em-page[b-pdqkxn9l1m]  .em-card:hover .em-card-actions { opacity: 1; }

.em-page[b-pdqkxn9l1m]  .em-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: .25rem 0 0;
    color: var(--mud-palette-text-primary);
}

.em-card-code[b-pdqkxn9l1m] {
    font-size: .8rem;
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
    margin: 0;
}

.em-card-meta[b-pdqkxn9l1m] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .5rem;
}

.em-meta-row[b-pdqkxn9l1m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────  TABLE  ───────────── */
.em-page[b-pdqkxn9l1m]  .em-datagrid {
    border-radius: 10px;
    overflow: hidden;
}

.em-grid-name[b-pdqkxn9l1m] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.em-grid-fullname[b-pdqkxn9l1m] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.em-grid-email[b-pdqkxn9l1m] {
    font-size: .8rem;
    color: var(--mud-palette-text-disabled);
}

/* ─────────────  STATES  ───────────── */
.em-loading[b-pdqkxn9l1m],
.em-empty[b-pdqkxn9l1m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--mud-palette-text-disabled);
    gap: .75rem;
}

.em-empty-icon[b-pdqkxn9l1m] { font-size: 3rem; }

@media (max-width: 640px) {
    .em-kpi-row[b-pdqkxn9l1m] { grid-template-columns: 1fr; }
    .em-header[b-pdqkxn9l1m] { align-items: stretch; }
}

/* The name cell is a link now; it must not look like body text that happens to be clickable. */
.em-grid-link[b-pdqkxn9l1m] { color: inherit; text-decoration: none; display: block; }
.em-grid-link:hover[b-pdqkxn9l1m] { color: var(--mud-palette-primary); text-decoration: underline; }
/* _content/ITAM.Web/Components/Pages/LoginBackdrop.razor.rz.scp.css */
/* ── Shared ───────────────────────────────────────────────────────────────────────────────────── */
.itam-login-bg[b-j0okx3kndg] {
    position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    /* Drawing ink for the dark scenes: the palette's primary lifted toward white, so a dark accent still
       reads on a dark ground. Twenty accents, the same picture in each. The night behind the ink is fixed
       hex on purpose — a scene, not a surface — and stays dark in light mode, as the starfield always has. */
    --ink: color-mix(in srgb, var(--mud-palette-primary) 55%, #fff);
    --ink-hot: color-mix(in srgb, var(--mud-palette-primary) 22%, #fff);
}
.fill-svg[b-j0okx3kndg] { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── เครือข่าย ── */
.anim-network[b-j0okx3kndg] {
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--mud-palette-primary) 26%, transparent), transparent 70%),
        radial-gradient(ellipse at bottom, #0c1a33 0%, #04070f 100%);
}
/* The vignette stays still and the lines move under it; moving one element would drag the mask along
   and jump it back at the end of every loop. */
.net-grid[b-j0okx3kndg] {
    position: absolute; inset: 0; overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.net-grid[b-j0okx3kndg]::before {
    content: ""; position: absolute; inset: -64px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: netGrid-b-j0okx3kndg 22s linear infinite;
}
@keyframes netGrid-b-j0okx3kndg { to { transform: translate(64px, 64px); } }
.net-links line[b-j0okx3kndg] { stroke: var(--ink); stroke-opacity: .22; stroke-width: 1.2; }
.net-packets line[b-j0okx3kndg] { stroke-linecap: round; stroke-dasharray: 2 98; animation: netPacket-b-j0okx3kndg linear infinite; }
.net-pk-glow[b-j0okx3kndg] { stroke: var(--ink); stroke-width: 10; stroke-opacity: .2; }
.net-pk-core[b-j0okx3kndg] { stroke: var(--ink-hot); stroke-width: 3; }
@keyframes netPacket-b-j0okx3kndg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.net-node[b-j0okx3kndg] { fill: var(--ink); fill-opacity: .7; }
.net-node.hub[b-j0okx3kndg] { fill: var(--ink-hot); fill-opacity: 1; }
.net-halo[b-j0okx3kndg] {
    fill: none; stroke: var(--ink); stroke-width: 1.5;
    transform-box: fill-box; transform-origin: center;
    animation: netPing-b-j0okx3kndg 3.6s ease-out infinite;
}
@keyframes netPing-b-j0okx3kndg { 0% { transform: scale(.35); opacity: .85; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.net-label[b-j0okx3kndg] { fill: var(--ink); fill-opacity: .6; font: 600 13px Consolas, "Cascadia Mono", monospace; letter-spacing: 1.5px; }
.net-radar[b-j0okx3kndg] {
    position: absolute; left: -14vmin; bottom: -14vmin; width: 54vmin; height: 54vmin;
    border-radius: 50%; overflow: hidden; opacity: .6;
    background: repeating-radial-gradient(circle closest-side, transparent 0 calc(14% - 1px), color-mix(in srgb, var(--ink) 26%, transparent) calc(14% - 1px) 14%);
}
.net-sweep[b-j0okx3kndg] {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 290deg, color-mix(in srgb, var(--ink) 50%, transparent) 360deg);
    animation: spin-b-j0okx3kndg 5s linear infinite;
}
.net-scan[b-j0okx3kndg] {
    position: absolute; left: 0; right: 0; top: 0; height: 140px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent) 75%, color-mix(in srgb, var(--ink) 22%, transparent));
    transform: translateY(-140px);
    animation: netScan-b-j0okx3kndg 10s linear infinite;
}
@keyframes netScan-b-j0okx3kndg { 0% { transform: translateY(-140px); } 55%, 100% { transform: translateY(100vh); } }
@keyframes spin-b-j0okx3kndg { to { transform: rotate(360deg); } }

/* ── โค้ดไหล ── */
.anim-matrix[b-j0okx3kndg] { background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--mud-palette-primary) 16%, #02100a), #010403 75%); }
.mx-col[b-j0okx3kndg] {
    position: absolute; top: 0;
    writing-mode: vertical-rl; text-orientation: upright;
    font-family: Consolas, "MS Gothic", "Yu Gothic", monospace; font-weight: 600; line-height: 1; letter-spacing: .12em;
    color: var(--ink);
    text-shadow: 0 0 6px color-mix(in srgb, var(--ink) 70%, transparent);
    /* Fades toward the tail, so the bright end is the one falling. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
    transform: translateY(-100%);
    animation: mxFall-b-j0okx3kndg linear infinite;
}
.mx-col b[b-j0okx3kndg] { color: #fff; font-weight: 700; text-shadow: 0 0 10px var(--ink), 0 0 20px var(--ink); }
@keyframes mxFall-b-j0okx3kndg { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }

/* ── แผงวงจร ── */
.anim-circuit[b-j0okx3kndg] { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--mud-palette-primary) 14%, #041410), #020807 80%); }
.cc-trace[b-j0okx3kndg] { fill: none; stroke: var(--ink); stroke-opacity: .2; stroke-width: 2; stroke-linejoin: round; }
.cc-flow[b-j0okx3kndg] { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 95; animation: ccFlow-b-j0okx3kndg linear infinite; }
.cc-flow-glow[b-j0okx3kndg] { stroke: var(--ink); stroke-width: 8; stroke-opacity: .22; }
.cc-flow-core[b-j0okx3kndg] { stroke: var(--ink-hot); stroke-width: 2.5; }
@keyframes ccFlow-b-j0okx3kndg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.cc-via[b-j0okx3kndg] { fill: var(--ink); fill-opacity: .5; }
.cc-pad[b-j0okx3kndg] { fill: #020807; stroke: var(--ink); stroke-opacity: .5; stroke-width: 2; }
.cc-pins[b-j0okx3kndg] { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 3; }
.cc-chip[b-j0okx3kndg] { fill: color-mix(in srgb, var(--mud-palette-primary) 10%, #050d0b); stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.5; }
.cc-chip-label[b-j0okx3kndg] { fill: var(--ink); fill-opacity: .6; font: 600 13px Consolas, "Cascadia Mono", monospace; letter-spacing: 1px; }

/* ── วาร์ป ── */
.anim-warp[b-j0okx3kndg] { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mud-palette-primary) 30%, #0a0f25) 0%, #03040c 45%, #000 100%); }
.wp-core[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 50%; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ink) 65%, transparent), transparent 70%);
    animation: wpPulse-b-j0okx3kndg 2.4s ease-in-out infinite;
}
@keyframes wpPulse-b-j0okx3kndg { 50% { transform: scale(1.25); opacity: .7; } }
.wp-streak[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--ink) 60%, #fff);
    animation: wpFly-b-j0okx3kndg linear infinite;
}
@keyframes wpFly-b-j0okx3kndg {
    0% { transform: rotate(var(--a)) translateX(3vmin) scaleX(.1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(78vmax) scaleX(1.4); opacity: 1; }
}

/* ── ซินธ์เวฟ ── */
.anim-synthwave[b-j0okx3kndg] {
    --sw-line: color-mix(in srgb, var(--mud-palette-primary) 30%, #ff3fd1);
    background: linear-gradient(180deg, #05001a 0%, #160538 30%, #3d0b5c 53%, #05000f 100%);
}
.anim-synthwave .star[b-j0okx3kndg], .anim-orbit .star[b-j0okx3kndg] { background: #fff; }
.sw-glow[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 53%; width: 130vmin; height: 130vmin; margin: -95vmin 0 0 -65vmin; border-radius: 50%;
    background: radial-gradient(circle, #ff3d8b66 0%, #ff2bd622 38%, transparent 65%);
}
/* Top half solid, lower half cut into bands — the two mask layers add together. Wider than the sign-in
   card on purpose: a sun the card's size sits exactly behind it and only its glow shows. */
.sw-sun[b-j0okx3kndg] {
    position: absolute; left: 50%; top: calc(53% - 54vmin); width: 72vmin; height: 72vmin; margin-left: -36vmin; border-radius: 50%;
    background: linear-gradient(180deg, #ffe66d 0%, #ff9a5a 38%, #ff3d8b 72%, #c21aa8 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 50%), repeating-linear-gradient(180deg, transparent 0 1.2vmin, #000 1.2vmin 4.2vmin);
            mask-image: linear-gradient(180deg, #000 50%, transparent 50%), repeating-linear-gradient(180deg, transparent 0 1.2vmin, #000 1.2vmin 4.2vmin);
}
.sw-ridges[b-j0okx3kndg] { position: absolute; left: 0; top: calc(53% - 22vh); width: 100%; height: 22vh; }
.sw-ridge[b-j0okx3kndg] { vector-effect: non-scaling-stroke; }
.sw-ridge.far[b-j0okx3kndg] { fill: #1d0842; stroke: color-mix(in srgb, #ff3fd1 45%, transparent); stroke-width: 1.5; }
.sw-ridge.near[b-j0okx3kndg] { fill: #0c0224; stroke: var(--sw-line); stroke-width: 2; }
/* The floor is a plane hinged at its near edge and tipped away, so its far end runs into the horizon.
   The lines move on a child of the tipped plane — a 2-D slide, not a repaint of the pattern. */
.sw-floor[b-j0okx3kndg] {
    position: absolute; left: 0; right: 0; top: 53%; bottom: 0; overflow: hidden;
    perspective: 30vh; perspective-origin: 50% 0%;
    background: linear-gradient(180deg, #1a0433, #05000f 80%);
}
.sw-grid[b-j0okx3kndg] {
    position: absolute; left: -200%; right: -200%; bottom: 0; height: 1200%; overflow: hidden;
    transform-origin: 50% 100%; transform: rotateX(80deg);
}
.sw-grid[b-j0okx3kndg]::before {
    content: ""; position: absolute; left: 0; right: 0; top: -90px; bottom: 0;
    background-image: linear-gradient(var(--sw-line) 3px, transparent 3px), linear-gradient(90deg, var(--sw-line) 3px, transparent 3px);
    background-size: 90px 90px; background-position: center bottom;
    animation: swMove-b-j0okx3kndg .9s linear infinite;
}
@keyframes swMove-b-j0okx3kndg { to { transform: translateY(90px); } }
.sw-horizon[b-j0okx3kndg] {
    position: absolute; left: 0; right: 0; top: 53%; height: 2px; margin-top: -1px;
    background: #ff7be5; box-shadow: 0 0 16px 3px #ff3fd1aa, 0 0 60px 10px #ff3fd144;
}

/* ── เรดาร์ ── */
.anim-radar[b-j0okx3kndg] { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mud-palette-primary) 18%, #03120d) 0%, #010604 70%); }
.rd-scope[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 50%; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin; border-radius: 50%;
    background:
        repeating-radial-gradient(circle closest-side, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--ink) 30%, transparent) calc(10% - 1px) 10%),
        linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 22%, transparent)) center / 1px 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 22%, transparent)) center / 100% 1px no-repeat;
    box-shadow: inset 0 0 12vmin color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent);
}
.rd-ticks[b-j0okx3kndg] {
    position: absolute; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 60%, transparent) 0 .5deg, transparent .5deg 5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 96%, #000 96.5%);
            mask-image: radial-gradient(circle closest-side, transparent 96%, #000 96.5%);
}
/* Bright edge at north when unturned, fading behind it; duration comes from LoginScenes.Radar.Period. */
.rd-sweep[b-j0okx3kndg] {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 290deg, color-mix(in srgb, var(--ink) 55%, transparent) 360deg);
    animation-name: spin-b-j0okx3kndg; animation-timing-function: linear; animation-iteration-count: infinite;
}
.rd-blip[b-j0okx3kndg] {
    position: absolute; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%);
    background: var(--ink-hot); box-shadow: 0 0 12px var(--ink), 0 0 24px var(--ink);
    animation-name: rdBlip-b-j0okx3kndg; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
@keyframes rdBlip-b-j0okx3kndg {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    60% { opacity: .15; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ── รังผึ้ง ── */
.anim-hex[b-j0okx3kndg] { background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--mud-palette-primary) 20%, #070b18), #02030a 80%); }
.hx-grid path[b-j0okx3kndg] { fill: none; stroke: var(--ink); stroke-opacity: .16; stroke-width: 1.3; }
.hx-cell[b-j0okx3kndg] { fill: var(--ink); fill-opacity: 0; stroke: var(--ink-hot); stroke-opacity: 0; stroke-width: 1.5; animation: hxGlow-b-j0okx3kndg ease-in-out infinite; }
@keyframes hxGlow-b-j0okx3kndg { 0%, 100% { fill-opacity: 0; stroke-opacity: 0; } 45% { fill-opacity: .32; stroke-opacity: .9; } }
.hx-vignette[b-j0okx3kndg] { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, #02030a 92%); }

/* ── วงโคจร ──
   Each ring is a plane tipped back in 3-D. A satellite rides a spinning layer on that plane and turns the
   other way at the same rate, so it stays a round dot facing the viewer instead of flattening with the ring. */
.anim-orbit[b-j0okx3kndg] { perspective: 1400px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mud-palette-primary) 22%, #080a1c) 0%, #03030b 60%, #000 100%); }
.ob-core[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 50%; width: 26vmin; height: 26vmin; margin: -13vmin 0 0 -13vmin; border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--ink) 18%, color-mix(in srgb, var(--ink) 35%, transparent) 40%, transparent 70%);
    animation: obPulse-b-j0okx3kndg 4s ease-in-out infinite;
}
@keyframes obPulse-b-j0okx3kndg { 50% { transform: scale(1.15); } }
.ob-plane[b-j0okx3kndg] { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateZ(var(--tilt)) rotateX(70deg); }
.ob-ring[b-j0okx3kndg] { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 38%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--ink) 12%, transparent); }
.ob-spin[b-j0okx3kndg] { position: absolute; inset: 0; transform-style: preserve-3d; animation-name: obSpin-b-j0okx3kndg; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes obSpin-b-j0okx3kndg { to { transform: rotateZ(360deg); } }
.ob-sat[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--ink-hot); box-shadow: 0 0 10px var(--ink), 0 0 22px var(--ink);
    animation-name: obCounter-b-j0okx3kndg; animation-timing-function: linear; animation-iteration-count: infinite;
    animation-duration: inherit; animation-delay: inherit; animation-direction: inherit;
}
@keyframes obCounter-b-j0okx3kndg { from { transform: rotateZ(0deg) rotateX(-70deg); } to { transform: rotateZ(-360deg) rotateX(-70deg); } }

/* ── ไซเบอร์พังก์ ──
   Neon magenta and cyan are the genre, so they are fixed; the accent only tints one glow. */
.anim-cyberpunk[b-j0okx3kndg] { background: linear-gradient(180deg, #06000f 0%, #1b0036 45%, #3a0a4a 70%, #09001a 100%); }
.cp-glow[b-j0okx3kndg] { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; }
.cp-glow.a[b-j0okx3kndg] { left: -22vmax; top: -32vmax; background: radial-gradient(circle, #ff2bd655, transparent 65%); }
.cp-glow.b[b-j0okx3kndg] { right: -26vmax; bottom: -24vmax; opacity: .45; background: radial-gradient(circle, color-mix(in srgb, var(--mud-palette-primary) 40%, #00e5ff), transparent 65%); }
.cp-word[b-j0okx3kndg] {
    position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
    font: 900 34vmin/1 "Segoe UI", Tahoma, sans-serif; letter-spacing: .06em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 2px #00e5ffaa; opacity: .35;
}
.cp-word[b-j0okx3kndg]::before, .cp-word[b-j0okx3kndg]::after { content: attr(data-text); position: absolute; inset: 0; }
.cp-word[b-j0okx3kndg]::before { -webkit-text-stroke: 2px #ff2bd6; animation: cpGlitchA-b-j0okx3kndg 3.2s steps(1) infinite; }
.cp-word[b-j0okx3kndg]::after { -webkit-text-stroke: 2px #00e5ff; animation: cpGlitchB-b-j0okx3kndg 2.7s steps(1) infinite; }
@keyframes cpGlitchA-b-j0okx3kndg {
    0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    88% { clip-path: inset(20% 0 55% 0); transform: translateX(-12px); }
    92% { clip-path: inset(62% 0 18% 0); transform: translateX(10px); }
    96% { clip-path: inset(40% 0 42% 0); transform: translateX(-6px); }
}
@keyframes cpGlitchB-b-j0okx3kndg {
    0%, 78%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    80% { clip-path: inset(70% 0 10% 0); transform: translateX(14px); }
    84% { clip-path: inset(10% 0 75% 0); transform: translateX(-9px); }
}
.cp-city[b-j0okx3kndg] { position: absolute; left: 0; bottom: 0; width: 100%; height: 48vh; }
.cp-bld[b-j0okx3kndg] { fill: #07000f; stroke: color-mix(in srgb, #ff2bd6 35%, transparent); stroke-width: 1; }
.cp-win[b-j0okx3kndg] { fill: #00e5ff; fill-opacity: .6; }
.cp-win.m[b-j0okx3kndg] { fill: #ff2bd6; }
.cp-win.a[b-j0okx3kndg] { fill: #ffb547; }
.cp-win.blink[b-j0okx3kndg] { animation: cpBlink-b-j0okx3kndg steps(1) infinite; }
@keyframes cpBlink-b-j0okx3kndg { 0% { fill-opacity: .75; } 60% { fill-opacity: .06; } }
.cp-haze[b-j0okx3kndg] { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; background: linear-gradient(0deg, color-mix(in srgb, #ff2bd6 18%, transparent), transparent); }
.cp-bar[b-j0okx3kndg] { position: absolute; left: 0; right: 0; opacity: 0; background: linear-gradient(90deg, transparent, #00e5ff66, #ff2bd666, transparent); animation: cpBar-b-j0okx3kndg steps(1) infinite; }
@keyframes cpBar-b-j0okx3kndg { 0% { opacity: 0; transform: none; } 90% { opacity: .9; transform: translateX(-4%); } 95% { opacity: .5; transform: translateX(3%); } }
.cp-scan[b-j0okx3kndg] { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px); }

/* ── ดาต้าเซ็นเตอร์ ──
   Status LEDs are the colours real ones are — green and amber mean something on a rack — and activity
   lights take the accent. */
.anim-datacenter[b-j0okx3kndg] { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--mud-palette-primary) 12%, #070c16), #02040a 80%); }
.dc-rack[b-j0okx3kndg] { fill: #070b13; stroke: #1d2839; stroke-width: 2; }
.dc-face[b-j0okx3kndg] { fill: #0d1420; stroke: #05080e; stroke-width: 1; }
.dc-tag[b-j0okx3kndg] { fill: #1a2436; }
.dc-vent[b-j0okx3kndg] { stroke: #172133; stroke-width: 2; }
.dc-led.ok[b-j0okx3kndg] { fill: #34d399; }
.dc-led.act[b-j0okx3kndg] { fill: var(--ink-hot); }
.dc-led.warn[b-j0okx3kndg] { fill: #fbbf24; }
.dc-led.blink[b-j0okx3kndg] { animation: dcBlink-b-j0okx3kndg steps(1) infinite; }
@keyframes dcBlink-b-j0okx3kndg { 0% { fill-opacity: 1; } 50% { fill-opacity: .12; } }
.dc-label[b-j0okx3kndg] { fill: #4b5b75; font: 600 13px Consolas, "Cascadia Mono", monospace; letter-spacing: 2px; }
.dc-sweep[b-j0okx3kndg] {
    position: absolute; top: 0; bottom: 0; left: -30%; width: 26%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent), transparent);
    animation: dcSweep-b-j0okx3kndg 8s ease-in-out infinite;
}
@keyframes dcSweep-b-j0okx3kndg { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(520%); } }
.dc-floor[b-j0okx3kndg] { position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 9%, transparent)); }

/* ── ออโรร่า ── */
.anim-aurora[b-j0okx3kndg] { background: linear-gradient(120deg, var(--mud-palette-text-primary), var(--mud-palette-text-primary) 55%, var(--mud-palette-text-primary)); }
.au-blob[b-j0okx3kndg] { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; }
.au-blob.b1[b-j0okx3kndg] { width: 46vw; height: 46vw; background: var(--mud-palette-secondary); top: -10%; left: -8%; animation: auFloat1-b-j0okx3kndg 15s ease-in-out infinite; }
.au-blob.b2[b-j0okx3kndg] { width: 40vw; height: 40vw; background: var(--mud-palette-secondary); bottom: -12%; right: -6%; animation: auFloat2-b-j0okx3kndg 19s ease-in-out infinite; }
.au-blob.b3[b-j0okx3kndg] { width: 36vw; height: 36vw; background: var(--mud-palette-info); top: 28%; left: 34%; animation: auFloat3-b-j0okx3kndg 17s ease-in-out infinite; }
@keyframes auFloat1-b-j0okx3kndg { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes auFloat2-b-j0okx3kndg { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8vw, -6vh) scale(1.15); } }
@keyframes auFloat3-b-j0okx3kndg { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vw, 8vh) scale(.9); } }

/* ── ไล่สี ── */
.anim-gradient[b-j0okx3kndg] {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%; animation: gradShift-b-j0okx3kndg 16s ease infinite;
}
@keyframes gradShift-b-j0okx3kndg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── คลื่น ── */
.anim-waves[b-j0okx3kndg] { background: linear-gradient(180deg, #1e3a8a, var(--mud-palette-info)); }
.wave[b-j0okx3kndg] { position: absolute; left: -50%; width: 200%; height: 200%; border-radius: 43%; }
.wave.w1[b-j0okx3kndg] { bottom: -140%; background: rgba(255, 255, 255, .10); animation: spin-b-j0okx3kndg 12s linear infinite; }
.wave.w2[b-j0okx3kndg] { bottom: -142%; background: rgba(255, 255, 255, .07); animation: spin-b-j0okx3kndg 18s linear infinite; }
.wave.w3[b-j0okx3kndg] { bottom: -138%; background: rgba(255, 255, 255, .05); animation: spin-b-j0okx3kndg 26s linear infinite; }

/* ── ฟองอากาศ ── */
.anim-bubbles[b-j0okx3kndg] { background: linear-gradient(180deg, var(--mud-palette-info), #164e63); }
.bubble[b-j0okx3kndg] {
    position: absolute; bottom: -140px; border-radius: 50%;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
    animation: bubbleRise-b-j0okx3kndg linear infinite;
}
@keyframes bubbleRise-b-j0okx3kndg {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    12% { opacity: .85; }
    100% { transform: translateY(-118vh) scale(1.1); opacity: 0; }
}

/* ── อนุภาค ── */
.anim-particles[b-j0okx3kndg] { background: radial-gradient(circle at 50% 38%, var(--mud-palette-text-primary), var(--mud-palette-text-primary) 75%); }
.particle[b-j0okx3kndg] {
    position: absolute; border-radius: 50%;
    background: rgba(129, 140, 248, .85); box-shadow: 0 0 8px rgba(129, 140, 248, .8);
    animation: drift-b-j0okx3kndg ease-in-out infinite;
}
@keyframes drift-b-j0okx3kndg { 0%, 100% { transform: translate(0, 0); opacity: .25; } 50% { transform: translate(var(--dx), var(--dy)); opacity: 1; } }

/* ── ห้วงอวกาศ ── */
.anim-starfield[b-j0okx3kndg] { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); }
.star[b-j0okx3kndg] { position: absolute; border-radius: 50%; background: var(--mud-palette-surface); animation: twinkle-b-j0okx3kndg ease-in-out infinite; }
@keyframes twinkle-b-j0okx3kndg { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
.shooting-star[b-j0okx3kndg] {
    position: absolute; top: 12%; left: -10%; width: 120px; height: 2px; opacity: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    border-radius: 2px; filter: drop-shadow(0 0 6px #fff);
    animation: shoot-b-j0okx3kndg 7s ease-in infinite;
}
@keyframes shoot-b-j0okx3kndg {
    0% { transform: translate(0, 0) rotate(18deg); opacity: 0; }
    6% { opacity: 1; }
    18% { transform: translate(115vw, 40vh) rotate(18deg); opacity: 0; }
    100% { opacity: 0; }
}

/* ── Small screens and reduced motion ── */
@media (max-width: 700px) {
    .net-label[b-j0okx3kndg], .net-radar[b-j0okx3kndg], .cc-chip-label[b-j0okx3kndg], .dc-label[b-j0okx3kndg] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .itam-login-bg *[b-j0okx3kndg], .itam-login-bg *[b-j0okx3kndg]::before, .itam-login-bg *[b-j0okx3kndg]::after { animation: none !important; }
}
/* _content/ITAM.Web/Components/Pages/Monitor/DeviceMonitor.razor.rz.scp.css */
/* ─────────────  HEADER  ───────────── */
.dm-header[b-1o5zwu6wvh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dm-page[b-1o5zwu6wvh]  .dm-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.dm-subtitle[b-1o5zwu6wvh] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
}

.dm-subtitle-warn[b-1o5zwu6wvh] { color: var(--mud-palette-warning); }
.dm-subtitle-muted[b-1o5zwu6wvh] { color: var(--mud-palette-text-disabled); }

.dm-header-right[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dm-viewtoggle[b-1o5zwu6wvh] {
    display: inline-flex;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 3px;
}

.dm-vt-btn[b-1o5zwu6wvh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: none;
    background: transparent;
    padding: .45rem .85rem;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}

.dm-vt-btn.active[b-1o5zwu6wvh] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.dm-vt-btn[b-1o5zwu6wvh]  .mud-icon-root { font-size: 1rem; }

.dm-btn[b-1o5zwu6wvh] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s ease;
}

.dm-btn:hover:not(:disabled)[b-1o5zwu6wvh] { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }
.dm-btn:disabled[b-1o5zwu6wvh] { opacity: .6; cursor: default; }
.dm-btn[b-1o5zwu6wvh]  .mud-icon-root { font-size: 1rem; }

/* ─────────────  KPI ROW  ───────────── */
.dm-kpi-row[b-1o5zwu6wvh] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.dm-page[b-1o5zwu6wvh]  .dm-kpi-card {
    text-align: center;
    border-left: 4px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

/* the two read-only tiles are not filters */
.dm-page[b-1o5zwu6wvh]  .dm-kpi-rate,
.dm-page[b-1o5zwu6wvh]  .dm-kpi-sweep { cursor: default; }

.dm-page[b-1o5zwu6wvh]  .dm-kpi-card.picked {
    box-shadow: 0 0 0 2px var(--mud-palette-primary) inset;
}

.dm-kpi-value[b-1o5zwu6wvh] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.dm-kpi-value-sm[b-1o5zwu6wvh] { font-size: 1.25rem; }

.dm-kpi-label[b-1o5zwu6wvh] {
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
    margin-top: .25rem;
}

.dm-kpi-online[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-success); }
.dm-kpi-online .dm-kpi-value[b-1o5zwu6wvh] { color: var(--mud-palette-success); }
.dm-kpi-offline[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-error); }
.dm-kpi-offline .dm-kpi-value[b-1o5zwu6wvh] { color: var(--mud-palette-error); }
.dm-kpi-unknown[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-lines-default); }
.dm-page[b-1o5zwu6wvh]  .dm-kpi-rate { border-left-color: var(--mud-palette-info); }
.dm-page[b-1o5zwu6wvh]  .dm-kpi-sweep { border-left-color: var(--mud-palette-secondary); }

/* ─────────────  TOOLBAR  ───────────── */
.dm-toolbar[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dm-search[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: .5rem .75rem;
    flex: 1 1 280px;
    min-width: 240px;
}

.dm-search[b-1o5zwu6wvh]  .mud-icon-root { color: var(--mud-palette-text-disabled); }

.dm-search input[b-1o5zwu6wvh] {
    border: none;
    outline: none;
    flex: 1;
    font-size: .9rem;
    background: transparent;
}

.dm-page[b-1o5zwu6wvh]  .dm-filter-dd { min-width: 160px; }

.dm-clear-btn[b-1o5zwu6wvh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.12);
    background: rgba(var(--mud-palette-error-rgb), 0.12);
    color: var(--mud-palette-error);
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
}

.dm-count[b-1o5zwu6wvh] { font-size: .8rem; color: var(--mud-palette-text-disabled); margin-left: auto; }

.dm-page[b-1o5zwu6wvh]  .dm-error {
    border-left: 4px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
    margin-bottom: 1rem;
}

.dm-empty[b-1o5zwu6wvh] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

/* ─────────────  STATUS DOT  ───────────── */
.dm-dot[b-1o5zwu6wvh] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    flex: none;
}

.dm-online .dm-dot[b-1o5zwu6wvh] { background: var(--mud-palette-success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dm-offline .dm-dot[b-1o5zwu6wvh] { background: var(--mud-palette-error); box-shadow: 0 0 0 3px rgba(239,68,68,.18); animation: dm-blink-b-1o5zwu6wvh 1.6s ease-in-out infinite; }
.dm-unknown .dm-dot[b-1o5zwu6wvh] { background: var(--mud-palette-lines-default); }

@keyframes dm-blink-b-1o5zwu6wvh {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ─────────────  WALL VIEW  ───────────── */
.dm-wall[b-1o5zwu6wvh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .8rem;
}

.dm-tile[b-1o5zwu6wvh] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: .7rem .8rem;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    overflow: hidden;
}

.dm-tile:hover[b-1o5zwu6wvh] { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }

.dm-tile.dm-online[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-success); }
.dm-tile.dm-offline[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), 0.12); }
.dm-tile.dm-unknown[b-1o5zwu6wvh] { border-left-color: var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }

.dm-tile-top[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
}

.dm-tile-type[b-1o5zwu6wvh] { font-size: .95rem; }

.dm-tile-code[b-1o5zwu6wvh] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
}

.dm-tile-name[b-1o5zwu6wvh] {
    font-weight: 600;
    font-size: .92rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-tile-ip[b-1o5zwu6wvh] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .15rem;
}

.dm-tile-foot[b-1o5zwu6wvh] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    margin-top: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-tile.dm-offline .dm-tile-foot[b-1o5zwu6wvh] { color: var(--mud-palette-error); }

/* ─────────────  GROUPED VIEW (แยกตามหมวด)  ───────────── */
.dm-groups[b-1o5zwu6wvh] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.dm-group[b-1o5zwu6wvh] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
}

.dm-group-head[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    user-select: none;
}

.dm-group-head:hover[b-1o5zwu6wvh] { background: var(--mud-palette-background-gray); }
.dm-group-head[b-1o5zwu6wvh]  .mud-icon-root { font-size: 1.1rem; color: var(--mud-palette-text-disabled); }

.dm-group-icon[b-1o5zwu6wvh] { font-size: 1.05rem; }

.dm-group-name[b-1o5zwu6wvh] {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-size: .95rem;
}

.dm-group-total[b-1o5zwu6wvh] { font-size: .76rem; color: var(--mud-palette-text-disabled); }

.dm-group-chips[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.dm-chip[b-1o5zwu6wvh] {
    font-size: .74rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dm-chip-online[b-1o5zwu6wvh] { background: rgba(var(--mud-palette-success-rgb), 0.12); border-color: rgba(var(--mud-palette-success-rgb), 0.35); color: var(--mud-palette-success); }
.dm-chip-offline[b-1o5zwu6wvh] { background: rgba(var(--mud-palette-error-rgb), 0.12); border-color: rgba(var(--mud-palette-error-rgb), 0.12); color: var(--mud-palette-error); font-weight: 600; }
.dm-chip-unknown[b-1o5zwu6wvh] { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }

.dm-group-bar[b-1o5zwu6wvh] {
    width: 110px;
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-error-rgb), 0.12);
    overflow: hidden;
    flex: none;
}

.dm-group-bar-fill[b-1o5zwu6wvh] {
    display: block;
    height: 100%;
    background: var(--mud-palette-success);
}

.dm-group-pct[b-1o5zwu6wvh] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    width: 2.8rem;
    text-align: right;
    flex: none;
}

.dm-group-body[b-1o5zwu6wvh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: .8rem;
    padding: .8rem;
    border-top: 1px solid var(--mud-palette-background-gray);
    background: var(--mud-palette-background-gray);
}

.dm-section[b-1o5zwu6wvh] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    padding: .55rem;
}

.dm-section.dm-offline[b-1o5zwu6wvh] { border-color: rgba(var(--mud-palette-error-rgb), 0.12); }
.dm-section.dm-unknown[b-1o5zwu6wvh] { border-color: var(--mud-palette-lines-default); }

.dm-section-head[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .1rem .25rem .5rem;
}

.dm-section-label[b-1o5zwu6wvh] { font-size: .82rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.dm-section.dm-offline .dm-section-label[b-1o5zwu6wvh] { color: var(--mud-palette-error); }
.dm-section.dm-online .dm-section-label[b-1o5zwu6wvh] { color: var(--mud-palette-success); }
.dm-section.dm-unknown .dm-section-label[b-1o5zwu6wvh] { color: var(--mud-palette-text-secondary); }

.dm-section-count[b-1o5zwu6wvh] {
    margin-left: auto;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-radius: 999px;
    padding: .05rem .5rem;
}

.dm-section-tiles[b-1o5zwu6wvh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .5rem;
}

/* ─────────────  TABLE VIEW  ───────────── */
.dm-table-wrap[b-1o5zwu6wvh] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow-x: auto;
}

.dm-table[b-1o5zwu6wvh] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.dm-table thead th[b-1o5zwu6wvh] {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.dm-table tbody td[b-1o5zwu6wvh] {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    vertical-align: top;
}

.dm-table tbody tr[b-1o5zwu6wvh] { cursor: pointer; }
.dm-table tbody tr:hover[b-1o5zwu6wvh] { background: var(--mud-palette-background-gray); }
.dm-table tbody tr.dm-offline[b-1o5zwu6wvh] { background: rgba(var(--mud-palette-error-rgb), 0.12); }
.dm-table tbody tr.dm-offline:hover[b-1o5zwu6wvh] { background: rgba(var(--mud-palette-error-rgb), 0.2); }

.dm-td-status[b-1o5zwu6wvh] {
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.dm-status-text[b-1o5zwu6wvh] { font-size: .8rem; }
.dm-offline .dm-status-text[b-1o5zwu6wvh] { color: var(--mud-palette-error); font-weight: 600; }
.dm-online .dm-status-text[b-1o5zwu6wvh] { color: var(--mud-palette-success); }
.dm-unknown .dm-status-text[b-1o5zwu6wvh] { color: var(--mud-palette-text-disabled); }

.dm-th-num[b-1o5zwu6wvh], .dm-td-num[b-1o5zwu6wvh] { text-align: right; white-space: nowrap; }

/* The pencil column. Narrow and last, because it is an action on the row rather than
   anything about the device. */
.dm-th-act[b-1o5zwu6wvh], .dm-td-act[b-1o5zwu6wvh] { width: 44px; text-align: center; padding: 0; }

.dm-mono[b-1o5zwu6wvh] { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; }
.dm-mac[b-1o5zwu6wvh] { color: var(--mud-palette-text-secondary); }

/* one chip per address — a machine's field can hold several */
.dm-addr[b-1o5zwu6wvh] {
    display: block;
    white-space: nowrap;
}

.dm-addr.answered[b-1o5zwu6wvh] {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.dm-cell-name[b-1o5zwu6wvh] { font-weight: 600; color: var(--mud-palette-text-primary); }
.dm-cell-sub[b-1o5zwu6wvh] { font-size: .76rem; color: var(--mud-palette-text-disabled); }

/* ─────────────  RESPONSIVE  ───────────── */
@media (max-width: 1100px) {
    .dm-kpi-row[b-1o5zwu6wvh] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .dm-kpi-row[b-1o5zwu6wvh] { grid-template-columns: repeat(2, 1fr); }
    .dm-wall[b-1o5zwu6wvh] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .dm-group-body[b-1o5zwu6wvh] { grid-template-columns: 1fr; }
    .dm-group-bar[b-1o5zwu6wvh], .dm-group-pct[b-1o5zwu6wvh], .dm-group-total[b-1o5zwu6wvh] { display: none; }
}
/* _content/ITAM.Web/Components/Pages/Network/NetworkHub.razor.rz.scp.css */
/* Echoes the survey project's mini site — eyebrow, stat pills, quiet section rules — so the two
   read as one set of documents even though this half is live. */

.nh-header[b-ntvvzm30rb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.nh-eyebrow[b-ntvvzm30rb] {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    font-weight: 700;
    margin-bottom: .35rem;
}

.nh-page[b-ntvvzm30rb]  .nh-title {
    font-size: 1.7rem;
    font-weight: 780;
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
    color: var(--mud-palette-text-primary);
}

.nh-sub[b-ntvvzm30rb] {
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    margin: 0;
    max-width: 68ch;
}

.nh-header-right[b-ntvvzm30rb] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nh-btn[b-ntvvzm30rb] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
}

.nh-btn:hover:not(:disabled)[b-ntvvzm30rb] { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }
.nh-btn:disabled[b-ntvvzm30rb] { opacity: .6; cursor: default; }
.nh-btn[b-ntvvzm30rb]  .mud-icon-root { font-size: 1rem; }

.nh-page[b-ntvvzm30rb]  .nh-error {
    border-left: 4px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
    margin-bottom: 1rem;
}

/* ─────────────  STAT PILLS  ───────────── */
.nh-stats[b-ntvvzm30rb] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.nh-stat[b-ntvvzm30rb] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    padding: .6rem 1rem;
    min-width: 108px;
    box-shadow: 0 1px 2px rgba(26,36,52,.06);
}

.nh-stat b[b-ntvvzm30rb] {
    display: block;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}

.nh-stat span[b-ntvvzm30rb] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.nh-stat-online b[b-ntvvzm30rb] { color: var(--mud-palette-success); }
.nh-stat-offline b[b-ntvvzm30rb] { color: var(--mud-palette-error); }

/* ─────────────  SECTIONS  ───────────── */
.nh-sec[b-ntvvzm30rb] { margin-top: 2rem; }

.nh-sec-h[b-ntvvzm30rb] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: .9rem;
}

.nh-empty[b-ntvvzm30rb] {
    padding: 1.5rem;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 11px;
    font-size: .88rem;
}

.nh-cmd[b-ntvvzm30rb] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 7px;
    padding: .5rem .7rem;
    margin: .6rem 0;
    overflow-x: auto;
}

.nh-empty code[b-ntvvzm30rb], .nh-sub code[b-ntvvzm30rb] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .86em;
    background: var(--mud-palette-background-gray);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ─────────────  CARDS  ───────────── */
.nh-grid[b-ntvvzm30rb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
}

.nh-card[b-ntvvzm30rb] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    padding: .8rem .9rem;
    box-shadow: 0 1px 2px rgba(26,36,52,.06);
    transition: transform .12s ease, box-shadow .12s ease;
}

.nh-subnet[b-ntvvzm30rb], .nh-doc[b-ntvvzm30rb] { cursor: pointer; }
.nh-subnet:hover[b-ntvvzm30rb], .nh-doc:hover[b-ntvvzm30rb] { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,36,52,.1); }

.nh-card-top[b-ntvvzm30rb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.nh-role[b-ntvvzm30rb] { font-size: .74rem; color: var(--mud-palette-text-secondary); }

.nh-card-num[b-ntvvzm30rb] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
}

.nh-card-foot[b-ntvvzm30rb] {
    display: flex;
    gap: .6rem;
    font-size: .74rem;
    margin-top: .4rem;
}

.nh-ok[b-ntvvzm30rb] { color: var(--mud-palette-success); }
.nh-bad[b-ntvvzm30rb] { color: var(--mud-palette-error); font-weight: 600; }
.nh-warn[b-ntvvzm30rb] { color: var(--mud-palette-warning); }
.nh-faint[b-ntvvzm30rb] { color: var(--mud-palette-text-disabled); }

.nh-mono[b-ntvvzm30rb] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.nh-bar[b-ntvvzm30rb] {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #fbdcd6;
    overflow: hidden;
    margin-top: .5rem;
}

.nh-bar-fill[b-ntvvzm30rb] { display: block; height: 100%; background: var(--mud-palette-success); }

/* ─────────────  STATUS DOT  ───────────── */
.nh-dot[b-ntvvzm30rb] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    flex: none;
}

.nh-dot-online[b-ntvvzm30rb] { background: var(--mud-palette-success); }
.nh-dot-offline[b-ntvvzm30rb] { background: var(--mud-palette-error); }
.nh-dot-unknown[b-ntvvzm30rb] { background: var(--mud-palette-lines-default); }

/* ─────────────  SWITCHES  ───────────── */
.nh-switches[b-ntvvzm30rb] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.nh-switch[b-ntvvzm30rb] { padding: 0; }

.nh-switch-head[b-ntvvzm30rb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    cursor: pointer;
    user-select: none;
}

.nh-switch-head:hover[b-ntvvzm30rb] { background: var(--mud-palette-background-gray); }
.nh-switch-head[b-ntvvzm30rb]  .mud-icon-root { font-size: 1.1rem; color: var(--mud-palette-text-disabled); }

.nh-switch-name[b-ntvvzm30rb] { font-weight: 640; color: var(--mud-palette-text-primary); }

.nh-chip[b-ntvvzm30rb] {
    margin-left: auto;
    font-size: .74rem;
    color: var(--mud-palette-primary);
    background: #e5eefb;
    border-radius: 999px;
    padding: .1rem .6rem;
    white-space: nowrap;
}

.nh-ports[b-ntvvzm30rb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .3rem;
    padding: .3rem .8rem .8rem;
    border-top: 1px solid #eef1f6;
}

.nh-port[b-ntvvzm30rb] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .4rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .82rem;
}

.nh-port:hover[b-ntvvzm30rb] { background: var(--mud-palette-background-gray); }

.nh-port-no[b-ntvvzm30rb] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    padding: 0 .35rem;
    min-width: 48px;
    text-align: center;
    flex: none;
}

.nh-port-dev[b-ntvvzm30rb] {
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────  DOCS  ───────────── */
.nh-doc[b-ntvvzm30rb] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.nh-doc-title[b-ntvvzm30rb] {
    font-weight: 640;
    color: var(--mud-palette-text-primary);
    font-size: .92rem;
    margin-bottom: .15rem;
}

.nh-doc-foot[b-ntvvzm30rb] {
    display: flex;
    justify-content: space-between;
    font-size: .74rem;
    margin-top: .5rem;
    color: var(--mud-palette-text-disabled);
}

@media (max-width: 640px) {
    .nh-ports[b-ntvvzm30rb] { grid-template-columns: 1fr; }
}
/* _content/ITAM.Web/Components/Pages/Network/NetworkTopology.razor.rz.scp.css */
.nt-header[b-vy1uru38rq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nt-eyebrow[b-vy1uru38rq] {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    font-weight: 700;
    margin-bottom: .35rem;
}

.nt-page[b-vy1uru38rq]  .nt-title {
    font-size: 1.7rem;
    font-weight: 780;
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
    color: var(--mud-palette-text-primary);
}

.nt-sub[b-vy1uru38rq] { color: var(--mud-palette-text-secondary); font-size: .9rem; margin: 0; max-width: 70ch; }

.nt-header-right[b-vy1uru38rq] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.nt-seg[b-vy1uru38rq] {
    display: inline-flex;
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 3px;
}

.nt-seg-btn[b-vy1uru38rq] {
    border: none;
    background: transparent;
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.nt-seg-btn.active[b-vy1uru38rq] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.nt-btn[b-vy1uru38rq] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    padding: .45rem .7rem;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
}

.nt-btn:hover:not(:disabled)[b-vy1uru38rq] { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }
.nt-btn:disabled[b-vy1uru38rq] { opacity: .6; cursor: default; }
.nt-btn[b-vy1uru38rq]  .mud-icon-root { font-size: 1rem; }

.nt-zoom[b-vy1uru38rq] { display: inline-flex; align-items: center; gap: .35rem; }
.nt-zoom-val[b-vy1uru38rq] { font-size: .78rem; color: var(--mud-palette-text-secondary); min-width: 3rem; text-align: center; }

.nt-page[b-vy1uru38rq]  .nt-error { border-left: 4px solid var(--mud-palette-error); color: var(--mud-palette-error); margin-bottom: 1rem; }

/* ─────────────  COVERAGE STRIP  ───────────── */
.nt-coverage[b-vy1uru38rq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    padding: .6rem .9rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    margin-bottom: .9rem;
}

.nt-coverage b[b-vy1uru38rq] { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.nt-warn[b-vy1uru38rq] { color: var(--mud-palette-warning); }
.nt-warn b[b-vy1uru38rq] { color: var(--mud-palette-warning); }
.nt-faint[b-vy1uru38rq] { color: var(--mud-palette-text-disabled); }
.nt-link[b-vy1uru38rq] { margin-left: auto; color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; }
.nt-link:hover[b-vy1uru38rq] { text-decoration: underline; }

.nt-empty[b-vy1uru38rq] {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.nt-empty code[b-vy1uru38rq] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .86em;
    background: var(--mud-palette-background-gray);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* ─────────────  CANVAS  ───────────── */
.nt-canvas[b-vy1uru38rq] {
    background: var(--mud-palette-surface);
    background-image: radial-gradient(#e8edf4 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: auto;
    max-height: 72vh;
    padding: .5rem;
}

/* ─────────────  EDGES  ───────────── */
.nt-edge[b-vy1uru38rq] {
    fill: none;
    stroke: var(--mud-palette-text-disabled);
    stroke-width: 1.6;
}

.nt-edge.live[b-vy1uru38rq] { stroke: #7dd3a8; }

.nt-port[b-vy1uru38rq] {
    font-size: 9.5px;
    fill: var(--mud-palette-text-disabled);
    text-anchor: middle;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3px;
}

/* ─────────────  NODES  ───────────── */
.nt-node[b-vy1uru38rq] { cursor: pointer; }

.nt-box[b-vy1uru38rq] {
    fill: #fff;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1.2;
}

.nt-node:hover .nt-box[b-vy1uru38rq] { stroke: var(--mud-palette-primary); stroke-width: 1.8; }
.nt-node.infra .nt-box[b-vy1uru38rq] { stroke: var(--mud-palette-text-disabled); }

.nt-name[b-vy1uru38rq] {
    font-size: 12.5px;
    font-weight: 640;
    fill: var(--mud-palette-text-primary);
}

.nt-icon[b-vy1uru38rq] { font-size: 12px; }

.nt-meta[b-vy1uru38rq] {
    font-size: 10.5px;
    fill: var(--mud-palette-text-secondary);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.nt-vlan[b-vy1uru38rq] {
    font-size: 9.5px;
    fill: var(--mud-palette-text-secondary);
    text-anchor: end;
}

.nt-dot.online[b-vy1uru38rq] { fill: var(--mud-palette-success); }
.nt-dot.offline[b-vy1uru38rq] { fill: var(--mud-palette-error); }
.nt-dot.unknown[b-vy1uru38rq] { fill: var(--mud-palette-lines-default); }

.nt-badge rect[b-vy1uru38rq] { fill: var(--mud-palette-background-gray); stroke: var(--mud-palette-lines-default); }
.nt-badge text[b-vy1uru38rq] { font-size: 10px; fill: var(--mud-palette-text-secondary); text-anchor: middle; }

/* ─────────────  LEGEND  ───────────── */
.nt-legend[b-vy1uru38rq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .7rem;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.nt-key[b-vy1uru38rq] { display: inline-flex; align-items: center; gap: .35rem; }

.nt-key i[b-vy1uru38rq] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
}

.nt-legend a[b-vy1uru38rq] { color: var(--mud-palette-primary); }
/* _content/ITAM.Web/Components/Pages/Network/VlanAdmin.razor.rz.scp.css */
.vl-header[b-3ozctyfcsf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vl-eyebrow[b-3ozctyfcsf] {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    font-weight: 700;
    margin-bottom: .35rem;
}

.vl-page[b-3ozctyfcsf]  .vl-title {
    font-size: 1.7rem;
    font-weight: 780;
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
    color: var(--mud-palette-text-primary);
}

.vl-sub[b-3ozctyfcsf] { color: var(--mud-palette-text-secondary); font-size: .9rem; margin: 0; max-width: 72ch; }

.vl-header-right[b-3ozctyfcsf] { display: flex; align-items: center; gap: .8rem; }
.vl-link[b-3ozctyfcsf] { color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; font-size: .85rem; }
.vl-link:hover[b-3ozctyfcsf] { text-decoration: underline; }

.vl-ok[b-3ozctyfcsf] { border-left: 4px solid var(--mud-palette-success); color: var(--mud-palette-success); margin-bottom: 1rem; }
.vl-error[b-3ozctyfcsf] { border-left: 4px solid var(--mud-palette-error); color: var(--mud-palette-error); margin-bottom: 1rem; }

.vl-empty[b-3ozctyfcsf] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.vl-empty-sm[b-3ozctyfcsf] { padding: 1rem; }

/* ─────────────  EDITOR  ───────────── */
.vl-page[b-3ozctyfcsf]  .vl-editor { margin-bottom: 1.25rem; border-left: 4px solid var(--mud-palette-primary); }
.vl-editor-h[b-3ozctyfcsf] { font-weight: 700; color: var(--mud-palette-text-primary); margin-bottom: .8rem; }

.vl-form[b-3ozctyfcsf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .8rem;
}

.vl-form label[b-3ozctyfcsf] { display: flex; flex-direction: column; gap: .3rem; }
.vl-form label > span[b-3ozctyfcsf] { font-size: .78rem; color: var(--mud-palette-text-secondary); }
.vl-wide[b-3ozctyfcsf] { grid-column: 1 / -1; }

.vl-colors[b-3ozctyfcsf] { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

.vl-swatch[b-3ozctyfcsf] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.vl-swatch.picked[b-3ozctyfcsf] { border-color: var(--mud-palette-text-primary); }

.vl-swatch-auto[b-3ozctyfcsf] {
    width: auto;
    padding: 0 .5rem;
    height: 24px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    border: 2px solid transparent;
}

.vl-editor-actions[b-3ozctyfcsf] { display: flex; gap: .5rem; margin-top: 1rem; }

/* ─────────────  CARDS  ───────────── */
.vl-grid[b-3ozctyfcsf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .8rem;
}

.vl-page[b-3ozctyfcsf]  .vl-card { position: relative; }

.vl-card-top[b-3ozctyfcsf] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .4rem;
}

.vl-tag[b-3ozctyfcsf] {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    border-radius: 6px;
    padding: .1rem .4rem;
    font-variant-numeric: tabular-nums;
}

.vl-name[b-3ozctyfcsf] {
    font-weight: 640;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vl-actions[b-3ozctyfcsf] { margin-left: auto; display: flex; gap: .15rem; }

.vl-icon[b-3ozctyfcsf] {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: pointer;
    padding: .15rem;
    border-radius: 5px;
}

.vl-icon:hover[b-3ozctyfcsf] { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }
.vl-icon-danger:hover[b-3ozctyfcsf] { background: rgba(var(--mud-palette-error-rgb), 0.12); color: var(--mud-palette-error); }
.vl-icon[b-3ozctyfcsf]  .mud-icon-root { font-size: 1rem; }

.vl-mono[b-3ozctyfcsf] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
}

.vl-strong[b-3ozctyfcsf] { font-weight: 640; }
.vl-faint[b-3ozctyfcsf] { color: var(--mud-palette-text-disabled); font-size: .78rem; }

.vl-count[b-3ozctyfcsf] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-top: .4rem;
    font-variant-numeric: tabular-nums;
}

.vl-count .vl-faint[b-3ozctyfcsf] { font-size: .78rem; font-weight: 400; }

.vl-kinds[b-3ozctyfcsf] { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }

.vl-kind[b-3ozctyfcsf] {
    font-size: .72rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: .05rem .5rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.vl-desc[b-3ozctyfcsf] { font-size: .78rem; color: var(--mud-palette-text-secondary); margin-top: .5rem; }

/* ─────────────  UNMAPPED  ───────────── */
.vl-sec[b-3ozctyfcsf] { margin-top: 2rem; }

.vl-sec-h[b-3ozctyfcsf] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: .9rem;
}

.vl-unmapped[b-3ozctyfcsf] {
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 11px;
    padding: .8rem .9rem;
}

.vl-add[b-3ozctyfcsf] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .6rem;
    border: 1px solid var(--mud-palette-info);
    background: rgba(var(--mud-palette-info-rgb), 0.12);
    color: var(--mud-palette-primary);
    border-radius: 8px;
    padding: .3rem .6rem;
    font-size: .78rem;
    cursor: pointer;
}

.vl-add:hover[b-3ozctyfcsf] { background: rgba(var(--mud-palette-info-rgb), 0.12); }
.vl-add[b-3ozctyfcsf]  .mud-icon-root { font-size: .95rem; }
/* _content/ITAM.Web/Components/Shared/LabelPreview.razor.rz.scp.css */
.lp-stage[b-c9yucn5bej] {
    display: flex;
    justify-content: center;
    padding: 20px 12px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.lp-sticker[b-c9yucn5bej] {
    width: min(100%, 440px);
    height: auto;
    image-rendering: pixelated;
    border-radius: 14px; /* die-cut label corners */
    box-shadow: var(--mud-elevation-3);
}
/* _content/ITAM.Web/Components/Ui/ItamScheduler.razor.rz.scp.css */
/* The calendar grid. Deliberately plain CSS on top of the MudBlazor palette variables so it follows
   the theme (including dark mode) without a second set of colours to keep in step. */

.itam-cal-grid[b-o1zur5foco] {
    display: grid;
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.itam-cal-month[b-o1zur5foco], .itam-cal-week[b-o1zur5foco] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.itam-cal-day[b-o1zur5foco] { grid-template-columns: minmax(0, 1fr); }
.itam-cal-year[b-o1zur5foco] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.itam-cal-head[b-o1zur5foco] {
    background: var(--mud-palette-background-gray);
    padding: 6px 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.itam-cal-cell[b-o1zur5foco] {
    background: var(--mud-palette-surface);
    min-height: 92px;
    padding: 4px 6px;
    cursor: pointer;
    overflow: hidden;
}

.itam-cal-cell:hover[b-o1zur5foco] { background: var(--mud-palette-action-default-hover); }

/* Days from the neighbouring months are still clickable - they are part of the grid - but they read
   as context rather than as this month. */
.itam-cal-outside[b-o1zur5foco] { opacity: .45; }

.itam-cal-today[b-o1zur5foco] { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); }

.itam-cal-daynum[b-o1zur5foco] {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.itam-cal-appt[b-o1zur5foco] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 3px;
    padding: 2px 5px;
    margin-bottom: 2px;
    font-size: .75rem;
    line-height: 1.35;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

.itam-cal-more[b-o1zur5foco] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 4px;
}

.itam-cal-yearcell[b-o1zur5foco] {
    background: var(--mud-palette-surface);
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.itam-cal-yearcell:hover[b-o1zur5foco] { background: var(--mud-palette-action-default-hover); }