:root { color-scheme: dark; }
html, body { min-height: 100%; }
body { background: #080b10; color: #f4f7fb; }
.login-shell { min-height: 100vh; }
.login-image {
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(2,6,12,.08), rgba(2,6,12,.72)),
                url('/assets/img/downtown-hutto.jpg') center center / cover no-repeat;
}
.login-panel { background: radial-gradient(circle at top right, #172033 0, #0b1018 45%, #080b10 100%); }
.login-card { width: min(100%, 430px); }
.brand-mark {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 14px; background: #2f6fed; box-shadow: 0 12px 30px rgba(47,111,237,.28);
    font-weight: 800;
}
.form-control { min-height: 52px; background: #101722; border-color: #263348; color: #fff; }
.form-control:focus { background: #101722; color: #fff; border-color: #6ea8fe; box-shadow: 0 0 0 .25rem rgba(47,111,237,.18); }
.dashboard-wrap { min-height: 100vh; background: radial-gradient(circle at top, #162038, #080b10 55%); }
.coming-card { max-width: 760px; border: 1px solid #263348; background: rgba(15,22,33,.88); box-shadow: 0 25px 70px rgba(0,0,0,.35); }
@media (max-width: 991.98px) { .login-panel { min-height: 100vh; } }


/* Net Set dashboard includes: begin */
.dashboard-body {
    margin: 0;
    color: #ffffff;
    background: #000000;
}

.dashboard-wrap {
    min-height: 100vh;
    color: #ffffff;
    background: #000000;
}

.dashboard-topbar {
    width: 100%;
    min-height: 58px;
    color: #ffffff;
    background: #000000;
    border-bottom: 1px solid #ffffff;
}

.dashboard-brand {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.dashboard-brand:hover,
.dashboard-brand:focus {
    color: #d9d9d9;
}

.dashboard-user-toggle {
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
}

.dashboard-user-toggle:hover,
.dashboard-user-toggle:focus,
.dashboard-user-toggle[aria-expanded="true"] {
    color: #bfbfbf;
}

.dashboard-user-menu {
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 0;
}

.dashboard-user-menu .dropdown-item {
    color: #ffffff;
    background: #000000;
}

.dashboard-user-menu .dropdown-item:hover,
.dashboard-user-menu .dropdown-item:focus {
    color: #000000;
    background: #ffffff;
}

.dashboard-user-menu .dropdown-divider {
    border-top-color: #808080;
}

.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 58px);
    background: #000000;
}

.dashboard-sidebar {
    width: 240px;
    flex: 0 0 240px;
    color: #ffffff;
    background: #000000;
    border-right: 1px solid #ffffff;
}

.dashboard-sidebar .nav-link {
    color: #ffffff;
    background: #000000;
    border: 1px solid transparent;
    border-radius: 0;
}

.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link:focus {
    color: #000000;
    background: #ffffff;
    border-color: #ffffff;
}

.dashboard-sidebar .nav-link.active {
    color: #000000;
    background: #ffffff;
    border-color: #ffffff;
}

.dashboard-content {
    flex: 1 1 auto;
    min-width: 0;
    color: #ffffff;
    background: #000000;
}

.dashboard-desktop {
    min-height: 0;
    color: #ffffff;
    background: #000000;
}

.dashboard-eyebrow {
    color: #ffffff;
}

.dashboard-secondary {
    color: #bfbfbf;
}

@media (max-width: 767.98px) {
    .dashboard-layout {
        display: block;
    }

    .dashboard-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #ffffff;
    }
}
/* Net Set dashboard includes: end */

/* Net Set monochrome login: begin */
.login-body {
    margin: 0;
    color: #ffffff;
    background: #000000;
}

.login-shell {
    min-height: 100vh;
    color: #ffffff;
    background: #000000;
}

.login-image {
    position: relative;
    background-color: #000000;
    filter: grayscale(100%);
}

.login-image::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: rgba(0, 0, 0, 0.12);
}

.login-panel {
    color: #ffffff;
    background: #000000;
    border-left: 1px solid #ffffff;
}

.login-card {
    width: min(100%, 430px);
    color: #ffffff;
    background: #000000;
}

.login-card h1 {
    color: #ffffff;
}

.login-card .text-secondary {
    color: #bfbfbf !important;
}

.login-card .form-label {
    color: #ffffff;
    font-weight: 500;
}

.login-card .form-control {
    min-height: 52px;
    color: #ffffff;
    caret-color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 0;
}

.login-card .form-control:hover {
    border-color: #bfbfbf;
}

.login-card .form-control:focus {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    box-shadow: 0 0 0 1000px #000000 inset;
    transition: background-color 9999s ease-out;
}

.login-card .btn-primary {
    min-height: 52px;
    color: #000000;
    font-weight: 700;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0;
}

.login-card .btn-primary:hover,
.login-card .btn-primary:focus,
.login-card .btn-primary:active {
    color: #ffffff !important;
    background: #000000 !important;
    border-color: #ffffff !important;
}

.login-card .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/*
 * Toast colors intentionally remain semantic:
 * red for errors, yellow for warnings, and green for success.
 */
.login-body .toast {
    border: 1px solid #ffffff !important;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .login-panel {
        min-height: 100vh;
        border-left: 0;
    }
}
/* Net Set monochrome login: end */

/* Net Set login image color override: begin */
.login-image {
    filter: none;
}

.login-image::after {
    display: none;
}
/* Net Set login image color override: end */

/* Net Set Bootstrap toast notifications */
.toast-container {
    z-index: 1090;
    width: min(100%, 390px);
}

.netset-toast {
    --bs-toast-max-width: 360px;
    color: #f4f7fb;
    background: rgba(15, 22, 33, .97);
    border: 1px solid #2b3950 !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
    backdrop-filter: blur(12px);
}

.netset-toast .toast-header {
    color: #f4f7fb;
    background: rgba(21, 30, 45, .98);
    border-bottom-color: #2b3950;
}

.netset-toast .toast-body {
    color: #d8e0ec;
    line-height: 1.45;
}

.netset-toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

.toast-status {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    margin-right: .65rem;
    border-radius: 50%;
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .toast-container {
        left: 0;
        right: 0;
        width: 100%;
        padding: .75rem !important;
    }

    .netset-toast {
        width: 100%;
        max-width: none;
    }
}

/* High-visibility toast close button */
.netset-toast .toast-header .btn-close {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid #ffffff !important;
    border-radius: 0.375rem;
    background-size: 0.7rem;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.netset-toast .toast-header .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: #ffffff !important;
    opacity: 1;
}

.netset-toast .toast-header .btn-close:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
    opacity: 1;
}

/*
 * Dark-mode toast close button.
 * Removes Bootstrap's background-image X and draws an explicit white X.
 */
.netset-toast .toast-header .btn-close {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    margin-left: 0.75rem;
    box-sizing: border-box;
    appearance: none;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #ffffff !important;
    border-radius: 0.375rem;
    filter: none !important;
    opacity: 1 !important;
    cursor: pointer;
    pointer-events: auto;
}

.netset-toast .toast-header .btn-close::before,
.netset-toast .toast-header .btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.875rem;
    height: 2px;
    border-radius: 999px;
    background-color: #ffffff;
    transform-origin: center;
    pointer-events: none;
}

.netset-toast .toast-header .btn-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.netset-toast .toast-header .btn-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.netset-toast .toast-header .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: #ffffff !important;
}

.netset-toast .toast-header .btn-close:focus-visible {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: none;
}


/* Net Set System users: begin */
.system-users {
    width: 100%;
    color: #f4f7fb;
}

.system-users-card {
    overflow: hidden;
    border: 1px solid #263348;
    border-radius: 1rem;
    background:
        linear-gradient(
            145deg,
            rgba(18, 27, 41, .96),
            rgba(10, 15, 23, .96)
        );
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.system-users-card + .system-users-card {
    margin-top: 1.25rem;
}

.system-users-card-header {
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid #263348;
    background: rgba(22, 32, 48, .68);
}

.system-users-eyebrow {
    margin: 0 0 .3rem;
    color: #79a7ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.system-users-card-header h2 {
    margin: 0;
    color: #f4f7fb;
    font-size: 1.12rem;
    font-weight: 750;
}

.system-users-card-description {
    margin: .35rem 0 0;
    color: #95a3b8;
    font-size: .9rem;
}

.system-users-filter-form {
    padding: 1.25rem 1.35rem 1.35rem;
}

.system-users-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(16rem, 2fr)
        minmax(11rem, 1fr)
        minmax(10rem, 1fr);
    gap: 1rem;
    align-items: end;
}

.system-users-field {
    min-width: 0;
}

.system-users-field label {
    display: block;
    margin-bottom: .45rem;
    color: #c8d1df;
    font-size: .82rem;
    font-weight: 700;
}

.system-users-field .form-control,
.system-users-field .form-select {
    min-height: 48px;
    border-color: #2b3b54;
    border-radius: .68rem;
    background-color: #0d1520;
    color: #f4f7fb;
}

.system-users-field .form-control::placeholder {
    color: #64748b;
}

.system-users-field .form-control:focus,
.system-users-field .form-select:focus {
    border-color: #6ea8fe;
    background-color: #101a28;
    color: #fff;
    box-shadow: 0 0 0 .22rem rgba(47, 111, 237, .18);
}

.system-users-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.system-users-filter-actions .btn {
    min-width: 8rem;
    border-radius: .62rem;
}

.system-users-loading {
    display: flex;
    min-height: 18rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #95a3b8;
}

.system-users-loading-compact {
    min-height: 8rem;
}

.system-users-loading .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    color: #79a7ff;
}

.system-users-loading-compact .spinner-border {
    width: 1rem;
    height: 1rem;
}

.system-users-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid #263348;
    background: rgba(5, 9, 14, .34);
    color: #95a3b8;
    font-size: .84rem;
}

.system-users-result-summary strong {
    color: #dce5f2;
}

.system-users-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.system-users-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.system-users-table th,
.system-users-table td {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid rgba(38, 51, 72, .78);
    text-align: left;
    vertical-align: middle;
}

.system-users-table thead th {
    background: rgba(8, 13, 20, .58);
    color: #8797ae;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.system-users-table tbody tr {
    transition: background-color .15s ease;
}

.system-users-table tbody tr:hover {
    background: rgba(110, 168, 254, .055);
}

.system-users-table tbody tr:last-child td {
    border-bottom: 0;
}

.system-users-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
}

.system-users-avatar {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    place-items: center;
    border: 1px solid #31558e;
    border-radius: .78rem;
    background: #14243b;
    color: #a7c8ff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.system-users-identity-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .18rem;
}

.system-users-name {
    overflow: hidden;
    color: #f4f7fb;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-users-uid {
    overflow: hidden;
    max-width: 19rem;
    color: #718097;
    font-family: var(--bs-font-monospace);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-users-email {
    color: #9ec5fe;
    font-size: .9rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.system-users-email:hover {
    color: #cfe2ff;
    text-decoration: underline;
}

.system-users-status {
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.system-users-status.is-active {
    color: #75d6a2;
    background: rgba(25, 135, 84, .12);
}

.system-users-status.is-pending {
    color: #ffd36b;
    background: rgba(255, 193, 7, .12);
}

.system-users-status.is-flagged {
    color: #ffad66;
    background: rgba(253, 126, 20, .12);
}

.system-users-status.is-locked,
.system-users-status.is-deleted {
    color: #ff8a93;
    background: rgba(220, 53, 69, .12);
}

.system-users-status.is-archived,
.system-users-status.is-unknown {
    color: #aab4c3;
    background: rgba(108, 117, 125, .12);
}

.system-users-actions-column {
    text-align: right !important;
}

.system-users-actions-column .btn {
    border-radius: .55rem;
}

.system-users-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.35rem;
    border-top: 1px solid #263348;
    background: rgba(5, 9, 14, .24);
}

.system-users-pagination .pagination {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .25rem;
}

.system-users-pagination .page-link {
    min-width: 2rem;
    border-color: #2b3b54;
    border-radius: .45rem;
    background: #101925;
    color: #afbed2;
    text-align: center;
}

.system-users-pagination .page-link:hover {
    border-color: #446da9;
    background: #17263a;
    color: #fff;
}

.system-users-pagination .page-item.active .page-link {
    border-color: #2f6fed;
    background: #2f6fed;
    color: #fff;
}

.system-users-pagination .page-item.disabled .page-link {
    border-color: #222e40;
    background: #0c121b;
    color: #58667a;
}

.system-users-empty {
    display: grid;
    min-height: 18rem;
    place-items: center;
    align-content: center;
    padding: 2rem;
    text-align: center;
}

.system-users-empty-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid #30435f;
    border-radius: 1rem;
    background: #121d2c;
    color: #7890b0;
    font-weight: 800;
}

.system-users-empty h3 {
    margin: 0 0 .4rem;
    color: #f4f7fb;
    font-size: 1.05rem;
}

.system-users-empty p {
    margin: 0;
    color: #8797ae;
}

.system-users-request-error {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(220, 53, 69, .48);
    border-radius: .75rem;
    background: rgba(220, 53, 69, .1);
    color: #ffb8be;
}

@media (max-width: 991.98px) {
    .system-users-filter-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .system-users-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .system-users-result-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }

    .system-users-table-wrap {
        overflow: visible;
        padding: .85rem;
    }

    .system-users-table {
        min-width: 0;
    }

    .system-users-table thead {
        display: none;
    }

    .system-users-table,
    .system-users-table tbody,
    .system-users-table tr,
    .system-users-table td {
        display: block;
        width: 100%;
    }

    .system-users-table tbody {
        display: grid;
        gap: .8rem;
    }

    .system-users-table tbody tr {
        overflow: hidden;
        border: 1px solid #263348;
        border-radius: .85rem;
        background: rgba(8, 13, 20, .52);
    }

    .system-users-table tbody tr:hover {
        background: rgba(8, 13, 20, .52);
    }

    .system-users-table td {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: .75rem;
        padding: .78rem 1rem;
        border-bottom: 1px solid rgba(38, 51, 72, .72);
        text-align: left !important;
    }

    .system-users-table td::before {
        align-self: center;
        color: #718097;
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .065em;
        text-transform: uppercase;
    }

    .system-users-table td:first-child {
        display: block;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .system-users-table td:first-child::before {
        display: none;
    }

    .system-users-table td:last-child {
        border-bottom: 0;
    }

    .system-users-table .system-users-actions-column .btn {
        width: 100%;
    }

    .system-users-uid {
        max-width: 100%;
    }

    .system-users-pagination {
        justify-content: center;
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .system-users-pagination .pagination {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .system-users-card-header,
    .system-users-filter-form,
    .system-users-result-summary {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .system-users-filter-grid {
        grid-template-columns: 1fr;
    }

    .system-users-search-field {
        grid-column: auto;
    }

    .system-users-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-users-filter-actions .btn {
        min-width: 0;
    }

    .system-users-table td {
        grid-template-columns: 5.8rem minmax(0, 1fr);
    }

    .system-users-page-summary {
        display: none;
    }
}
/* Net Set System users: end */

/* Net Set System add user: begin */
.system-users-list-card > .system-users-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.system-users-add-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    border-radius: .62rem;
    padding-right: 1rem;
    padding-left: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.system-users-add-button > span {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: .8;
}

.system-users-add-modal {
    --bs-modal-width: 760px;
}

.system-users-add-modal .modal-content {
    overflow: hidden;
    border: 1px solid #30405a;
    border-radius: 1rem;
    background:
        linear-gradient(
            145deg,
            #121c2a,
            #0a1018
        );
    color: #f4f7fb;
    box-shadow: 0 28px 85px rgba(0, 0, 0, .6);
}

.system-users-add-modal .modal-header {
    align-items: flex-start;
    padding: 1.25rem 1.35rem;
    border-bottom-color: #29384f;
    background: rgba(22, 32, 48, .82);
}

.system-users-add-modal .modal-title {
    color: #f4f7fb;
    font-size: 1.25rem;
    font-weight: 750;
}

.system-users-add-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
    opacity: .72;
}

.system-users-add-modal .btn-close:hover {
    opacity: 1;
}

.system-users-add-modal .modal-body {
    padding: 1.35rem;
}

.system-users-add-modal .modal-footer {
    padding: 1rem 1.35rem;
    border-top-color: #29384f;
    background: rgba(6, 10, 16, .48);
}

.system-users-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.system-users-add-field {
    min-width: 0;
}

.system-users-add-field-wide {
    grid-column: 1 / -1;
}

.system-users-add-field .form-label {
    color: #c8d1df;
    font-size: .82rem;
    font-weight: 700;
}

.system-users-add-field .form-label span {
    margin-left: .25rem;
    color: #718097;
    font-size: .72rem;
    font-weight: 500;
}

.system-users-add-field .form-control,
.system-users-add-field .form-select {
    min-height: 48px;
    border-color: #2b3b54;
    border-radius: .68rem;
    background-color: #0d1520;
    color: #f4f7fb;
}

.system-users-add-field .form-control:focus,
.system-users-add-field .form-select:focus {
    border-color: #6ea8fe;
    background-color: #101a28;
    color: #fff;
    box-shadow: 0 0 0 .22rem rgba(47, 111, 237, .18);
}

.system-users-add-field .form-control.is-invalid,
.system-users-add-field .form-select.is-invalid {
    border-color: #ff7782;
}

.system-users-add-field .form-text {
    color: #718097;
    font-size: .74rem;
}

.system-users-add-field .invalid-feedback {
    color: #ff9ca4;
    font-size: .76rem;
}

.system-users-add-alert {
    margin-bottom: 1rem;
    border-radius: .7rem;
}

.system-users-add-modal .modal-footer .btn {
    min-width: 8rem;
    border-radius: .62rem;
}

@media (max-width: 767.98px) {
    .system-users-list-card > .system-users-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .system-users-add-button {
        width: 100%;
    }

    .system-users-add-modal .modal-dialog {
        margin: .75rem;
    }
}

@media (max-width: 575.98px) {
    .system-users-add-grid {
        grid-template-columns: 1fr;
    }

    .system-users-add-field-wide {
        grid-column: auto;
    }

    .system-users-add-modal .modal-header,
    .system-users-add-modal .modal-body,
    .system-users-add-modal .modal-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .system-users-add-modal .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-users-add-modal .modal-footer .btn {
        min-width: 0;
        margin: 0;
    }
}
/* Net Set System add user: end */

/* Net Set Users monochrome theme: begin */
.system-users {
    --users-black: #000;
    --users-surface: #050505;
    --users-surface-raised: #0a0a0a;
    --users-surface-hover: #111;
    --users-border: #454545;
    --users-border-strong: #777;
    --users-white: #fff;
    --users-secondary: #b8b8b8;
    --users-muted: #858585;
}

/*
 * Cards and section headers
 */
.system-users-card {
    border-color: var(--users-border);
    background: var(--users-black);
    box-shadow: none;
}

.system-users-card-header {
    border-bottom-color: var(--users-border);
    background: var(--users-black);
}

.system-users-card-header h2,
.system-users-name,
.system-users-empty h3 {
    color: var(--users-white);
}

.system-users-eyebrow {
    color: var(--users-white);
}

.system-users-card-description,
.system-users-result-summary,
.system-users-empty p {
    color: var(--users-secondary);
}

/*
 * Filter form
 */
.system-users-filter-form {
    background: var(--users-surface);
}

.system-users-field label,
.system-users-add-field .form-label {
    color: var(--users-white);
}

.system-users-field .form-control,
.system-users-field .form-select,
.system-users-add-field .form-control,
.system-users-add-field .form-select {
    border-color: var(--users-border-strong);
    background-color: var(--users-black);
    color: var(--users-white);
}

.system-users-field .form-control::placeholder,
.system-users-add-field .form-control::placeholder {
    color: var(--users-muted);
}

.system-users-field .form-control:focus,
.system-users-field .form-select:focus,
.system-users-add-field .form-control:focus,
.system-users-add-field .form-select:focus {
    border-color: var(--users-white);
    background-color: var(--users-black);
    color: var(--users-white);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .15);
}

.system-users-field .form-select,
.system-users-add-field .form-select {
    --bs-form-select-bg-img:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/*
 * Primary and secondary buttons
 */
.system-users .btn-primary {
    border-color: var(--users-white);
    background: var(--users-white);
    color: var(--users-black);
}

.system-users .btn-primary:hover,
.system-users .btn-primary:focus,
.system-users .btn-primary:active,
.system-users .btn-primary:first-child:active {
    border-color: #d7d7d7;
    background: #d7d7d7;
    color: var(--users-black);
}

.system-users .btn-primary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.system-users .btn-outline-secondary {
    border-color: var(--users-border-strong);
    background: var(--users-black);
    color: var(--users-white);
}

.system-users .btn-outline-secondary:hover,
.system-users .btn-outline-secondary:focus,
.system-users .btn-outline-secondary:active,
.system-users .btn-outline-secondary:first-child:active {
    border-color: var(--users-white);
    background: var(--users-white);
    color: var(--users-black);
}

.system-users .btn:disabled {
    border-color: #3d3d3d;
    background: var(--users-black);
    color: #666;
    opacity: 1;
}

/*
 * Result summary and table
 */
.system-users-result-summary {
    border-bottom-color: var(--users-border);
    background: var(--users-black);
}

.system-users-result-summary strong {
    color: var(--users-white);
}

.system-users-table thead th {
    background: var(--users-black);
    color: var(--users-secondary);
}

.system-users-table th,
.system-users-table td {
    border-bottom-color: var(--users-border);
}

.system-users-table tbody {
    background: var(--users-surface);
}

.system-users-table tbody tr:hover {
    background: var(--users-surface-hover);
}

.system-users-avatar {
    border-color: var(--users-white);
    background: var(--users-black);
    color: var(--users-white);
}

.system-users-uid {
    color: var(--users-muted);
}

.system-users-email {
    color: var(--users-white);
    text-decoration: underline;
    text-decoration-color: #666;
    text-underline-offset: .2rem;
}

.system-users-email:hover,
.system-users-email:focus {
    color: var(--users-white);
    text-decoration-color: var(--users-white);
}

/*
 * Monochrome status badges
 */
.system-users-status,
.system-users-status.is-active,
.system-users-status.is-pending,
.system-users-status.is-flagged,
.system-users-status.is-locked,
.system-users-status.is-deleted,
.system-users-status.is-archived,
.system-users-status.is-unknown {
    border-color: var(--users-white);
    background: var(--users-black);
    color: var(--users-white);
}

/*
 * Pagination
 */
.system-users-pagination {
    border-top-color: var(--users-border);
    background: var(--users-black);
}

.system-users-pagination .page-link {
    border-color: var(--users-border-strong);
    background: var(--users-black);
    color: var(--users-white);
}

.system-users-pagination .page-link:hover,
.system-users-pagination .page-link:focus {
    border-color: var(--users-white);
    background: var(--users-white);
    color: var(--users-black);
}

.system-users-pagination .page-item.active .page-link {
    border-color: var(--users-white);
    background: var(--users-white);
    color: var(--users-black);
}

.system-users-pagination .page-item.disabled .page-link {
    border-color: #333;
    background: var(--users-black);
    color: #666;
}

/*
 * Empty and loading states
 */
.system-users-loading {
    color: var(--users-secondary);
}

.system-users-loading .spinner-border {
    color: var(--users-white);
}

.system-users-empty-icon {
    border-color: var(--users-border-strong);
    background: var(--users-black);
    color: var(--users-white);
}

/*
 * Add User modal
 */
.system-users-add-modal .modal-content {
    border-color: var(--users-border-strong);
    background: var(--users-black);
    color: var(--users-white);
    box-shadow: 0 28px 85px rgba(0, 0, 0, .8);
}

.system-users-add-modal .modal-header {
    border-bottom-color: var(--users-border);
    background: var(--users-black);
}

.system-users-add-modal .modal-title {
    color: var(--users-white);
}

.system-users-add-modal .modal-body {
    background: var(--users-surface);
}

.system-users-add-modal .modal-footer {
    border-top-color: var(--users-border);
    background: var(--users-black);
}

.system-users-add-modal .btn-close {
    filter: invert(1);
    opacity: 1;
}

.system-users-add-field .form-label span,
.system-users-add-field .form-text {
    color: var(--users-muted);
}

/*
 * Validation and response messages retain meaning while
 * remaining visually restrained.
 */
.system-users-add-field .form-control.is-invalid,
.system-users-add-field .form-select.is-invalid {
    border-color: var(--users-white);
    box-shadow: inset 0 0 0 1px var(--users-white);
}

.system-users-add-field .invalid-feedback {
    color: var(--users-white);
}

.system-users-add-alert.alert-danger {
    border-color: var(--users-white);
    background: var(--users-black);
    color: var(--users-white);
}

.system-users-add-alert.alert-success {
    border-color: var(--users-white);
    background: var(--users-white);
    color: var(--users-black);
}

/*
 * Mobile user cards
 */
@media (max-width: 767.98px) {
    .system-users-table-wrap {
        background: var(--users-black);
    }

    .system-users-table tbody tr,
    .system-users-table tbody tr:hover {
        border-color: var(--users-border);
        background: var(--users-surface);
    }

    .system-users-table td {
        border-bottom-color: var(--users-border);
    }

    .system-users-table td::before {
        color: var(--users-secondary);
    }
}
/* Net Set Users monochrome theme: end */

/* Net Set fixed dashboard shell: begin */
@media (min-width: 768px) {
    html,
    body.dashboard-body {
        height: 100%;
        overflow: hidden;
    }

    .dashboard-wrap {
        display: flex;
        height: 100vh;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-topbar {
        min-height: 58px;
        flex: 0 0 58px;
    }

    .dashboard-layout {
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .dashboard-sidebar {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .dashboard-content {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 767.98px) {
    html,
    body.dashboard-body {
        height: 100%;
        overflow: hidden;
    }

    .dashboard-wrap {
        display: flex;
        height: 100vh;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-topbar {
        min-height: 58px;
        flex: 0 0 58px;
    }

    .dashboard-layout {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    .dashboard-sidebar {
        width: 100%;
        max-height: 45vh;
        flex: 0 0 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .dashboard-content {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
/* Net Set fixed dashboard shell: end */

/* Net Set System access: begin */
.system-access {
    width: 100%;
    color: #fff;
}

.system-access-card {
    overflow: hidden;
    border: 1px solid #454545;
    border-radius: 1rem;
    background: #000;
}

.system-access-card-header {
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid #454545;
    background: #000;
}

.system-access-eyebrow {
    margin: 0 0 .3rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.system-access-card-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 750;
}

.system-access-description {
    margin: .35rem 0 0;
    color: #b8b8b8;
    font-size: .9rem;
}

.system-access-filter-form {
    padding: 1.25rem 1.35rem 1.35rem;
    border-bottom: 1px solid #454545;
    background: #050505;
}

.system-access-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(15rem, 2fr)
        minmax(11rem, 1fr);
    gap: 1rem;
    align-items: end;
}

.system-access-field label {
    display: block;
    margin-bottom: .45rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.system-access-field .form-control,
.system-access-field .form-select {
    min-height: 48px;
    border-color: #777;
    border-radius: .68rem;
    background-color: #000;
    color: #fff;
}

.system-access-field .form-control::placeholder {
    color: #858585;
}

.system-access-field .form-control:focus,
.system-access-field .form-select:focus {
    border-color: #fff;
    background-color: #000;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .15);
}

.system-access-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.system-access .btn-primary {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.system-access .btn-primary:hover,
.system-access .btn-primary:focus {
    border-color: #d7d7d7;
    background: #d7d7d7;
    color: #000;
}

.system-access .btn-outline-secondary {
    border-color: #777;
    background: #000;
    color: #fff;
}

.system-access .btn-outline-secondary:hover,
.system-access .btn-outline-secondary:focus {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.system-access .btn:disabled {
    border-color: #3d3d3d;
    background: #000;
    color: #666;
    opacity: 1;
}

.system-access-loading {
    display: flex;
    min-height: 16rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #b8b8b8;
}

.system-access-loading .spinner-border {
    width: 1.4rem;
    height: 1.4rem;
    color: #fff;
}

.system-access-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid #454545;
    background: #000;
    color: #b8b8b8;
    font-size: .84rem;
}

.system-access-result-summary strong {
    color: #fff;
}

.system-access-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.system-access-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.system-access-table th,
.system-access-table td {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid #454545;
    text-align: left;
    vertical-align: middle;
}

.system-access-table thead th {
    background: #000;
    color: #b8b8b8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.system-access-table tbody {
    background: #050505;
}

.system-access-table tbody tr:hover {
    background: #111;
}

.system-access-table tbody tr:last-child td {
    border-bottom: 0;
}

.system-access-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .8rem;
}

.system-access-icon {
    display: inline-grid;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 2.7rem;
    place-items: center;
    border: 1px solid #fff;
    border-radius: .78rem;
    background: #000;
    color: #fff;
    font-weight: 800;
}

.system-access-identity-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .18rem;
}

.system-access-name {
    color: #fff;
    font-size: .92rem;
}

.system-access-id {
    overflow: hidden;
    max-width: 19rem;
    color: #858585;
    font-family: var(--bs-font-monospace);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-access-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.system-access-permission {
    display: inline-flex;
    border: 1px solid #fff;
    border-radius: 999px;
    padding: .28rem .55rem;
    background: #000;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.system-access-user-count {
    display: inline-grid;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid #777;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}

.system-access-actions {
    text-align: right !important;
}

.system-access-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.35rem;
    border-top: 1px solid #454545;
    background: #000;
}

.system-access-pagination .pagination {
    flex-wrap: wrap;
    gap: .25rem;
}

.system-access-pagination .page-link {
    min-width: 2rem;
    border-color: #777;
    border-radius: .45rem;
    background: #000;
    color: #fff;
    text-align: center;
}

.system-access-pagination .page-item.active .page-link,
.system-access-pagination .page-link:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.system-access-pagination .page-item.disabled .page-link {
    border-color: #333;
    background: #000;
    color: #666;
}

.system-access-empty {
    display: grid;
    min-height: 16rem;
    place-items: center;
    align-content: center;
    padding: 2rem;
    text-align: center;
}

.system-access-empty-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid #777;
    border-radius: 1rem;
    color: #fff;
}

.system-access-empty h3 {
    margin: 0 0 .4rem;
    color: #fff;
    font-size: 1.05rem;
}

.system-access-empty p {
    margin: 0;
    color: #b8b8b8;
}

.system-access-error {
    margin: 1.25rem;
    padding: 1rem;
    border: 1px solid #fff;
    border-radius: .75rem;
    background: #000;
    color: #fff;
}

@media (max-width: 767.98px) {
    .system-access-filter-grid {
        grid-template-columns: 1fr;
    }

    .system-access-result-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-access-table-wrap {
        overflow: visible;
        padding: .85rem;
    }

    .system-access-table {
        min-width: 0;
    }

    .system-access-table thead {
        display: none;
    }

    .system-access-table,
    .system-access-table tbody,
    .system-access-table tr,
    .system-access-table td {
        display: block;
        width: 100%;
    }

    .system-access-table tbody {
        display: grid;
        gap: .8rem;
        background: #000;
    }

    .system-access-table tbody tr {
        overflow: hidden;
        border: 1px solid #454545;
        border-radius: .85rem;
        background: #050505;
    }

    .system-access-table td {
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: .75rem;
        padding: .8rem 1rem;
        border-bottom: 1px solid #454545;
        text-align: left !important;
    }

    .system-access-table td::before {
        align-self: center;
        color: #b8b8b8;
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .system-access-table td:first-child {
        display: block;
    }

    .system-access-table td:first-child::before {
        display: none;
    }

    .system-access-table td:last-child {
        border-bottom: 0;
    }

    .system-access-actions .btn {
        width: 100%;
    }

    .system-access-pagination {
        justify-content: center;
        padding-right: .75rem;
        padding-left: .75rem;
    }
}

@media (max-width: 575.98px) {
    .system-access-card-header,
    .system-access-filter-form,
    .system-access-result-summary {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .system-access-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-access-table td {
        grid-template-columns: 5.8rem minmax(0, 1fr);
    }

    .system-access-page-summary {
        display: none;
    }
}
/* Net Set System access: end */

/* Net Set Access inline editing: begin */
.system-access-row-actions {
    display: flex;
    justify-content: flex-end;
}

.system-access-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: .45rem;
}

.system-access-edit-actions .btn {
    min-width: 4.8rem;
}

.system-access-inline-name-wrap {
    display: block;
    width: min(100%, 20rem);
}

.system-access-inline-name {
    min-height: 40px;
    border-color: #777;
    border-radius: .55rem;
    background: #000;
    color: #fff;
    font-weight: 700;
}

.system-access-inline-name:focus {
    border-color: #fff;
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .15);
}

.system-access-inline-name.is-invalid {
    border-color: #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

.system-access-permissions.is-editing {
    display: grid;
    grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
    width: min(100%, 18rem);
    gap: .45rem;
}

.system-access-permission-option {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: .5rem;
    margin: 0;
    border: 1px solid #777;
    border-radius: .55rem;
    padding: .45rem .65rem;
    background: #000;
    color: #fff;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
}

.system-access-permission-option:hover,
.system-access-permission-option:focus-within {
    border-color: #fff;
}

.system-access-permission-option .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-color: #fff;
    background-color: #000;
}

.system-access-permission-option .form-check-input:checked {
    border-color: #fff;
    background-color: #fff;
    filter: grayscale(1);
}

.system-access-permission-option .form-check-input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .16rem rgba(255, 255, 255, .2);
}

.system-access-row-message {
    margin-top: .5rem;
    border: 1px solid #777;
    border-radius: .45rem;
    padding: .4rem .55rem;
    background: #000;
    color: #fff;
    font-size: .72rem;
    text-align: left;
}

.system-access-row-message.is-error {
    border-color: #fff;
}

.system-access-row-message.is-success {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.system-access-edit-actions .spinner-border {
    width: .8rem;
    height: .8rem;
    margin-right: .3rem;
}

@media (max-width: 767.98px) {
    .system-access-row-actions,
    .system-access-edit-actions {
        width: 100%;
    }

    .system-access-row-actions > .btn {
        width: 100%;
    }

    .system-access-edit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-access-edit-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .system-access-inline-name-wrap,
    .system-access-permissions.is-editing {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 420px) {
    .system-access-permissions.is-editing {
        grid-template-columns: 1fr;
    }
}
/* Net Set Access inline editing: end */

/* Net Set full-screen user management: begin */
.system-users-manage-modal .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100vh;
    margin: 0;
}

.system-users-manage-modal .modal-content {
    height: 100vh;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
}

.system-users-manage-modal form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.system-users-manage-modal .modal-header,
.system-users-manage-modal .modal-footer {
    flex: 0 0 auto;
    border-color: #454545;
    background: #000;
}

.system-users-manage-modal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    background: #050505;
}

.system-users-manage-modal .btn-close {
    filter: invert(1);
}

.system-users-manage-loading {
    display: flex;
    min-height: 60vh;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.system-users-manage-section {
    max-width: 1100px;
    margin: 0 auto 1.25rem;
    border: 1px solid #454545;
    border-radius: .9rem;
    padding: 1.25rem;
    background: #000;
}

.system-users-manage-heading {
    margin-bottom: 1rem;
}

.system-users-manage-heading h3 {
    margin: 0;
    font-size: 1.05rem;
}

.system-users-manage-heading p {
    margin: .3rem 0 0;
    color: #b8b8b8;
}

.system-users-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.system-users-manage-field label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 700;
}

.system-users-manage-field label span {
    color: #858585;
    font-size: .75rem;
    font-weight: 400;
}

.system-users-manage-field .form-control,
.system-users-manage-field .form-select {
    min-height: 48px;
    border-color: #777;
    background: #000;
    color: #fff;
}

.system-users-manage-field .form-control:focus,
.system-users-manage-field .form-select:focus {
    border-color: #fff;
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
}

.system-users-manage-metadata {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem;
    color: #b8b8b8;
    font-size: .78rem;
}

.system-users-manage-metadata strong {
    color: #fff;
    font-family: var(--bs-font-monospace);
}

.system-users-manage-modal .modal-footer .btn {
    min-width: 9rem;
}

@media (max-width: 767.98px) {
    .system-users-manage-grid {
        grid-template-columns: 1fr;
    }

    .system-users-manage-modal .modal-body {
        padding: 1rem;
    }

    .system-users-manage-modal .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .system-users-manage-modal .modal-footer .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}
/* Net Set full-screen user management: end */

/* Net Set Add User contact section: begin */
.system-users-add-subheading {
    margin-top: .25rem;
    padding-top: 1rem;
    border-top: 1px solid #454545;
}

.system-users-add-subheading h3 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
}

.system-users-add-subheading p {
    margin: .3rem 0 0;
    color: #b8b8b8;
    font-size: .82rem;
}
/* Net Set Add User contact section: end */

/* Net Set Manage User address fields: begin */
.system-users-manage-field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .system-users-manage-field-wide {
        grid-column: auto;
    }
}
/* Net Set Manage User address fields: end */

/* Net Set Add User contained modal layout: begin */
.system-users-add-modal {
    padding: 0 !important;
}

.system-users-add-modal .modal-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-width: 760px;
    height: calc(100dvh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: 1rem auto;
}

.system-users-add-modal .modal-content {
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.system-users-add-modal .modal-header {
    flex: 0 0 auto;
}

.system-users-add-modal form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.system-users-add-modal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.system-users-add-modal .modal-footer {
    flex: 0 0 auto;
}

.system-users-add-modal .system-users-add-grid {
    align-items: start;
}

.system-users-add-modal .system-users-add-subheading {
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .system-users-add-modal .modal-dialog {
        width: calc(100vw - 1rem);
        height: calc(100dvh - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: .5rem;
    }
}

@media (max-width: 575.98px) {
    .system-users-add-modal .modal-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }

    .system-users-add-modal .modal-content {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .system-users-add-modal .modal-body {
        padding-bottom: 1.25rem;
    }
}
/* Net Set Add User contained modal layout: end */

/* Net Set preferences interface: begin */
.system-preferences-card {
    overflow: hidden;
    border: 1px solid #454545;
    border-radius: 1rem;
    background: #000;
}

.system-preferences-header,
.system-preferences-footer {
    padding: 1.25rem;
    border-color: #454545;
}

.system-preferences-header {
    border-bottom: 1px solid #454545;
}

.system-preferences-header h2 {
    margin: 0;
}

.system-preferences-header > p:last-child,
.system-preferences-field > p {
    margin: .35rem 0 0;
    color: #b8b8b8;
}

.system-preferences-eyebrow {
    margin: 0 0 .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.system-preferences-card form {
    padding: 1.25rem;
}

.system-preferences-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.system-preferences-field label,
.system-preferences-field legend {
    margin-bottom: .45rem;
    font-weight: 700;
}

.system-preferences-theme-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.system-preferences-theme-options label {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: .6rem;
    margin: 0;
    border: 1px solid #777;
    border-radius: .65rem;
    padding: .75rem;
    cursor: pointer;
}

.system-preferences-footer {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

@media (max-width: 767.98px) {
    .system-preferences-grid {
        grid-template-columns: 1fr;
    }
}
/* Net Set preferences interface: end */

/* Net Set dashboard light theme: begin */
html[data-bs-theme="light"] .dashboard-body,
html[data-bs-theme="light"] .dashboard-wrap,
html[data-bs-theme="light"] .dashboard-layout,
html[data-bs-theme="light"] .dashboard-sidebar,
html[data-bs-theme="light"] .dashboard-content,
html[data-bs-theme="light"] .dashboard-desktop,
html[data-bs-theme="light"] .dashboard-topbar {
    color: #000;
    background: #fff;
}

html[data-bs-theme="light"] .dashboard-topbar,
html[data-bs-theme="light"] .dashboard-sidebar {
    border-color: #000;
}

html[data-bs-theme="light"] .dashboard-brand,
html[data-bs-theme="light"] .dashboard-user-toggle,
html[data-bs-theme="light"] .dashboard-eyebrow,
html[data-bs-theme="light"] .dashboard-sidebar .nav-link {
    color: #000;
    background: #fff;
}

html[data-bs-theme="light"] .dashboard-sidebar .nav-link:hover,
html[data-bs-theme="light"] .dashboard-sidebar .nav-link.active {
    color: #fff;
    background: #000;
}

html[data-bs-theme="light"] .dashboard-secondary {
    color: #555;
}

html[data-bs-theme="light"] .system-preferences-card,
html[data-bs-theme="light"] .system-users-card,
html[data-bs-theme="light"] .system-access-card,
html[data-bs-theme="light"] .system-preferences-card form,
html[data-bs-theme="light"] .system-users-filter-form,
html[data-bs-theme="light"] .system-access-filter-form {
    color: #000;
    border-color: #777;
    background: #fff;
}

html[data-bs-theme="light"] .system-preferences-header,
html[data-bs-theme="light"] .system-users-card-header,
html[data-bs-theme="light"] .system-access-card-header {
    color: #000;
    border-color: #777;
    background: #fff;
}

html[data-bs-theme="light"] .system-preferences-field .form-select,
html[data-bs-theme="light"] .system-preferences-field .form-control {
    color: #000;
    border-color: #555;
    background-color: #fff;
}

html[data-bs-theme="light"] .system-preferences-theme-options label {
    color: #000;
    border-color: #555;
    background: #fff;
}

html[data-bs-theme="light"] .system-preferences-header > p:last-child,
html[data-bs-theme="light"] .system-preferences-field > p {
    color: #555;
}
/* Net Set dashboard light theme: end */

/* Net Set Preferences monochrome controls: begin */
.system-preferences .btn-primary {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
}

.system-preferences .btn-primary:hover,
.system-preferences .btn-primary:focus,
.system-preferences .btn-primary:active,
.system-preferences .btn-primary:first-child:active {
    border-color: #d7d7d7;
    background: #d7d7d7;
    color: #000000;
}

.system-preferences .btn-primary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.system-preferences .form-check-input {
    border-color: #ffffff;
    background-color: #000000;
}

.system-preferences .form-check-input:checked {
    border-color: #ffffff;
    background-color: #ffffff;
    filter: grayscale(1);
}

.system-preferences .form-check-input:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 .16rem rgba(255, 255, 255, .2);
}

html[data-bs-theme="light"] .system-preferences .btn-primary {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

html[data-bs-theme="light"] .system-preferences .btn-primary:hover,
html[data-bs-theme="light"] .system-preferences .btn-primary:focus,
html[data-bs-theme="light"] .system-preferences .btn-primary:active {
    border-color: #333333;
    background: #333333;
    color: #ffffff;
}

html[data-bs-theme="light"] .system-preferences .form-check-input {
    border-color: #000000;
    background-color: #ffffff;
}

html[data-bs-theme="light"] .system-preferences .form-check-input:checked {
    border-color: #000000;
    background-color: #000000;
}
/* Net Set Preferences monochrome controls: end */

/* Net Set Preferences aligned controls: begin */
.system-preferences .system-preferences-fields,
.system-preferences .system-preferences-grid,
.system-preferences .system-preferences-layout {
    align-items: start;
}

.system-preferences .system-preferences-timezone,
.system-preferences .system-preferences-theme {
    min-width: 0;
}

.system-preferences .system-preferences-timezone .form-label,
.system-preferences .system-preferences-theme > h2,
.system-preferences .system-preferences-theme > h3,
.system-preferences .system-preferences-theme .form-label {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.system-preferences .system-preferences-timezone .form-select,
.system-preferences .system-preferences-theme .form-check,
.system-preferences select[name="timezone"],
.system-preferences input[name="theme"] + label {
    min-height: 50px;
}

.system-preferences .system-preferences-theme-options {
    align-items: stretch;
}

.system-preferences .system-preferences-theme .form-check {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

[data-bs-theme="light"] .system-preferences
.system-preferences-timezone .form-label,
[data-bs-theme="light"] .system-preferences
.system-preferences-theme > h2,
[data-bs-theme="light"] .system-preferences
.system-preferences-theme > h3,
[data-bs-theme="light"] .system-preferences
.system-preferences-theme .form-label {
    color: #000;
}

@media (max-width: 767.98px) {
    .system-preferences .system-preferences-fields,
    .system-preferences .system-preferences-grid,
    .system-preferences .system-preferences-layout {
        grid-template-columns: 1fr;
    }
}
/* Net Set Preferences aligned controls: end */

/* Net Set Preferences uniform headings: begin */
.system-preferences label[for*="timezone"],
.system-preferences [class*="timezone"] > .form-label,
.system-preferences [class*="timezone"] label,
.system-preferences [class*="theme"] > h2,
.system-preferences [class*="theme"] > h3,
.system-preferences [class*="theme"] .form-label,
.system-preferences legend {
    min-height: 1.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: normal;
}

.system-preferences [class*="theme"] > h2,
.system-preferences [class*="theme"] > h3 {
    display: flex;
    align-items: center;
}

.system-preferences select[name="timezone"],
.system-preferences [class*="theme"] .form-check {
    min-height: 50px;
    margin-top: 0;
}

[data-bs-theme="light"] .system-preferences label[for*="timezone"],
[data-bs-theme="light"] .system-preferences
[class*="timezone"] > .form-label,
[data-bs-theme="light"] .system-preferences
[class*="timezone"] label,
[data-bs-theme="light"] .system-preferences
[class*="theme"] > h2,
[data-bs-theme="light"] .system-preferences
[class*="theme"] > h3,
[data-bs-theme="light"] .system-preferences
[class*="theme"] .form-label,
[data-bs-theme="light"] .system-preferences legend {
    color: #000000;
}
/* Net Set Preferences uniform headings: end */

/* Net Set Preferences live clocks: begin */
.system-preferences .system-preferences-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
}

.system-preferences-clocks {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1.75rem;
    min-width: 0;
    margin-left: auto;
    text-align: right;
}

.system-preferences-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 13.5rem;
    line-height: 1.25;
}

.system-preferences-clock-label {
    margin-bottom: 0.25rem;
    color: #bfbfbf;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.system-preferences-clock-value {
    color: #ffffff;
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[data-bs-theme="light"]
.system-preferences-clock-label {
    color: #555555;
}

[data-bs-theme="light"]
.system-preferences-clock-value {
    color: #000000;
}

@media (max-width: 991.98px) {
    .system-preferences-clocks {
        gap: 1rem;
    }

    .system-preferences-clock {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .system-preferences .system-preferences-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .system-preferences-clocks {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .system-preferences-clock {
        align-items: flex-start;
        width: 100%;
    }

    .system-preferences-clock-value {
        white-space: normal;
    }
}
/* Net Set Preferences live clocks: end */

/* Net Set Access SSH policy editor: begin */
.system-access-ssh-policy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.system-access-ssh-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.1rem 0.55rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.system-access-login-shell {
    color: #bfbfbf;
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.system-access-ssh-policy.is-editing {
    min-width: 10rem;
}

.system-access-ssh-options {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.system-access-ssh-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.35rem;
    margin: 0;
    padding: 0.4rem 0.65rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #808080;
    cursor: pointer;
}

.system-access-ssh-option:hover,
.system-access-ssh-option:focus-within {
    border-color: #ffffff;
}

.system-access-ssh-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    border-color: #ffffff;
}

.system-access-ssh-option .form-check-input:checked {
    background-color: #ffffff;
    border-color: #ffffff;
}

.system-access-ssh-option .form-check-input:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.2);
}

[data-bs-theme="light"] .system-access-ssh-status,
[data-bs-theme="light"] .system-access-ssh-option {
    color: #000000;
    background: #ffffff;
    border-color: #000000;
}

[data-bs-theme="light"] .system-access-login-shell {
    color: #404040;
}

[data-bs-theme="light"]
.system-access-ssh-option .form-check-input {
    border-color: #000000;
}

[data-bs-theme="light"]
.system-access-ssh-option .form-check-input:checked {
    background-color: #000000;
    border-color: #000000;
}

@media (max-width: 767.98px) {
    .system-access-ssh-policy,
    .system-access-ssh-policy.is-editing {
        width: 100%;
    }

    .system-access-ssh-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
/* Net Set Access SSH policy editor: end */

/* Net Set Add User SSH preview: begin */
.system-users-add-ssh-policy {
    margin-top: 0.75rem;
    padding: 0.75rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #808080;
}

.system-users-add-ssh-policy.is-ssh-allowed {
    border-color: #ffffff;
}

.system-users-add-policy-heading {
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.system-users-add-policy-grid {
    display: grid;
    grid-template-columns:
        minmax(7rem, auto) minmax(0, 1fr);
    gap: 0.3rem 0.8rem;
    font-size: 0.82rem;
}

.system-users-add-policy-grid > span {
    color: #bfbfbf;
}

.system-users-add-policy-grid > strong {
    min-width: 0;
    color: #ffffff;
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
}

[data-bs-theme="light"] .system-users-add-ssh-policy {
    color: #000000;
    background: #ffffff;
    border-color: #808080;
}

[data-bs-theme="light"]
.system-users-add-ssh-policy.is-ssh-allowed {
    border-color: #000000;
}

[data-bs-theme="light"]
.system-users-add-policy-grid > span {
    color: #404040;
}

[data-bs-theme="light"]
.system-users-add-policy-grid > strong {
    color: #000000;
}

@media (max-width: 767.98px) {
    .system-users-add-policy-grid {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .system-users-add-policy-grid > strong {
        margin-bottom: 0.4rem;
    }
}
/* Net Set Add User SSH preview: end */

/* Net Set Users Linux SSH column: begin */
.system-users-linux-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 10rem;
    font-size: 0.78rem;
}

.system-users-linux-user {
    color: #ffffff;
    font-family: var(--bs-font-monospace);
    font-size: 0.86rem;
}

.system-users-linux-meta,
.system-users-login-shell {
    color: #bfbfbf;
}

.system-users-login-shell {
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
}

.system-users-ssh-state {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.05rem 0.5rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.system-users-linux-warning {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

[data-bs-theme="light"] .system-users-linux-user,
[data-bs-theme="light"] .system-users-linux-warning,
[data-bs-theme="light"] .system-users-ssh-state {
    color: #000000;
}

[data-bs-theme="light"] .system-users-linux-meta,
[data-bs-theme="light"] .system-users-login-shell {
    color: #404040;
}

[data-bs-theme="light"] .system-users-ssh-state {
    background: #ffffff;
    border-color: #000000;
}

@media (max-width: 767.98px) {
    .system-users-linux-details {
        align-items: flex-end;
        width: 100%;
        min-width: 0;
        text-align: right;
    }
}
/* Net Set Users Linux SSH column: end */

/* Net Set Manage Linux presentation: begin */
.system-users-manage-linux-card {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.system-users-manage-linux-card > div {
    min-width: 0;
    padding: 0.75rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #808080;
}

.system-users-manage-linux-card span,
.system-users-manage-linux-card strong {
    display: block;
}

.system-users-manage-linux-card span {
    margin-bottom: 0.25rem;
    color: #bfbfbf;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.system-users-manage-linux-card strong {
    color: #ffffff;
    font-family: var(--bs-font-monospace);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.system-users-manage-linux-notice {
    margin-top: 0.75rem;
    padding: 0.75rem;
    color: #ffffff;
    background: #000000;
    border: 1px solid #808080;
    font-size: 0.86rem;
}

.system-users-manage-linux-notice.is-managed {
    border-color: #ffffff;
}

.system-users-manage-linux-notice.is-warning,
.system-users-manage-linux-notice.is-external {
    border-style: dashed;
}

[data-bs-theme="light"]
.system-users-manage-linux-card > div,
[data-bs-theme="light"]
.system-users-manage-linux-notice {
    color: #000000;
    background: #ffffff;
    border-color: #808080;
}

[data-bs-theme="light"]
.system-users-manage-linux-card span {
    color: #404040;
}

[data-bs-theme="light"]
.system-users-manage-linux-card strong {
    color: #000000;
}

[data-bs-theme="light"]
.system-users-manage-linux-notice.is-managed {
    border-color: #000000;
}

@media (max-width: 991.98px) {
    .system-users-manage-linux-card {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .system-users-manage-linux-card {
        grid-template-columns: 1fr;
    }
}
/* Net Set Manage Linux presentation: end */


/* Net Set Manage external-account lock: begin */
.system-users-manage-field.is-linux-locked {
    opacity: 0.72;
}

.system-users-manage-field.is-linux-locked label::after {
    color: var(--bs-secondary-color);
    content: " — protected";
    font-size: 0.75rem;
    font-weight: 500;
}

.system-users-manage-field.is-linux-locked .form-control,
.system-users-manage-field.is-linux-locked .form-select {
    cursor: not-allowed;
}

[data-bs-theme="light"]
.system-users-manage-field.is-linux-locked {
    opacity: 0.8;
}
/* Net Set Manage external-account lock: end */

/* Net Set Add User toast notifications: begin */
#system-users-toast-container {
    max-width: min(28rem, calc(100vw - 1rem));
    pointer-events: none;
    top: 0.75rem !important;
    z-index: 2000;
}

#system-users-toast-container .toast {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.42);
    color: var(--bs-body-color);
    pointer-events: auto;
    width: 100%;
}

#system-users-toast-container .toast-header {
    background: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.system-users-toast-indicator {
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 0.65rem;
    margin-right: 0.65rem;
    width: 0.65rem;
}

.system-users-toast.is-danger {
    border-color: #dc3545;
}

.system-users-toast.is-danger
.system-users-toast-indicator {
    background: #dc3545;
}

.system-users-toast.is-success {
    border-color: #198754;
}

.system-users-toast.is-success
.system-users-toast-indicator {
    background: #198754;
}

.system-users-toast-message {
    line-height: 1.45;
}

.system-users-toast-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

@media (max-width: 575.98px) {
    #system-users-toast-container {
        left: 0.5rem !important;
        max-width: none;
        padding: 0 !important;
        right: 0.5rem !important;
        top: 0.5rem !important;
    }
}
/* Net Set Add User toast notifications: end */


/* Net Set System settings overview: begin */

.system-settings-overview {
    display: grid;
    gap: 1.25rem;
}

.system-settings-overview-header {
    max-width: 52rem;
}

.system-settings-overview-card {
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.8rem;
    padding: 1.1rem 1.2rem;
    background: var(--bs-body-bg);
}

.system-settings-overview-card-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.system-settings-overview-card-heading i {
    color: var(--bs-body-color);
    font-size: 1.05rem;
}

.system-settings-overview-card-heading h3 {
    margin: 0;
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 700;
}

.system-settings-overview-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.system-settings-overview-list > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.system-settings-overview-list dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.system-settings-overview-list dd {
    margin: 0;
    max-width: 58%;
    color: var(--bs-body-color);
    font-weight: 650;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .system-settings-overview-card {
        padding: 0.9rem 1rem;
    }

    .system-settings-overview-list > div {
        display: grid;
        gap: 0.2rem;
    }

    .system-settings-overview-list dd {
        max-width: none;
        text-align: left;
    }
}

/* Net Set System settings overview: end */


/* Net Set Servers monitoring page: begin */
.servers-monitor {
    color: #f4f4f4;
}

.servers-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.servers-summary-card,
.servers-panel {
    border: 1px solid #303030;
    background: #101010;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.servers-summary-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 104px;
    padding: 1.15rem 1.25rem;
    border-radius: .75rem;
}

.servers-summary-card strong {
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

.servers-summary-label,
.servers-panel-eyebrow,
.servers-icon-flyout dt,
.servers-modal-details dt {
    color: #999;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.servers-summary-card.is-online {
    border-left: 4px solid #25c46b;
}

.servers-summary-card.is-impacted {
    border-left: 4px solid #e0b326;
}

.servers-summary-card.is-offline {
    border-left: 4px solid #db4545;
}

.servers-panel {
    overflow: visible;
    border-radius: .85rem;
}

.servers-panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid #303030;
}

.servers-panel-header h2 {
    color: #fff;
}

.servers-panel-description,
.servers-icon-location,
.servers-flyout-hint,
.servers-modal-notes {
    color: #999;
}

.servers-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    color: #bdbdbd;
    font-size: .78rem;
}

.servers-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.servers-legend-light {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.servers-legend-light.is-online {
    color: #25c46b;
    background: #25c46b;
}

.servers-legend-light.is-impacted {
    color: #e0b326;
    background: #e0b326;
}

.servers-legend-light.is-offline {
    color: #db4545;
    background: #db4545;
}

.servers-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    padding: 1px;
    background: #303030;
    border-radius: 0 0 .8rem .8rem;
}

.servers-icon-item {
    position: relative;
    min-width: 0;
    background: #0d0d0d;
}

.servers-icon-button {
    width: 100%;
    min-height: 190px;
    padding: 1.35rem .85rem 1.15rem;
    border: 0;
    color: #eee;
    background: #0f0f0f;
    text-align: center;
    transition:
        background-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.servers-icon-button:hover,
.servers-icon-button:focus-visible {
    position: relative;
    z-index: 2;
    color: #fff;
    background: #191919;
    box-shadow: inset 0 0 0 1px #666;
    outline: 0;
}

.servers-icon-button:active {
    transform: scale(.985);
}

.servers-icon-visual {
    position: relative;
    display: inline-grid;
    width: 88px;
    height: 88px;
    place-items: center;
    margin-bottom: .8rem;
    border: 1px solid #3c3c3c;
    border-radius: 1rem;
    background:
        radial-gradient(circle at 50% 35%, #272727, #111 70%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 14px 28px rgba(0, 0, 0, .32);
}

.servers-icon-visual > .bi {
    color: #f5f5f5;
    font-size: 2.75rem;
    line-height: 1;
}

.servers-traffic-lights {
    position: absolute;
    right: -9px;
    bottom: -8px;
    display: flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid #454545;
    border-radius: 999px;
    background: #080808;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .55);
}

.servers-traffic-light {
    display: block;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    opacity: .18;
}

.servers-traffic-light.is-red {
    background: #db4545;
}

.servers-traffic-light.is-yellow {
    background: #e0b326;
}

.servers-traffic-light.is-green {
    background: #25c46b;
}

.servers-traffic-light.is-active {
    opacity: 1;
    box-shadow: 0 0 9px currentColor;
}

.servers-traffic-light.is-red.is-active {
    color: #db4545;
}

.servers-traffic-light.is-yellow.is-active {
    color: #e0b326;
}

.servers-traffic-light.is-green.is-active {
    color: #25c46b;
}

.servers-icon-name {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servers-icon-location {
    display: block;
    margin-top: .3rem;
    font-size: .74rem;
}

.servers-icon-flyout {
    position: absolute;
    z-index: 1080;
    left: 50%;
    bottom: calc(100% - 12px);
    width: min(290px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid #555;
    border-radius: .65rem;
    color: #eee;
    background: #151515;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .65);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition:
        opacity .15s ease,
        transform .15s ease;
}

.servers-icon-flyout::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    background: #151515;
    content: "";
    transform: translate(-50%, -6px) rotate(45deg);
}

.servers-icon-item:hover .servers-icon-flyout,
.servers-icon-item:focus-within .servers-icon-flyout,
.servers-icon-item.is-flyout-open .servers-icon-flyout {
    opacity: 1;
    transform: translate(-50%, 0);
}

.servers-flyout-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.servers-flyout-heading strong {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servers-state-badge {
    flex: 0 0 auto;
    padding: .22rem .46rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.servers-state-badge.is-online {
    color: #4ddd89;
}

.servers-state-badge.is-impacted {
    color: #efd059;
}

.servers-state-badge.is-offline {
    color: #ef7272;
}

.servers-icon-flyout dl {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.servers-icon-flyout dl div {
    min-width: 0;
}

.servers-icon-flyout dt {
    margin-bottom: .12rem;
}

.servers-icon-flyout dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #ddd;
    font-size: .78rem;
}

.servers-flyout-hint {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid #333;
    font-size: .7rem;
}

.servers-detail-modal .modal-content {
    border: 1px solid #484848;
    color: #eee;
    background:
        radial-gradient(circle at top right, #242424, #111 48%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .72);
}

.servers-detail-modal .modal-header,
.servers-detail-modal .modal-footer {
    border-color: #3a3a3a;
}

.servers-detail-modal .btn-close {
    filter: invert(1) grayscale(1);
}

.servers-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.servers-modal-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #4a4a4a;
    border-radius: .7rem;
    background: #0d0d0d;
}

.servers-modal-icon .bi {
    color: #fff;
    font-size: 1.65rem;
}

.servers-modal-icon.is-online {
    border-bottom: 3px solid #25c46b;
}

.servers-modal-icon.is-impacted {
    border-bottom: 3px solid #e0b326;
}

.servers-modal-icon.is-offline {
    border-bottom: 3px solid #db4545;
}

.servers-modal-eyebrow,
.servers-modal-section h3 {
    color: #999;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.servers-modal-status {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid #3a3a3a;
    border-radius: .55rem;
    background: #0d0d0d;
}

.servers-modal-status > div:last-child {
    display: flex;
    flex-direction: column;
}

.servers-modal-status strong {
    color: #fff;
}

.servers-modal-status span {
    color: #999;
    font-size: .76rem;
}

.servers-modal-traffic {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid #444;
    border-radius: 999px;
    background: #050505;
}

.servers-modal-section {
    margin-top: 1.35rem;
}

.servers-modal-section h3 {
    margin-bottom: .75rem;
}

.servers-modal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
    margin: 0;
}

.servers-modal-details > div {
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid #333;
    border-radius: .45rem;
    background: rgba(0, 0, 0, .18);
}

.servers-modal-details dt {
    margin-bottom: .22rem;
}

.servers-modal-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #e5e5e5;
    font-size: .84rem;
}

.servers-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.servers-role {
    padding: .3rem .62rem;
    border: 1px solid #4a4a4a;
    border-radius: 999px;
    color: #eee;
    background: #191919;
    font-size: .72rem;
    font-weight: 600;
}

.servers-role.is-empty {
    color: #999;
    border-style: dashed;
}

.servers-modal-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .85rem;
    padding: .75rem .85rem;
    border: 1px solid #51472a;
    border-radius: .45rem;
    color: #e5d294;
    background: #1c190f;
    font-size: .8rem;
}

.servers-modal-notes {
    padding: .85rem;
    border: 1px solid #333;
    border-radius: .45rem;
    background: rgba(0, 0, 0, .18);
    font-size: .84rem;
    line-height: 1.55;
}

.servers-empty {
    padding: 4rem 1.5rem;
    text-align: center;
}

.servers-empty .bi {
    display: block;
    margin-bottom: 1rem;
    color: #777;
    font-size: 2.5rem;
}

@media (max-width: 991.98px) {
    .servers-icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .servers-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .servers-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .servers-icon-flyout {
        position: fixed;
        z-index: 1090;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        transform: translateY(12px);
    }

    .servers-icon-flyout::after {
        display: none;
    }

    .servers-icon-item:hover .servers-icon-flyout,
    .servers-icon-item:focus-within .servers-icon-flyout,
    .servers-icon-item.is-flyout-open .servers-icon-flyout {
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .servers-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: .7rem;
    }

    .servers-summary-card {
        min-height: 82px;
        padding: .9rem;
    }

    .servers-summary-card strong {
        font-size: 1.55rem;
    }

    .servers-panel-header {
        padding: 1.1rem;
    }

    .servers-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .servers-icon-button {
        min-height: 165px;
        padding: 1rem .65rem;
    }

    .servers-icon-visual {
        width: 72px;
        height: 72px;
    }

    .servers-icon-visual > .bi {
        font-size: 2.2rem;
    }

    .servers-modal-details {
        grid-template-columns: 1fr;
    }
}

@media (hover: none) {
    .servers-icon-item:hover .servers-icon-flyout {
        opacity: 0;
        pointer-events: none;
    }

    .servers-icon-item.is-flyout-open .servers-icon-flyout {
        opacity: 1;
    }
}
/* Net Set Servers monitoring page: end */

/* Net Set Servers topology layout: begin */
.servers-topology {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #090909;
    border-radius: 0 0 .8rem .8rem;
}

.servers-modal-repository {
    display: block;
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.servers-modal-repository > .servers-icon-item {
    display: none;
}

.servers-region {
    overflow: visible;
    border: 1px solid #3b3b3b;
    border-radius: .75rem;
    background: #101010;
}

.servers-region-header {
    min-height: 70px;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #353535;
    background: linear-gradient(105deg, #202020, #111 62%);
}

.servers-region-title {
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 750;
}

.servers-region-subtitle {
    margin-top: .2rem;
    color: #929292;
    font-size: .75rem;
}

.servers-topology-section {
    padding: 1rem;
}

.servers-topology-section + .servers-topology-section {
    border-top: 1px solid #333;
}

.servers-subsection-title {
    margin: 0 0 .75rem;
    color: #999;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.servers-region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 1px;
    padding: 1px;
    overflow: visible;
    background: #303030;
}

.servers-region > .servers-region-grid {
    border-radius: 0 0 .7rem .7rem;
}

.servers-direct-grid {
    border: 1px solid #303030;
    border-radius: .55rem;
}

.servers-host-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.servers-host-box {
    min-width: 0;
    overflow: visible;
    border: 1px solid #4a4a4a;
    border-radius: .7rem;
    background: #0b0b0b;
    box-shadow: 0 16px 35px rgba(0, 0, 0, .25);
}

.servers-host-header {
    min-height: 62px;
    padding: .85rem 1rem;
    border-bottom: 1px solid #3a3a3a;
    background: linear-gradient(110deg, #222, #111 70%);
}

.servers-host-kicker {
    display: block;
    margin-bottom: .15rem;
    color: #888;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.servers-host-name {
    margin: 0;
    color: #fff;
    font-size: 1rem;
}

.servers-host-machine {
    padding: .8rem;
    border-bottom: 1px solid #333;
}

.servers-host-machine .servers-icon-item {
    max-width: 190px;
    margin: auto;
    border: 1px solid #383838;
    border-radius: .55rem;
}

.servers-host-machine .servers-icon-button {
    min-height: 165px;
    border-radius: .5rem;
}

.servers-host-children {
    padding: .85rem;
    background: rgba(255, 255, 255, .012);
}

.servers-host-children-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem;
}

.servers-host-children-title {
    color: #999;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.servers-host-count {
    display: inline-grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid #444;
    border-radius: 999px;
    color: #ddd;
    background: #171717;
    font-size: .68rem;
}

.servers-child-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #303030;
    border-radius: .5rem;
}

.servers-child-grid .servers-icon-button {
    min-height: 150px;
    padding: .9rem .5rem;
}

.servers-child-grid .servers-icon-visual {
    width: 64px;
    height: 64px;
}

.servers-child-grid .servers-icon-visual > .bi {
    font-size: 2rem;
}

.servers-child-grid .servers-icon-name {
    font-size: .8rem;
}

.servers-host-empty {
    padding: 1.2rem;
    border: 1px dashed #3c3c3c;
    border-radius: .5rem;
    color: #777;
    text-align: center;
    font-size: .76rem;
}

.servers-topology .servers-icon-flyout {
    z-index: 1100;
}

@media (max-width: 1199.98px) {
    .servers-host-grid {
        grid-template-columns: 1fr;
    }

    .servers-child-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .servers-topology {
        padding: .8rem;
    }

    .servers-region-grid,
    .servers-child-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .servers-topology-section {
        padding: .75rem;
    }
}
/* Net Set Servers topology layout: end */

/* Net Set Server detail pages: begin */
.servers-icon-flyout,
.servers-detail-modal {
    display: none !important;
}

.servers-icon-button[data-server-url] {
    cursor: pointer;
}

.server-detail {
    overflow: hidden;
    border: 1px solid #353535;
    border-radius: .85rem;
    color: #eee;
    background: #101010;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .25);
}

.server-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #353535;
    background: #0b0b0b;
}

.server-detail-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #ddd;
    font-size: .82rem;
    text-decoration: none;
}

.server-detail-back:hover,
.server-detail-back:focus {
    color: #fff;
}

.server-detail-state {
    padding: .28rem .58rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.server-detail-state.is-online {
    color: #4ddd89;
}

.server-detail-state.is-impacted {
    color: #efd059;
}

.server-detail-state.is-offline {
    color: #ef7272;
}

.server-detail-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border-bottom: 1px solid #353535;
    background:
        radial-gradient(circle at top right, #282828, #111 52%);
}

.server-detail-icon {
    position: relative;
    display: grid;
    width: 94px;
    height: 94px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #484848;
    border-radius: 1rem;
    background: #0b0b0b;
}

.server-detail-icon > .bi {
    color: #fff;
    font-size: 3rem;
}

.server-detail-icon.is-online {
    border-bottom: 4px solid #25c46b;
}

.server-detail-icon.is-impacted {
    border-bottom: 4px solid #e0b326;
}

.server-detail-icon.is-offline {
    border-bottom: 4px solid #db4545;
}

.server-detail-eyebrow,
.server-detail-section h3,
.server-detail-grid dt {
    color: #999;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.server-detail-identity h2 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1.75rem;
}

.server-detail-hostname {
    color: #aaa;
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
}

.server-detail-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #303030;
}

.server-detail-section:last-child {
    border-bottom: 0;
}

.server-detail-section h3 {
    margin: 0 0 .85rem;
}

.server-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 0;
}

.server-detail-grid > div {
    min-width: 0;
    padding: .8rem;
    border: 1px solid #343434;
    border-radius: .5rem;
    background: #151515;
}

.server-detail-grid dt {
    margin-bottom: .25rem;
}

.server-detail-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #e6e6e6;
    font-size: .84rem;
}

.server-detail-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .85rem;
    padding: .8rem;
    border: 1px solid #51472a;
    border-radius: .5rem;
    color: #e5d294;
    background: #1c190f;
    font-size: .82rem;
}

.server-detail-notes {
    padding: .9rem;
    border: 1px solid #343434;
    border-radius: .5rem;
    color: #bbb;
    background: #151515;
    line-height: 1.6;
}

.server-detail-not-found {
    padding: 4rem 1.5rem;
    text-align: center;
}

.server-detail-not-found > .bi {
    display: block;
    margin-bottom: 1rem;
    color: #777;
    font-size: 3rem;
}

.server-detail-not-found p {
    color: #999;
}

@media (max-width: 991.98px) {
    .server-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .server-detail-hero {
        align-items: flex-start;
        padding: 1.1rem;
    }

    .server-detail-icon {
        width: 72px;
        height: 72px;
    }

    .server-detail-icon > .bi {
        font-size: 2.25rem;
    }

    .server-detail-identity h2 {
        font-size: 1.35rem;
    }

    .server-detail-section {
        padding: 1rem;
    }

    .server-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* Net Set Server detail pages: end */

/* Net Set Account black-and-white theme: begin */

/*
 * The Account page uses the shared Bootstrap component structure, but its
 * surfaces and fields opt into Net Set's neutral black-and-white palette.
 * Page scoping prevents these rules from changing unrelated application
 * components.
 */
.account-page {
    --account-black: #000000;
    --account-white: #ffffff;
    --account-gray: #bfbfbf;
    --account-muted: #8f8f8f;
}

/* Primary profile surface and secondary security surface. */
.account-page .dashboard-desktop > .row > [class*="col-"] > .card {
    color: var(--account-white);
    background: var(--account-black);
    border-color: var(--account-white) !important;
    border-radius: 0;
    box-shadow: none;
}

.account-page .dashboard-desktop .card-body {
    color: var(--account-white);
    background: var(--account-black);
}

.account-page .dashboard-desktop .card h2,
.account-page .dashboard-desktop .card .form-label {
    color: var(--account-white);
}

.account-page .dashboard-desktop .dashboard-secondary,
.account-page .dashboard-desktop .text-body-secondary,
.account-page .dashboard-desktop .form-text {
    color: var(--account-gray) !important;
}

/* Account profile fields. */
.account-page .dashboard-desktop .form-control,
.account-page .dashboard-desktop .form-select,
.account-page .modal .form-control,
.account-page .modal .form-select {
    color: var(--account-white);
    background-color: var(--account-black);
    border-color: var(--account-white);
    border-radius: 0;
    box-shadow: none;
}

.account-page .dashboard-desktop .form-control:hover,
.account-page .dashboard-desktop .form-select:hover,
.account-page .modal .form-control:hover,
.account-page .modal .form-select:hover {
    color: var(--account-white);
    background-color: var(--account-black);
    border-color: var(--account-gray);
}

.account-page .dashboard-desktop .form-control:focus,
.account-page .dashboard-desktop .form-select:focus,
.account-page .modal .form-control:focus,
.account-page .modal .form-select:focus {
    color: var(--account-white);
    background-color: var(--account-black);
    border-color: var(--account-white);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.22);
}

.account-page .dashboard-desktop .form-control::placeholder,
.account-page .modal .form-control::placeholder {
    color: var(--account-muted);
    opacity: 1;
}

/*
 * Keep browser autofill from reintroducing a colored field background.
 */
.account-page .dashboard-desktop .form-control:-webkit-autofill,
.account-page .dashboard-desktop .form-control:-webkit-autofill:hover,
.account-page .dashboard-desktop .form-control:-webkit-autofill:focus,
.account-page .modal .form-control:-webkit-autofill,
.account-page .modal .form-control:-webkit-autofill:hover,
.account-page .modal .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--account-white);
    -webkit-box-shadow: 0 0 0 1000px var(--account-black) inset;
    caret-color: var(--account-white);
    transition: background-color 9999s ease-out;
}

/* Keep native select indicators visible against the black field. */
.account-page .dashboard-desktop .form-select,
.account-page .modal .form-select {
    filter: grayscale(1);
}

/* Account action buttons. */
.account-page .dashboard-desktop .btn-primary,
.account-page .modal .btn-primary {
    color: var(--account-black);
    background: var(--account-white);
    border-color: var(--account-white);
    border-radius: 0;
}

.account-page .dashboard-desktop .btn-primary:hover,
.account-page .dashboard-desktop .btn-primary:focus,
.account-page .dashboard-desktop .btn-primary:active,
.account-page .modal .btn-primary:hover,
.account-page .modal .btn-primary:focus,
.account-page .modal .btn-primary:active {
    color: var(--account-black);
    background: #d7d7d7;
    border-color: #d7d7d7;
}

.account-page .dashboard-desktop .btn-outline-light,
.account-page .dashboard-desktop .btn-outline-secondary,
.account-page .modal .btn-outline-light,
.account-page .modal .btn-outline-secondary {
    color: var(--account-white);
    background: var(--account-black);
    border-color: var(--account-white);
    border-radius: 0;
}

.account-page .dashboard-desktop .btn-outline-light:hover,
.account-page .dashboard-desktop .btn-outline-light:focus,
.account-page .dashboard-desktop .btn-outline-secondary:hover,
.account-page .dashboard-desktop .btn-outline-secondary:focus,
.account-page .modal .btn-outline-light:hover,
.account-page .modal .btn-outline-light:focus,
.account-page .modal .btn-outline-secondary:hover,
.account-page .modal .btn-outline-secondary:focus {
    color: var(--account-black);
    background: var(--account-white);
    border-color: var(--account-white);
}

/* Password modal uses the same neutral surface treatment. */
.account-page .modal-content {
    color: var(--account-white);
    background: var(--account-black);
    border: 1px solid var(--account-white);
    border-radius: 0;
}

.account-page .modal-header,
.account-page .modal-footer {
    color: var(--account-white);
    background: var(--account-black);
    border-color: var(--account-white);
}

.account-page .modal-body,
.account-page .modal-title,
.account-page .modal .form-label {
    color: var(--account-white);
}

.account-page .modal .btn-close {
    filter: invert(1) grayscale(1);
}

/*
 * Light mode keeps the same black-and-white design with the foreground and
 * background roles inverted.
 */
html[data-bs-theme="light"] .account-page {
    --account-black: #ffffff;
    --account-white: #000000;
    --account-gray: #404040;
    --account-muted: #686868;
}

html[data-bs-theme="light"] .account-page
.dashboard-desktop .btn-primary,
html[data-bs-theme="light"] .account-page
.modal .btn-primary {
    color: #ffffff;
    background: #000000;
    border-color: #000000;
}

html[data-bs-theme="light"] .account-page
.dashboard-desktop .btn-primary:hover,
html[data-bs-theme="light"] .account-page
.dashboard-desktop .btn-primary:focus,
html[data-bs-theme="light"] .account-page
.modal .btn-primary:hover,
html[data-bs-theme="light"] .account-page
.modal .btn-primary:focus {
    color: #ffffff;
    background: #333333;
    border-color: #333333;
}

html[data-bs-theme="light"] .account-page .modal .btn-close {
    filter: none;
}

/* Net Set Account black-and-white theme: end */

/* Net Set System locations: begin */
.system-locations,
.location-detail-card + .location-detail-card {
    margin-top: 1.25rem;
}

.system-locations-card,
.location-detail-card {
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 0;
    background: #000;
    color: #fff;
    box-shadow: none;
}

.system-locations-card + .system-locations-card {
    margin-top: 1.25rem;
}

.system-locations-card-header,
.location-detail-card-header {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #fff;
    background: #000;
}

.location-detail-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.system-locations-eyebrow,
.location-detail-eyebrow {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.system-locations-card-header h2,
.location-detail-card-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

.system-locations-description,
.location-detail-description {
    margin: .35rem 0 0;
    color: #fff;
    font-size: .9rem;
}

.system-locations-form {
    padding: 1.25rem;
}

.system-locations-form-grid {
    display: grid;
    grid-template-columns:
        minmax(12rem, 1fr)
        minmax(12rem, 1fr)
        auto;
    gap: 1rem;
    align-items: end;
}

.system-locations-form-action {
    padding-bottom: .1rem;
}

.system-locations .form-label {
    color: #fff;
}

.system-locations .form-control {
    min-height: 48px;
    border: 1px solid #fff;
    border-radius: 0;
    background: #000;
    color: #fff;
    box-shadow: none;
}

.system-locations .form-control:focus {
    border-color: #fff;
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .25);
}

.system-locations .form-control::placeholder {
    color: #aaa;
}

.system-locations-primary-button,
.system-locations-manage-button,
.location-detail-outline-button {
    border: 1px solid #fff;
    border-radius: 0;
    background: #000;
    color: #fff;
    box-shadow: none;
}

.system-locations-primary-button:hover,
.system-locations-primary-button:focus,
.system-locations-manage-button:hover,
.system-locations-manage-button:focus,
.location-detail-outline-button:hover,
.location-detail-outline-button:focus {
    border-color: #fff;
    background: #fff;
    color: #000;
    box-shadow: none;
}

.system-locations-table {
    --bs-table-bg: #000;
    --bs-table-color: #fff;
    --bs-table-border-color: #fff;
    margin: 0;
    color: #fff;
}

.system-locations-table > :not(caption) > * > * {
    border-color: #fff;
    background: #000;
    color: #fff;
}

.system-locations-table tbody tr:last-child > * {
    border-bottom: 0;
}

.system-locations code,
.location-detail-card code {
    color: #fff;
}

.system-locations-status,
.location-detail-status {
    display: inline-block;
    padding: .2rem .45rem;
    border: 1px solid #fff;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
}

.system-locations-empty,
.location-detail-empty {
    padding: 1.5rem 1.25rem;
    color: #fff;
}

.location-detail-empty h2 {
    color: #fff;
}

.location-detail-actions {
    margin-bottom: 1.25rem;
}

.location-detail-facts {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    margin: 0;
}

.location-detail-facts > div {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #fff;
}

.location-detail-facts > div:nth-child(odd) {
    border-right: 1px solid #fff;
}

.location-detail-facts > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.location-detail-facts dt {
    margin-bottom: .3rem;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.location-detail-facts dd {
    margin: 0;
    color: #fff;
}

.location-detail-lifecycle {
    padding: 1.25rem;
}

@media (max-width: 767.98px) {
    .system-locations-form-grid,
    .location-detail-facts {
        grid-template-columns: 1fr;
    }

    .location-detail-facts > div,
    .location-detail-facts > div:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid #fff;
    }

    .location-detail-facts > div:last-child {
        border-bottom: 0;
    }

    .location-detail-card-header {
        display: block;
    }

    .location-detail-status {
        margin-top: 1rem;
    }
}
/* Net Set System locations: end */

/* Net Set location assets: begin */
.location-assets-list {
    display: grid;
}

.location-assets-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #fff;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.location-assets-item:last-child {
    border-bottom: 0;
}

.location-assets-item:hover,
.location-assets-item:focus-visible {
    background: #fff;
    color: #000;
}

.location-assets-copy {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.location-assets-copy strong,
.location-assets-copy > span {
    color: inherit;
}

.location-assets-copy > span {
    font-size: .82rem;
}

.location-assets-status {
    flex: 0 0 auto;
    padding: .2rem .45rem;
    border: 1px solid currentColor;
    color: inherit;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .location-assets-item {
        align-items: flex-start;
    }
}
/* Net Set location assets: end */

/* NETSET_LOCATION_LINKS_AND_BREADCRUMBS */

.servers-region-location-link {
    display: inline-block;
    color: #999;
    text-decoration: none;
}

.servers-region-location-link .servers-region-title,
.servers-region-location-link .servers-region-subtitle {
    color: inherit;
}

.servers-region-location-link:hover,
.servers-region-location-link:focus {
    color: #fff;
    text-decoration: none;
}

.servers-region-location-link:focus-visible {
    outline: 1px solid #fff;
    outline-offset: .3rem;
}

.dashboard-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: #999;
    line-height: 1.5;
}

.dashboard-breadcrumb-link {
    color: #999;
    font-weight: 400;
    text-decoration: none;
}

.dashboard-breadcrumb-link:hover,
.dashboard-breadcrumb-link:focus {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
}

.dashboard-breadcrumb-link:focus-visible {
    outline: 1px solid #fff;
    outline-offset: .18rem;
}

.dashboard-breadcrumb-current {
    color: #fff;
    font-weight: 700;
}

.dashboard-breadcrumb-separator {
    color: #999;
    font-weight: 400;
}
/* Net Set device ping history: begin */
.server-detail-ping-panel {
    display: grid;
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    min-height: 230px;
    border-bottom: 1px solid #303030;
    background: #101010;
}

.server-detail-ping-current {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #383838;
    border-radius: .65rem;
    background: #151515;
}

.server-detail-ping-label {
    margin: 0 0 .55rem;
    color: #999;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.server-detail-ping-value {
    display: block;
    color: #fff;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.server-detail-ping-value small {
    color: #aaa;
    font-size: .85rem;
    font-weight: 500;
}

.server-detail-ping-value.is-disabled,
.server-detail-ping-value.is-pending {
    color: #aaa;
    font-size: 1.35rem;
}

.server-detail-ping-value.is-unreachable {
    color: #ef7272;
    font-size: 1.35rem;
}

.server-detail-ping-note {
    margin-top: .65rem;
    color: #888;
    font-size: .75rem;
}

.server-detail-ping-history {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.25rem .25rem;
}

.server-detail-ping-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
    color: #888;
    font-size: .75rem;
}

.server-detail-ping-legend {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.server-detail-ping-legend i {
    width: 1.2rem;
    height: 2px;
    background: #fff;
}

.server-detail-ping-chart {
    display: block;
    width: 100%;
    height: 170px;
    min-height: 170px;
    overflow: visible;
}

.server-detail-ping-grid {
    stroke: #292929;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.server-detail-ping-axis-label,
.server-detail-ping-time-label {
    fill: #777;
    font-family: system-ui, sans-serif;
    font-size: 10px;
}

.server-detail-ping-line {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.server-detail-ping-point {
    fill: #fff;
    vector-effect: non-scaling-stroke;
}

.server-detail-ping-outage {
    stroke: #db4545;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.server-detail-ping-empty {
    display: grid;
    min-height: 170px;
    place-items: center;
    border: 1px dashed #383838;
    border-radius: .5rem;
    color: #777;
    font-size: .82rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .server-detail-ping-panel {
        grid-template-columns: 1fr;
    }

    .server-detail-ping-current {
        margin-bottom: 0;
    }

    .server-detail-ping-history {
        padding: 1.25rem;
    }

    .server-detail-ping-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Net Set device ping history: end */