/* /Components/KpiCard.razor.rz.scp.css */
/* The tile is a <button> so it is keyboard-reachable; these rules undo the button chrome and give
   it back the .card look from app.css. */
.kpi[b-wrw91c94zz] {
    border: 1px solid var(--color-neutral-200, #E3E5EA);
    border-left: 4px solid var(--color-neutral-300, #C9CCD4);
    background: #FFFFFF;
    cursor: pointer;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.kpi:hover[b-wrw91c94zz] {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(30, 33, 48, 0.1));
}

.kpi-selected[b-wrw91c94zz] {
    box-shadow: 0 0 0 2px var(--color-primary, #9B00E0);
}

/* app.css gives .card-body 1rem of padding all round; on a one-line tile that is most of the
   height. 0.5rem vertical is what takes the tile from roughly 5rem tall to roughly 2.5rem. */
.kpi-body[b-wrw91c94zz] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
}

.kpi-value[b-wrw91c94zz] {
    font-family: var(--font-display, inherit);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-neutral-900, #1E2130);
    /* The number must never be the thing that gets squeezed when the label is long. */
    flex: 0 0 auto;
}

.kpi-title[b-wrw91c94zz] {
    font-size: 0.8125rem;
    line-height: 1.2;
    /* "Expiring within 60 days" is wider than a quarter-row on a small window; let it wrap inside
       the tile rather than widen it. */
    min-width: 0;
}

.kpi-total[b-wrw91c94zz] {
    border-left-color: var(--color-primary, #9B00E0);
}

.kpi-ok[b-wrw91c94zz] {
    border-left-color: #1E9E62;
}

.kpi-warn[b-wrw91c94zz] {
    border-left-color: #D08700;
}

.kpi-bad[b-wrw91c94zz] {
    border-left-color: #D13438;
}
/* /Components/SortHeader.razor.rz.scp.css */
.sortable[b-t4x0c23fea] {
    cursor: pointer;
    user-select: none;
}

.sortable:hover[b-t4x0c23fea] {
    color: var(--color-primary, #9B00E0);
}

.sort-arrow[b-t4x0c23fea] {
    display: inline-block;
    width: 0.9em;
    margin-left: 0.25rem;
    font-size: 0.7em;
    color: var(--color-primary, #9B00E0);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-h6970jhl3d] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-h6970jhl3d] {
    flex: 1;
    background-color: var(--color-neutral-50);
    /* Load-bearing. A flex item defaults to `min-width: auto`, which refuses to shrink below the
       intrinsic width of the widest thing inside it — here the nine-column licence table. Without
       this, that table pushes main past the width the sidebar leaves it and the *document* gets a
       horizontal scrollbar, while the .table-scroll wrapper never engages because its container is
       already as wide as the table wanted. min-width: 0 pins main to the column, and the table
       scrolls inside its own card instead. */
    min-width: 0;
}

.sidebar[b-h6970jhl3d] {
    background-image: var(--sidebar-bg);
}

.top-row[b-h6970jhl3d] {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

    .sidebar[b-h6970jhl3d] {
        /* Pairs with main's min-width: 0 — once main can shrink, the sidebar must not be the thing
           that absorbs it, or the nav collapses instead of the table scrolling. */
        flex: 0 0 260px;
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

    .top-row[b-h6970jhl3d], article[b-h6970jhl3d] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-jk9iq6ypxg] {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-brand[b-jk9iq6ypxg] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.bi[b-jk9iq6ypxg] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
    opacity: 0.7;
    transition: opacity 150ms ease;
}

.nav-item[b-jk9iq6ypxg]  a.active .bi,
.nav-item[b-jk9iq6ypxg]  a:hover .bi {
    opacity: 1;
}

/* One rule per menu item. Bootstrap-icon SVGs are inlined as data URIs so the icon
   font package does not have to be referenced. Add a rule here when adding a tool. */

/* bi-key */
.bi-licenses-nav-menu[b-jk9iq6ypxg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23B0B5C0' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-1.535 1.5A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.83 4h1.34l.5-.5.5.5.5-.5.5.5.5-.5.5.5.646-.646L11.5 8.5l-.354-.354L11.5 7.793 11.146 7.44 10.793 7H6.83A3 3 0 0 0 4 5m0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");
}

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

.nav-item[b-jk9iq6ypxg] {
    font-size: 0.9375rem;
    padding-bottom: 0.375rem;
}

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

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

    .nav-item[b-jk9iq6ypxg]  a {
        color: var(--sidebar-text);
        border-radius: var(--radius-md);
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 2.75rem;
        transition: background-color 150ms ease, color 150ms ease;
        border-left: 3px solid transparent;
    }

.nav-item[b-jk9iq6ypxg]  a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    border-left-color: var(--color-primary);
}

.nav-item[b-jk9iq6ypxg]  a:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-active);
}

[b-jk9iq6ypxg] .nav-user-section {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: auto;
}

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

    .collapse[b-jk9iq6ypxg] {
        display: block;
    }

    .nav-scrollable[b-jk9iq6ypxg] {
        height: calc(100vh - 3.5rem - 5rem);
        overflow-y: auto;
    }
}
/* /Pages/Licenses.razor.rz.scp.css */
/* app.css caps every dialog at 480px, which is right for a confirmation and far too narrow for the
   licence editor's two-column form. A modal dialog's containing block is the viewport either way,
   so 100% here is the viewport width — but unlike 100vw it excludes the scrollbar, which 100vw
   would have counted and overflowed by. */
.editor-dialog[b-50i887xk40] {
    max-width: 760px;
    width: calc(100% - 2rem);
}

/* Deleted rows stay visible under "Show deleted items", greyed rather than hidden. */
.row-deleted > td[b-50i887xk40] {
    opacity: 0.55;
}

/* The Notes / Source / File cell runs to several lines; centring the one-line cells against it
   leaves the row looking ragged, so the whole row top-aligns as the register this replaced did.
   This has to be a selector rather than Bootstrap's .align-top utility: app.css sets
   `vertical-align: middle` on the cell itself, which beats the utility's value on the table. */
.table > tbody > tr > td[b-50i887xk40] {
    vertical-align: top;
}

/* ---- Notes / Source / File ----
   Notes run to 681 characters and sources to 337 in this register, so the column is capped and left
   to wrap. It is deliberately not truncated to one line: it is the column people read. */
.cell-notes[b-50i887xk40] {
    max-width: 20rem;
    min-width: 14rem;
}

.notes-text[b-50i887xk40] {
    font-size: 0.8125rem;
    /* pre-wrap because the migrated notes carry their own line breaks. */
    white-space: pre-wrap;
}

.notes-source[b-50i887xk40] {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500, #7C7F8E);
    white-space: pre-wrap;
}

/* A button, not an anchor: the file is fetched through the authenticated API and handed to the
   browser as a stream, so there is no URL to point an <a> at. Restyled to read as a link. */
.notes-file[b-50i887xk40] {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    color: var(--color-primary, #9B00E0);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.notes-file:hover[b-50i887xk40] {
    text-decoration: underline;
}

/* Cost is free text with no spaces to break on ("~$11,710/month"), which would otherwise widen the
   column past a max-width — only a hint to the auto table layout — and push the table wider. */
.cell-cost[b-50i887xk40] {
    max-width: 12rem;
    overflow-wrap: anywhere;
}
/* /Pages/Suppliers.razor.rz.scp.css */
/* app.css caps every dialog at 480px; the supplier editor is a two-column form. 100% rather than
   100vw: a modal dialog's containing block is the viewport either way, but 100vw counts the
   scrollbar and would overflow by its width. */
.editor-dialog[b-j9plz8fqsn] {
    max-width: 760px;
    width: calc(100% - 2rem);
}

.row-deleted > td[b-j9plz8fqsn] {
    opacity: 0.55;
}

/* Description and source run to several lines; centring the one-line cells against them leaves
   the row ragged. A selector rather than Bootstrap's .align-top utility, because app.css sets
   `vertical-align: middle` on the cell itself, which beats the utility's value on the table. */
.table > tbody > tr > td[b-j9plz8fqsn] {
    vertical-align: top;
}

/* Location, description and source run long in this register (264, 321 and 291 characters at the
   extreme). They are capped and left to wrap rather than truncated to one line — these are the
   columns people read, and the table scrolls inside .table-scroll if the sum is too wide. */
.cell-location[b-j9plz8fqsn] {
    max-width: 14rem;
    min-width: 9rem;
    font-size: 0.8125rem;
}

.cell-notes[b-j9plz8fqsn] {
    max-width: 20rem;
    min-width: 12rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

.cell-source[b-j9plz8fqsn] {
    max-width: 16rem;
    min-width: 10rem;
    font-size: 0.75rem;
    color: var(--color-neutral-500, #7C7F8E);
    white-space: pre-wrap;
}