@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css");

:root {
    --mud-table-border-radius: 0.75rem;
    --kt-brand-blue: #0B5ED8;
    --kt-brand-blue-pale: #E2EEFB;
    /* Translucent brand wash used behind inline checkbox/highlight rows on forms */
    --kt-brand-blue-tint: rgba(0, 123, 224, 0.07);
    --kt-bg-page: #F8F9FD;
    --kt-bg-subtle: #F6F8FE;
    --kt-border: #E5EAFA;
    --kt-border-input: #DEE2E6;
    --kt-fg-1: #171D22;
    --kt-fg-2: #51617B;
    --kt-fg-3: #727677;
    --kt-danger: #E74D4D;
    --kt-danger-pale: #FEF2F2;
    --kt-success: #198754;
    --kt-success-pale: #EDFAF4;
    --kt-warning: #B45309;
    --kt-warning-pale: #FFFBEB;
    /* Pale border companions to the semantic fills above, for status pills and inline banners that
       need an outline light enough not to compete with the text inside them. */
    --kt-success-border: #BFE6CF;
    --kt-warning-border: #F5DCAE;
    --kt-info: #24445F;
    --kt-info-pale: #F4F9FF;
    --kt-info-border: #D8E8FA;
    /* Categorical chart colors. Mirrored in KeytosUIShared DashboardChartPalette, which has to hand
       the same values to MudBlazor charts in C# — keep the two lists in the same order. */
    --kt-chart-purple: #7C3AED;
    --kt-chart-teal: #0E9488;
    --kt-chart-blue-light: #5B9BEF;
    --kt-chart-neutral: #CBD5E1;
    --kt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Neutral surfaces and fills for card chrome: a tinted band for table header/footer rows, and a
       flat gray for pills, icon tiles and hover states. Both are warmer than --kt-bg-subtle, which
       carries a blue cast that reads as selected next to white cards. */
    --kt-surface-subtle: #FAFBFC;
    --kt-fill-muted: #F2F4F7;
    /* Divider inside a card, lighter than --kt-border so it separates without boxing content in. */
    --kt-border-subtle: #EEF1F5;
    /* Placeholder and decorative-icon gray, and the flatter gray a disabled control's icon drops to. */
    --kt-fg-4: #98A2B3;
    --kt-fg-disabled: #CFD5DE;
    /* Focus treatment: a brighter blue than the brand fill, so a focused border stays visible against
       the filled primary button sitting next to it. */
    --kt-brand-blue-accent: #2B8DFF;
    --kt-focus-ring: 0 0 0 3px rgba(43, 141, 255, 0.15);
    /* The focus look every native input and textarea gets from the rules below, for a field drawn
       by something else to match. */
    --kt-input-focus-border: #80bdff;
    --kt-input-focus-ring: 0 0 0 0.2rem rgb(0 123 255 / 25%);
    --kt-brand-dark: #162438;
    --kt-shadow-card: 0 1px 4px 0 #D8DFF3;
    /* Partner billing direction colors: blue = partner pays Keytos, green = Keytos pays partner */
    --kt-partner-owes: #007be0;
    --kt-partner-owes-pale: #f5fbff;
    --kt-partner-owes-tint: rgba(0, 123, 224, 0.07);
    --kt-keytos-owes: #2e7d32;
    --kt-paper-bg: #fff;
}

input[readonly] {
    background-color: #e9ecef;
}

label {
    margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
    --bs-heading-color: #343a40;
}

.mud-input.mud-input-outlined {
    background-color: white;
}

#Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window {
    z-index: 9999 !important;
    max-height: 90vh !important;
    max-width: revert-layer !important;
    height: revert-layer !important;
    width: revert-layer !important;
    border-radius: 15px;
}

.section-label {
    margin-top: 16px;
    margin-bottom: 2px;
    display: block;
}

a {
    text-decoration: none;
    color: #0a8ce5 !important;
    transition: 0.3s;
}

a:hover {
    color: #2f3842;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
}

.font34 {
    font-size: 2.12rem;
    font-weight: bold;
}

.font-28 {
    font-size: 28px;
}

.font-8 {
    font-size: 8px;
}

.font-18, h4 {
    font-size: 18px;
}

.font-10 {
    font-size: 10px;
}

.font-11 {
    font-size: 11px;
}

.font-13, .left-side-nav .nav-item .nav-link p {
    font-size: 13px;
    margin: 0;
}

.theme-color {
    color: #0a8ce5;
}

.color2 {
    color: #727677;
}

.font-weight-bolder {
    font-weight: 500;
}

h2 {
    color: #727677;
    font-size: 3.4rem;
    font-weight: 700;
    font-family: "Hind", sans-serif;
    font-style: italic;
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 2.4rem;
    }
}

h1 {
    color: #171d22;
    margin: 0;
    font-size: 48px;
}

@media only screen and (max-width: 991px) {
    h1 {
        font-size: 24px;
    }
}

h1 strong {
    font-weight: 600;
}

.section-heading-offset {
    margin-left: -10px;
}

/* Section heading for form sections (e.g. Wi-Fi profile): top spacing, default heading size */
.wifi-section-heading {
    margin-top: 15px;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

@media screen and (min-width: 992px) {
    .content .container-fluid > .row {
        flex-wrap: nowrap;
    }
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-item {
    font-size: 12px;
}

body, html {
    height: 100%;
}

body {
    font-size: 14px;
    background-color: #f8f9fd;
    color: #171d22;
    line-height: 1.5;
    font-family: "Hind", sans-serif;
}

.font-14, .breadcrumb {
    font-size: 14px;
    font-weight: 500;
}

.font-16 {
    font-size: 16px;
    font-weight: 500;
}

.btn-link {
    font-size: 12px;
    padding: 0;
    border: 0;
    color: #171d22;
}

@media only screen and (max-width: 768px) {
    .btn-link {
        font-size: 11px;
    }
}

.btn-link:hover {
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .logo img {
        max-width: 100%;
    }
}

.container {
    max-width: 1300px;
}

.content .container-fluid {
    padding-left: 10px;
}

.logout button {
    border: 0;
    background-color: transparent;
    border-radius: 100%;
    padding: 0;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #25385 !important;
    opacity: 1 !important;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #25385;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #c4c4c4;
}

.h-100 {
    height: 100%;
}

.header {
    border-bottom: 1px solid #e5eafa;
    position: relative;
    border-radius: 0.8rem 0 0 0;
}

@media screen and (max-width: 767px) {
    .header {
        margin-top: 1rem;
    }
}

.right-side {
    background: linear-gradient(62.41deg, rgba(254, 251, 241, 0.8) 0.92%, rgba(250, 244, 254, 0.15) 99.19%), linear-gradient(310.9deg, rgba(235, 245, 254, 0.8) 25.33%, rgba(248, 248, 254, 0.4) 98.91%), #FFFFFF;
    margin-left: -0.6rem;
    border-radius: 0.8rem 0 0 0.8rem;
    z-index: 1;
    min-width: 0;
    overflow-x: auto;
}

@media only screen and (max-width: 1024px) {
    .right-side {
        margin: 0;
    }
}

/* Every page ends with room to scroll past its last row, so a table's action menu or the footer of
   a long form is never pinned against the bottom of the window. Pages used to ask for this one at a
   time with .mb-100; on the layout's body it cannot be forgotten by a new page. It is padding
   rather than margin so the panel's own background still covers it. */
.kt-shield-page-body {
    padding-bottom: 100px;
}

.box {
    background-color: #fff;
    box-shadow: 0 1px 4px 0 #d8dff3;
    padding: 5px 8px 10px 9px;
    border-radius: 10px !important;
}

.left-side-nav {
    margin-bottom: 1rem;
    position: relative;
}

.left-side-nav .box {
    padding: 0;
}

.left-side-nav .nav-item {
    margin: 0rem 0 0.5rem;
}

.left-side-nav .nav-item:last-child {
    border-bottom: 0;
}

.left-side-nav .nav-item .nav-link {
    display: flex;
    padding: 0.54rem 0;
    color: #fff !important;
    align-items: center;
    transition: 0.3s;
}

@media screen and (max-width: 768px) {
    .left-side-nav .nav-item .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

.left-side-nav .nav-item .nav-link i {
    color: #fbf9f9 !important;
    margin: 0 0.5rem 0 1rem;
    height: 15px;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .left-side-nav .nav-item .nav-link i {
        margin-right: 0.5rem;
    }
}

.left-side-nav .nav-item .nav-link i:before {
    top: 1px;
    display: block;
    position: relative;
    font-size: 14px;
}

.left-side-nav .nav-item .nav-link p span {
    font-size: 9px;
}

.left-side-nav .nav-item .nav-link.active, .left-side-nav .nav-item .nav-link:hover {
    background-color: #fbf9f9;
    border-radius: 2rem;
    color: #162438 !important;
    position: relative;
}

.left-side-nav .nav-item .nav-link.active i, .left-side-nav .nav-item .nav-link:hover i {
    color: #162438 !important;
}

.left-side-nav .nav-item .nav-link.active i svg path, .left-side-nav .nav-item .nav-link.active i svg circle, .left-side-nav .nav-item .nav-link:hover i svg path, .left-side-nav .nav-item .nav-link:hover i svg circle {
    stroke: #253856;
}

.left-side-nav .nav-item .nav-link.active:after, .left-side-nav .nav-item .nav-link:hover:after {
    /*background: url(/images/app/img3.png);*/
    content: "";
    width: 16px;
    height: 71px;
    position: absolute;
    right: -27px;
}

@media screen and (max-width: 1024px) {
    .left-side-nav .nav-item .nav-link.active:after, .left-side-nav .nav-item .nav-link:hover:after {
        display: none;
    }
}

.left-side-nav .nav-item .nav-link:hover:after {
    display: none;
}

.left-side-nav .nav-item .nav-link:hover img {
    filter: invert(50%) sepia(50%) saturate(3047%) hue-rotate(43deg) brightness(30%) contrast(50%);
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .breadcrumb {
        font-size: 12px !important;
    }
}

.breadcrumb .breadcrumb-item {
    margin: 0 1.2rem;
}

.breadcrumb .breadcrumb-item.active {
    color: #0a8ce5;
}

.breadcrumb .breadcrumb-item:first-child {
    margin-left: 0;
}

.breadcrumb .breadcrumb-item a {
    color: #171d22;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

.breadcrumb .breadcrumb-item a {
    position: relative;
}

.breadcrumb .breadcrumb-item a:after {
    content: ">";
    display: inline-block;
    margin: 0 0.2rem;
    position: absolute;
    right: -14px;
    top: 1px;
}

h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-top: 40px;
    margin-bottom: 24px;
}

h6, .font-14, .breadcrumb {
    font-size: 14px;
}

h5 {
    font-size: 16px;
}

.theme-btn {
    background-color: #0a8ce5;
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
}

.title {
    margin-bottom: 10px;
}

a.collapsed.view-less-more::after {
    content: "View More";
}

.text-decoration {
    text-decoration: underline;
}

a.view-less-more:not(.collapsed)::after {
    content: "View Less";
}

button {
    cursor: pointer;
    text-decoration: none;
}

#sidebar {
    background-color: #162438;
    max-width: 220px;
    position: relative;
    flex: 0 0 220px;
}

@media screen and (max-width: 991px) {
    #sidebar {
        position: absolute;
        top: 60px;
        z-index: 2;
    }
}

@media screen and (max-width: 450px) {
    #sidebar {
        flex: 0 0 35%;
        max-width: 60%;
    }
}

.left-side-nav > ul {
    padding-right: 1.4rem;
}

@media screen and (max-width: 1024px) {
    .left-side-nav > ul {
        padding-right: 0;
    }
}

.user-content {
    background-color: #e2eefb;
    width: 180px;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 5rem;
}

.user-content {
    display: flex;
    align-items: center;
    color: #152031 !important;
}

.user-content span.user-logo {
    background-color: #0a8ce5;
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    justify-content: center;
}

h1 {
    color: #152031;
    font-weight: bold;
}

.btn-custom {
    font-size: 12px;
    background-color: #0a8ce5 !important;
    color: #fff !important;
    border-radius: 3px !important;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

.btn-custom:focus {
    border: 1px solid transparent !important;
}

.btn-custom:hover {
    color: #000 !important;
}

.btn:disabled {
}

.btn-custom.disabled {
    opacity: .65;
}

.btn-custom.request-btn {
    box-shadow: 4px 3px 2px 4px #e2eefb;
}

.card-header {
    --bs-card-cap-bg: white;
    background-color: white;
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1.25rem;
}

.card-footer {
    background-color: white;
}

.min-vh-100 {
    height: 100%;
}

.review-search.d-flex {
    color: #b8c8e0;
    font-size: 14px;
    font-weight: 600;
}

.accordion .card {
    border: 0;
}

.accordion .card-body {
    padding: 0;
}

.accordion .card-header {
    background-color: transparent;
    border: 0;
}

ol {
    padding-left: 0px;
}

ol li::before {
    content: "\2022";
    color: #0A8CE5;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: 0;
}

.accordion .card-header .btn-header-link {
    display: block;
    text-align: left;
    color: #253856 !important;
    font-size: 16px;
    font-weight: 600;
}

.accordion .card-header .btn-header-link i {
    font-size: 13px;
    margin-right: 0.5rem;
    margin-left: -25px;
}

.accordion .card-header .btn-header-link:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    content: "\f077";
    font-size: 14px;
}

.accordion .card-header .btn-header-link.collapsed:after {
    content: "\f078";
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

table tr:first-child th:first-child {
    border-top-left-radius: 4px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 4px;
}

table > tbody > tr {
    border-color: #dee2e6;
    border-bottom-width: 1px;
}

.table-responsive {
    font-size: 11px;
}

.table-responsive thead th {
    border: 0;
    background-color: #f6f8fe;
    font-weight: 600;
    text-transform: uppercase;
}

.table-responsive thead th img {
    vertical-align: baseline;
}

.table-responsive thead th:last-child {
    width: 6%;
}

.table-responsive .table td, .table-responsive .table th {
    border: 0;
    padding: 0.75rem 0.5rem;
    vertical-align: text-top;
}

.table-responsive .table td:first-child, .table-responsive .table th:first-child {
    padding-left: 1rem;
}

@media only screen and (max-width: 767px) {
    .table-responsive .table td, .table-responsive .table th {
        min-width: 148px;
        text-align: center;
    }
}

a.btn-custom {
    border-radius: 0.5rem !important;
    display: inline-block;
    color: #fff !important;
    cursor: pointer;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: none;
    background-color: #f6f8fe !important;
    font-size: 10pt;
    font-family: 'Hind';
    font-weight: 600;
    color: #253856;
    text-transform: uppercase;
}

.table td {
    padding: .75rem;
    border-top: none;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    color: #51617B !important;
}

.table th {
    padding: .75rem;
    border-top: none;
}

.table td, .table th {
    border-top: none !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: none !important;
}

tr:nth-child(even) {
    background-color: #f6f8fe;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0rem !important;
    background-color: transparent;
    border-radius: 10px;
}

.table-striped-even > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: #fafbff;
}

.progress-title {
    font-size: 16px;
    font-weight: 700;
    color: #011627;
    margin: 0 0 20px;
}

.progress {
    height: 2px;
    background: #b8c8e0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-top: 1.5rem;
    position: relative;
}

.progress span.min {
    position: absolute;
    left: 0;
    color: #b8c8e0;
    top: -20px;
}

.progress span.min:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #0a8ce5;
    display: inline-block;
    position: absolute;
    bottom: -6px;
    left: 0;
}

.progress span.max {
    position: absolute;
    right: -6px;
    color: #b8c8e0;
    top: -20px;
}

.progress span.max:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background-color: #b8c8e0;
    display: inline-block;
    position: absolute;
    bottom: -6px;
    right: 0;
}

.progress .progress-bar {
    box-shadow: none;
    position: relative;
    animation: animate-positive 2s;
}

.progress .progress-bar:after {
    content: "";
    display: block;
    background-image: url(/images/app/slider-icon.png);
    position: absolute;
    top: -4px;
    right: 1px;
    width: 22px;
    height: 6px;
}

.progress .progress-value {
    font-size: 10px;
    color: #fff;
    position: absolute;
    top: -28px;
    right: 0px;
    background-color: #0a8ce5;
    border-radius: 0.3rem;
    padding: 0.1rem 0.2rem 0;
}

.progress.pink .progress-bar:after {
    border-bottom-color: #ff4b7d;
}

.progress.green .progress-bar:after {
    border-bottom-color: #0a8ce5;
}

.progress.yellow .progress-bar:after {
    border-bottom-color: #e8d324;
}

.progress.blue .progress-bar:after {
    border-bottom-color: #3485 xef;
}

@keyframes animate-positive {
    0% {
        width: 0;
    }
}

.request-lft-btn {
    position: fixed;
    bottom: 2rem;
    left: 38px;
    width: 135px;
    z-index: 11;
}

.request-lft-btn button {
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    .request-lft-btn {
        left: 10px;
    }
}

.responsive-menu {
    position: absolute;
    left: -6px;
    z-index: 1;
    top: 13px;
}

@media screen and (max-width: 991px) {
    .download-link {
        margin-left: 2.3rem;
    }
}

.e-grid .e-rowcell {
    border-color: transparent !important;
}

.accordion .e-grid {
    font: 11px "Hind", sans-serif !important;
    border: 0 !important;
}

.accordion .e-grid .e-headercontent {
    margin-top: -16px;
}

.accordion .e-grid .e-headercelldiv {
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: initial !important;
    overflow: initial !important;
}

.accordion .e-grid .e-headercell, .accordion .e-grid .e-detailheadercell {
    border: 0 !important;
    font-size: 10px !important;
    background-color: #f6f8fe !important;
    padding: 0 8px 0 !important;
    height: 50px !important;
}

.accordion .e-grid .e-gridheader {
    border: 0 !important;
    background-color: #f6f8fe !important;
}

a.btn:not([href]):not([tabindex]) {
    color: #fff;
}

.e-row {
    background-color: #f6f8fe;
}

.e-row.e-altrow:nth-of-type(odd) {
    background-color: #fff;
}

.accordion .e-grid .e-gridcontent tr td {
    padding: 5px 5px 5px 10px;
    height: 62px;
}

.e-grid .e-pager {
    border-bottom: transparent;
    border-left: transparent;
    border-right: transparent;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
}

.accordion .e-grid .e-gridcontent tr td:last-child {
    text-align: right;
    padding-right: 20px;
}

/*Search*/
.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
    right: auto !important;
}

.e-search {
    left: 0px !important;
    top: -67px !important;
    border: 0 !important;
}

.e-search input[type=text] {
    height: 40px !important;
    display: inline-block !important;
    border: none !important;
    outline: none !important;
    color: #000 !important;
    padding: 3px !important;
    padding-left: 48px !important;
    width: 0px !important;
    position: absolute !important;
    top: -3px !important;
    left: 0 !important;
    background: none !important;
    z-index: 3 !important;
    transition: width 0.3s cubic-bezier(0, 0.795, 0, 1) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: "Hind" sans-serif !important;
    border-radius: 0px !important;
}

.e-search input[type=text]::placeholder {
    opacity: 1 !important;
    color: #25385 !important;
}

.e-search input[type=text]:focus:hover {
    border-bottom: 1px solid #BBB !important;
}

.e-search input[type=text]:focus {
    width: 270px !important;
    z-index: 1 !important;
    border-bottom: 1px solid #253856 !important;
    cursor: text !important;
    background-color: #fff !important;
}

.e-search .e-search-icon {
    height: 40px !important;
    width: 50px !important;
    display: inline-block !important;
    color: #253856 !important;
    float: right !important;
    border: none !important;
    position: absolute !important;
    top: 11px !important;
    left: 0px !important;
    z-index: 2 !important;
    cursor: pointer !important;
    transition: opacity 0.5s ease !important;
    background-color: transparent !important;
    font-size: 14px !important;
}

.e-search button:hover {
    opacity: 0.8 !important;
}

button:focus {
    outline: none;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
    height: 2px;
    background: #b8c8e0 !important;
    opacity: .6 !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
    fill: transparent !important;
    stroke: transparent !important;
}

.mdc-slider__thumb {
    background-image: url(/images/app/slider-icon.png);
    background-repeat: no-repeat;
    top: 5px !important;
    transform: initial !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track, .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
    background-color: #0a8ce5 !important;
}

.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
    background-color: #0a8ce5 !important;
}

.page-title p {
    font-size: 36px;
    font-weight: bold;
}

.e-input-group.e-flatcorner {
    border-radius: 0px;
}

tr.removed td {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

tr.added td {
    background: #e6ffed !important;
    color: black !important;
}

.e-input-group.e-red .e-input[readonly], .e-input-group.e-control-wrapper.e-red .e-input[readonly] {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.e-input-group.e-green .e-input[readonly], .e-input-group.e-control-wrapper.e-green .e-input[readonly] {
    background: #e6ffed !important;
    color: black !important;
}

input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--kt-input-focus-border);
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: var(--kt-input-focus-ring);
}

.addedApproval .card-body {
    background: #e6ffed !important;
    color: black !important;
}

.removedApproval .card-body {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.removedApproval .card-header {
    text-decoration: line-through;
}

.removedApproval label {
    text-decoration: line-through;
}

.removedTextField input {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.addedTextField input {
    background: #e6ffed !important;
    color: black !important;
}

.e-input-group.e-flatrightcorner {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.e-checkbox-wrapper.e-checkbox-disabled.stirkethrough .e-label {
    color: black !important;
    text-decoration: line-through !important;
}

.e-checkbox-wrapper.e-checkbox-disabled.blackText .e-label {
    color: black !important;
}

.fas.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.fa-left {
    margin-right: 7px;
}

.form-control {
    flex: 1;
    margin-left: -5px;
    margin-right: 10px;
}

/* The global .form-control side margins split an input from the button attached to it in a
   Bootstrap input-group; undo them so the group renders as one joined control. */
/* Copy affordance overlaid inside a readonly field instead of joined to its edge. The button is
   taken out of flow, so the field keeps the exact metrics of a bare .form-control and nothing about
   it moves on hover — only the icon's color reacts. The field's right padding reserves the icon's
   lane so a long value never runs underneath it. */
.kt-copy-field {
    position: relative;
}

.kt-copy-field > .form-control {
    margin-left: 0;
    margin-right: 0;
    padding-right: 2.5rem;
}

.kt-copy-field > .kt-copy-btn {
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: transparent;
    color: var(--kt-fg-3);
    cursor: pointer;
}

.kt-copy-field > .kt-copy-btn:hover,
.kt-copy-field > .kt-copy-btn:focus,
.kt-copy-field > .kt-copy-btn:active {
    background: transparent;
    color: var(--kt-fg-1);
}

.old-val {
    background: #ffeef0 !important;
    color: black !important;
    text-decoration: line-through;
}

.new-val {
    background: #e6ffed !important;
    color: black !important;
}

h6.mud-typography.mud-typography-h6.mud-inherit-text {
    display: block;
    text-align: left;
    color: #253856;
    font-size: 16px;
    font-weight: 600;
}

div.mud-input-control.mud-input-control.mt-0 {
    margin-right: 371px;
    margin-left: 265px;
    margin-top: -69px !important;
}

div.mud-table {
    border-radius: var(--mud-table-border-radius);
}

div.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    background: white;
    border-radius: var(--mud-table-border-radius) var(--mud-table-border-radius) 0 0;
}

div.mud-toolbar.mud-toolbar-gutters.mud-table-pagination-toolbar {
    background: white;
    border-top: 1px solid #F0F0F0;
    border-radius: 0 0 var(--mud-table-border-radius) var(--mud-table-border-radius);
}

table.mud-table-root {
    table-layout: fixed;
}

td.mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10%;
    white-space: nowrap;
}

th.mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10%;
    white-space: nowrap;
}

div.mud-tabs-toolbar {
    background-color: transparent;
}

/*div.mud-tabs-toolbar-wrapper {
    width: 100% !important;
}

div.mud-tab.mud-ripple {
    max-width: 660px;
}*/

.donut-chart .svg-tooltip rect {
    fill: rgba(0, 0, 0, 0.8) !important;
}

.donut-chart .svg-tooltip text {
    fill: white !important;
}

div.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 4px;
    background-color: white;
}

div.mud-input-slot.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end.mud-select-input {
    padding: 0.6rem .75rem;
}

div.mud-input.mud-input-text.mud-input-adorned-end.mud-input-underline.mud-shrink {
    background-color: white;
    border-radius: 4px;
}

input.mud-input-slot.mud-input-root.mud-input-root-text.mud-input-root-adorned-end {
    padding: 6px 4px 7px;
}

div.mud-input.mud-input-outlined.mud-input-adorned-end.mud-shrink.mud-select-input {
    width: 100%;
}

div.mud-popover.mud-popover-open.mud-popover-bottom.mud-paper.mud-elevation-8 {
    background-color: white;
}

div.mud-dialog-content {
    background: white;
}

div.loadingCenterHardHeight {
    margin: auto;
    width: 70px;
    justify-content: center;
    height: 800px;
    align-items: center;
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

.text-prewrap {
    white-space: pre-wrap;
}

/* MudBlazor 9 nests the range input one level deeper, so the direct-child selector alone stopped
   reaching it and the global input border and focus glow came back around every slider. */
.mud-slider > input,
.mud-slider .mud-slider-input {
    border: 0 !important;
    padding: 0;
    box-shadow: none;
}

textarea {
    overflow: auto;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    width: 100%;
    padding: 10px;
}

textarea:focus {
    border-color: var(--kt-input-focus-border);
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: var(--kt-input-focus-ring);
}

.filter-box-wrapper {
    align-items: center; /* vertically center the box in the column */
}

.filter-box {
    align-items: center; /* center checkbox + text inside */
    height: 38px; /* roughly matches Bootstrap .btn height */
    padding: 0 12px; /* horizontal padding only */
    box-shadow: none;
    border-radius: 4px;
    margin-top: 5px;
}

.filter-box-row {
    background: rgba(0, 123, 224, 0.07);
    border-radius: 16px;
    padding: 19px 10px;
    margin-right: -2px;
    margin-bottom: 30px;
    margin-left: -2px;
}

.check-box {
    background: rgba(0, 123, 224, 0.07);
    border-radius: 4px;
    padding: 5px 8px 14px 9px;
    box-shadow: none;
}

.check-box .mud-checkbox{
    margin-bottom: -20px !important;
    margin-top: -10px !important;
    margin-left: -13px !important;
}

.drag-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    min-height: 0;
    height: 150px;
}

.drag-drop-input {
    position: absolute;
    width: 100%;
    height: 40px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.drag-drop-zone .drag-drop-input {
    height: 150px;
}

.drag-enter {
    box-shadow: none;
}

.list {
    padding: 2em;
    min-width: 100%;
}
.trust-download-btn {
    border-radius: 4px;
    color: white !important;
    text-decoration: none !important;
}

.trust-download-btn:hover {
    color: white !important;
}

.trust-download-btn:focus {
    color: white !important;
}

.trust-download-icon {
    margin-right: 8px;
}

.mb-100 {
  margin-bottom: 100px;
}

/* ========== Policy Page Reusable Classes ========== */

/* Card with rounded corners */
.card-rounded {
    border-radius: 10px;
}

/* Transparent card header background */
.card-header-transparent {
    background-color: transparent !important;
}

/* Heading displayed inline */
.heading-inline {
    display: inline;
}

/* Icon button with no border or background */
.btn-icon {
    border-width: 0;
    background-color: transparent;
}

/* Danger-colored icon button for delete actions */
.btn-icon-danger {
    border-width: 0;
    background-color: transparent;
    color: #E74D4D;
}

/* Highlighted checkbox container */
.checkbox-highlight {
    background-color: rgba(0, 123, 224, 0.07);
    box-shadow: none;
    padding: 10px 8px 3px 9px;
    margin-bottom: 15px;
}

/* Dense checkbox adjustment inside checkbox-highlight */
.mud-checkbox-dense {
    margin-bottom: -12px;
    margin-top: -10px;
    margin-left: -13px;
}

/* Dense checkbox with no left indent (for row-level checkboxes) */
.mud-checkbox-start {
    margin-bottom: -12px;
    margin-top: -10px;
    margin-left: 0;
}

/* Transparent card footer background */
.card-footer-transparent {
    background-color: transparent !important;
}

/* Section heading top spacing */
.section-mt {
    margin-top: 20px;
}

/* Larger section heading top spacing */
.section-mt-lg {
    margin-top: 28px;
}

/* Firebrick text for warning/error messages */
.text-firebrick {
    color: firebrick;
}

/* CA IP restriction section heading — align with content rows */
.section-heading-flush {
    margin-left: -10px;
}

/* CA IP restriction: allow/block selector — cap the width so it doesn't stretch to fill
   the input-group. Height comes from .form-control, matching the IP text box. */
.ip-type-select {
    flex: 0 0 auto !important;
    width: 120px !important;
}

/* CA IP restriction status labels */
.ip-status-allowed {
    color: var(--kt-success);
    font-weight: 600;
}

.ip-status-blocked {
    color: var(--kt-danger);
    font-weight: 600;
}

/* Orange text for warnings */
.text-warning-orange {
    color: orange;
}

/* Dark brand navy text */
.text-kt-brand-dark {
    color: var(--kt-brand-dark);
}

/* Table overflow wrapper */
.table-overflow {
    overflow-x: auto;
}

/* Table cell vertically aligned with padded content */
.td-valign {
    padding-top: 24px;
}

/* Table cell for icon/status with centered alignment */
.td-icon-center {
    text-align: center;
    padding-top: 22px;
}

/* Delete button in table rows */
.btn-delete-row {
    border-width: 0;
    background-color: transparent;
    color: #E74D4D;
    margin: 15px 10px 10px;
}

/* Table action button spacing */
.btn-table-action {
    margin-top: 5px;
}

/* Button aligned with labeled form fields */
.btn-label-align {
    margin-top: 28px;
}

/* Cancel subscription dialog "Before You Go" info box */
.before-you-go-box {
    background-color: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Learn more info box */
.learn-more-box {
    background: #e2eefb;
    margin-top: 8px;
    line-height: 40px;
    width: fit-content;
    padding-right: 20px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.learn-more-box a {
    margin-left: 10px;
}

/* Attribute entry grey container */
.attribute-entry-container {
    background: #d2d2d2;
    margin-top: 8px;
    line-height: 40px;
    padding-right: 20px;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* Policy card header button group spacing */
.policy-header-toggle {
    margin-top: 20px;
    margin-left: 10px;
}

.kt-collapsible-header {
    cursor: pointer;
}
.policy-header-actions {
    margin: 20px 10px 10px 20px;
}

/* Heading inline with vertical spacing */
.heading-inline-spaced {
    display: inline;
    margin-top: 0.5rem;
}

/* Input field with no border-radius and no side margins */
.input-flat {
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Input field with transparent right border */
.input-flat-secret {
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-right: 1px solid transparent;
}

/* Password toggle button */
.btn-password-toggle {
    border: 1px solid #ced4da !important;
    border-radius: 0 !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Password toggle button with transparent right border */
.btn-password-toggle-left {
    border: 1px solid #ced4da !important;
    border-right: transparent !important ;
    border-radius: 0 !important;
}

/* IP action buttons */
.btn-ip-action {
    border-radius: 0 !important;
    margin-right: 2px;
    font-size: 1rem;
}

.btn-ip-add {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    font-size: 1rem;
}

/* No margin on sides */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Left margin adjustment */
.ms-label {
    margin-left: 10px;
}

/* Textarea no resize */
.textarea-no-resize {
    resize: none;
}

/* Horizontal line separator */
.hline-spaced {
    margin-bottom: 25px;
    margin-top: 25px;
}

/* Spacer at bottom of page */
.spacer-bottom-lg {
    margin-top: 100px;
}

/* Nested card inside a form card, separated from the section above it */
.card-spacer-top {
    margin-top: 20px;
}

/* Terms-and-conditions checkbox row on the signup pages */
.terms-acceptance-box {
    display: flex;
    align-items: center;
    background-color: var(--kt-brand-blue-tint);
    border-radius: 10px;
    padding: 9px 12px 9px 0;
}

/* Button with top spacing for form alignment */
.btn-form-mt {
    margin-top: 36px;
}

/* Priority input width */
.input-priority {
    width: 8ch;
    margin: 0;
}

/* Fixed height containers for button alignment */
.attribute-btn-container {
    height: 50px;
}

.accept-btn-container {
    height: 68px;
}

/* No left padding */
.ps-0 {
    padding-left: 0;
}

/* ========== Licensing Card ========== */

.licensing-card {
    background: white;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--kt-shadow-card);
    overflow: hidden;
}

.licensing-card-header {
    padding: 13px 18px;
    border-bottom: 0.4px solid var(--kt-border);
    background: white;
}

.licensing-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    line-height: 1.2;
    margin: 0;
}

.licensing-card-subtitle {
    font-size: 12px;
    color: var(--kt-fg-3);
    margin-top: 2px;
}

.licensing-total-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kt-fg-3);
    margin-right: 8px;
}

.licensing-total-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    font-size: 13px;
    font-weight: 600;
}

.licensing-total-pill i {
    font-size: 13px;
}

.licensing-card-body {
    padding: 16px 18px;
}

.licensing-mode-row {
    margin-bottom: 12px;
}

.licensing-mode-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--kt-brand-blue);
    font-size: 12px;
    font-weight: 500;
}

.licensing-mode-inactive {
    color: #9F9F9F;
    font-size: 12px;
}

.licensing-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    transition: background-color 140ms ease, border-color 140ms ease;
    margin-bottom: 16px;
}

.licensing-toggle-active {
    background: var(--kt-brand-blue-pale);
    border-color: var(--kt-brand-blue);
}

.licensing-toggle-checkbox {
    margin-bottom: 0;
}

.licensing-toggle-sub {
    flex-basis: 100%;
    margin-left: 32px;
    margin-top: -4px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

.licensing-users-section {
    margin-top: 4px;
}

/* Seats usage block */
.licensing-usage {
    padding: 14px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F6F8FE, #EFF6FF);
    border: 1px solid var(--kt-border);
    margin-bottom: 16px;
}

.licensing-usage-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.licensing-usage-counts {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.licensing-usage-big {
    font-size: 26px;
    font-weight: 600;
    color: var(--kt-fg-1);
    line-height: 1;
}

.licensing-usage-of {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.licensing-usage-pct {
    font-size: 18px;
    font-weight: 600;
    color: var(--kt-brand-blue);
}

.licensing-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(11, 94, 216, 0.12);
    overflow: hidden;
    margin-top: 10px;
}

.licensing-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0B5ED8, #27AAE1);
    border-radius: 999px;
    transition: width 240ms ease;
}

.licensing-usage-footer {
    margin-top: 10px;
    font-size: 11px;
    color: var(--kt-fg-2);
}

.licensing-usage-strong {
    color: var(--kt-fg-1);
    font-weight: 600;
}

.licensing-pending-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--kt-warning, #f59e0b);
}

/* ========== OwnersComponent shared styling ========== */

.kt-owners-section {
    display: block;
    margin-bottom: 4px;
}

.kt-owners-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.kt-owners-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin: 0;
}

.kt-owners-info {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-owners-input-row {
    margin-bottom: 10px;
}

.kt-owners-empty {
    color: var(--kt-fg-3);
    font-size: 13px;
    text-align: center;
    padding: 32px 14px;
    border-radius: 8px;
    border: 1px dashed var(--kt-border);
    background: var(--kt-bg-subtle);
}

.kt-owners-table-wrapper {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
}

.kt-owners-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    margin: 0;
    table-layout: fixed;
}

.kt-owners-table thead th {
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #253856;
    background: var(--kt-bg-subtle);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--kt-border-input);
}

.kt-owners-th-name {
    width: 30%;
}

.kt-owners-th-type {
    width: 15%;
}

.kt-owners-th-actions {
    width: 80px;
}

.kt-owners-table tbody tr {
    background: white;
}

.kt-owners-table tbody tr:nth-of-type(even) {
    background: var(--kt-bg-subtle);
}

.kt-owners-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--kt-fg-1);
    border-bottom: 0.4px solid var(--kt-border);
    vertical-align: middle;
}

.kt-owners-table tbody tr:last-child td {
    border-bottom: 0;
}

.kt-owners-td-name {
    font-weight: 500;
    color: var(--kt-fg-1);
    word-break: break-word;
}

.kt-owners-td-objid {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--kt-fg-2);
    word-break: break-all;
}

.kt-owners-td-actions {
    text-align: center;
    width: 60px;
}

.kt-owners-delete-btn {
    border: 0;
    background: transparent;
    color: var(--kt-danger);
    opacity: 0.7;
    font-size: 13px;
    padding: 4px;
    transition: opacity 120ms ease;
}

.kt-owners-delete-btn:hover {
    opacity: 1;
}

.kt-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}

.kt-type-pill-user {
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

.kt-type-pill-group {
    background: #F0EBFF;
    color: #6B21E8;
}

.kt-type-pill-default {
    background: #F1F3F8;
    color: var(--kt-fg-2);
}

.kt-type-pill-ezca {
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

/* No pale purple token exists, so the fill is mixed from the chart purple the text uses. */
.kt-type-pill-ezradius {
    background: color-mix(in srgb, var(--kt-chart-purple) 10%, var(--kt-paper-bg));
    color: var(--kt-chart-purple);
}

/* Authentication log Access-Accept / Access-Reject result (KeytosUIShared AuthAuditLogs) */
.kt-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.kt-result-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.kt-result-pill-accept {
    background: var(--kt-success-pale);
    color: var(--kt-success);
}

.kt-result-pill-reject {
    background: var(--kt-danger-pale);
    color: var(--kt-danger);
}

/* Meraki health-probe markers (KeytosUIShared AuthAuditLogs) */
.kt-test-probe-pill {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--kt-border);
    background: var(--kt-bg-subtle);
    color: var(--kt-fg-3);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.kt-test-probe-hint {
    margin-top: 4px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

/* ==========================================================================
   Networking dashboard (KeytosUIShared NetworkDashboard and its panels)
   ========================================================================== */
.kt-dash {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kt-dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.kt-dash-heading {
    margin-bottom: 4px;
}

.kt-dash-subheading {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-dash-alert {
    margin-bottom: 0;
}

.kt-dash-header-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.kt-dash-asof {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-dash-section-gap {
    margin-top: 28px;
}

/* Time-range selector */
.kt-dash-range-group {
    display: inline-flex;
    gap: 4px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 3px;
}

.kt-dash-range-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
}

/* Cards */
.kt-dash-card {
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 12px;
    padding: 15px 17px;
    height: 100%;
}

.kt-dash-card-flush {
    padding: 0;
    overflow: hidden;
}

/* Opt-in flex column so a card whose height is stretched by a taller sibling can hand the spare space
   to its content. Not applied to every card, because the table cards rely on normal block layout. */
.kt-dash-card-fill {
    display: flex;
    flex-direction: column;
}

.kt-dash-card-body {
    padding: 15px 17px;
}

.kt-dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kt-dash-card-header-padded {
    padding: 14px 17px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--kt-border);
}

.kt-dash-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-dash-card-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--kt-fg-3);
    margin-left: 4px;
}

.kt-dash-empty {
    font-size: 13px;
    color: var(--kt-fg-3);
    padding: 24px 0;
    text-align: center;
}

/* KPI tiles */
.kt-dash-kpi-row {
    margin-bottom: 0;
}

.kt-dash-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kt-dash-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
}

.kt-dash-stat-value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--kt-fg-1);
}

.kt-dash-value-success {
    color: var(--kt-success);
}

.kt-dash-value-danger {
    color: var(--kt-danger);
}

.kt-dash-stat-sub {
    font-size: 11px;
    color: var(--kt-fg-3);
}

.kt-dash-sub-success {
    color: var(--kt-success);
    font-weight: 500;
}

.kt-dash-sub-danger {
    color: var(--kt-danger);
    font-weight: 500;
}

/* EZRADIUS overview header: wraps the page title above the dashboard. */
.kt-overview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.kt-overview-header h1 {
    margin-bottom: 0;
}

/* Charts stretch to the card. MudChart needs MatchBoundsToSize as well as a width; the wrapper is
   what gives it a full-width parent to match. */
.kt-dash-chart {
    width: 100%;
}

/* The donut card sits beside the taller reject-reasons card, so this box grows into whatever height
   the row settles on. MudChart draws the ring and its own legend into the bounds it is given, which is
   why the size lives here rather than on chart parameters. */
.kt-dash-donut {
    flex: 1;
    min-height: 220px;
    width: 100%;
}

/* Reject reasons: one line each — reason, how-to-fix link, count. No progress bars; the descending
   order and the counts carry the comparison on their own. */

/* Top NAS clients */
.kt-dash-mono {
    font-family: var(--kt-font-mono);
    font-size: 12px;
    color: var(--kt-brand-blue);
}

.kt-dash-embedded .kt-dash-reject-reason {
    color: var(--kt-fg-1);
}

.kt-dash-fail-high {
    color: var(--kt-danger);
    font-weight: 600;
}

.kt-dash-fail-medium {
    color: var(--kt-warning);
    font-weight: 600;
}

.kt-dash-fail-low {
    color: var(--kt-success);
}

/* Top failing identities */
.kt-dash-identity-list {
    display: flex;
    flex-direction: column;
}

.kt-dash-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 17px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-dash-identity:last-child {
    border-bottom: 0;
}

.kt-dash-identity-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.kt-dash-identity-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-identity-detail {
    font-size: 11px;
    color: var(--kt-fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.kt-dash-badge-high {
    color: var(--kt-danger);
    background: var(--kt-danger-pale);
    border: 1px solid var(--kt-danger);
}

.kt-dash-badge-medium {
    color: var(--kt-warning);
    background: var(--kt-warning-pale);
    border: 1px solid var(--kt-warning);
}

/* Per-location health strip, shown only for multi-location subscriptions */
.kt-dash-location-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kt-dash-location-card {
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 160px;
}

.kt-dash-location-card-unreachable {
    border-color: var(--kt-danger);
    background: var(--kt-danger-pale);
}

.kt-dash-location-host {
    font-size: 11px;
    color: var(--kt-fg-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-dash-location-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--kt-fg-1);
}

.kt-dash-location-unreachable {
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-danger);
}

.kt-dash-location-sub {
    font-size: 11px;
    color: var(--kt-fg-3);
}

/* Shield instance management (KeytosUIShared ShieldInstanceComponent) */
.kt-shield-card {
    margin-left: 10px;
}

.kt-shield-card-title {
    display: inline-flex;
    font-weight: 600;
    font-size: 16pt;
    line-height: 45px;
}

.kt-shield-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin-bottom: 4px;
}

.kt-shield-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kt-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.kt-shield-field-value {
    font-size: 13px;
    color: var(--kt-fg-1);
    word-break: break-word;
}

.kt-shield-field-mono {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--kt-fg-2);
    word-break: break-all;
}

.kt-shield-section-title {
    margin-left: 10px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.kt-shield-empty {
    color: var(--kt-fg-3);
    font-size: 13px;
    margin-left: 10px;
}

/* Generic info card layout (KeytosUIShared) — shared by
   OnboardingApplicationConsentComponent and DocsHelpCardComponent. */
.kt-info-card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    padding: 40px 56px;
    max-width: 560px;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kt-info-card-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: #0F172A;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.kt-info-card-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #0F172A;
    margin: 16px 0 8px;
}

.kt-info-card-description {
    font-size: 16px;
    line-height: 1.45;
    color: #1F2937;
    margin: 0 0 24px;
    max-width: 420px;
}

.kt-info-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1F2A44;
    color: #FFFFFF !important;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: background 140ms ease;
}

.kt-info-card-action:hover {
    background: #111827;
    color: #FFFFFF !important;
}

.kt-info-card-action-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 8px;
}

/* Onboarding application consent card — bits specific to the consent flow
   (logo well, learn-more link, "Sign in with Microsoft" button). */
.onboarding-consent-logos {
    position: relative;
    width: 168px;
    height: 168px;
    margin-bottom: 24px;
}

.onboarding-consent-logo-primary {
    width: 144px;
    height: 144px;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
    object-fit: contain;
    padding: 16px;
    display: block;
}

.onboarding-consent-logo-secondary {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

.onboarding-consent-logo-warning {
    position: absolute;
    left: -38px;
    top: -20px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

.onboarding-consent-learn-more {
    color: #0A8CE5 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 24px;
}

.onboarding-consent-learn-more:hover {
    text-decoration: underline;
}

/* "Sign in with Microsoft" button — Microsoft brand spec, dark variant.
   https://learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps */
.onboarding-consent-signin {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #2F2F2F;
    color: #FFFFFF !important;
    padding: 12px;
    border: 1px solid #8C8C8C;
    border-radius: 10px;
    font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    transition: background 140ms ease;
    margin-bottom: 24px;
}

.onboarding-consent-signin:hover {
    background: #1F1F1F;
    color: #FFFFFF !important;
}

.onboarding-consent-signin-logo {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------- */
/* Network Security Onboarding wizard                                */
/* ----------------------------------------------------------------- */
/* Card chrome, type sizes and spacing come from the Figma "Set up your network security" frame
   (file aQYCo8agBMU7jXQWZtKETk, node 123:1549). Those values are the new design system's tokens,
   scoped to this page rather than :root because the rest of the product still runs on the --kt-*
   palette. As in the Shield sidebar, the type keeps the app's own font face rather than the
   mockup's Inter/Ubuntu. */
/* The tokens sit on :root rather than on the page because the step components are also used
   outside the wizard - the MDM selection below is on the network policies page too. Nothing else
   in the product consumes them; the rest of it still runs on the --kt-* palette. */
:root {
    --kt-onb-gap: 20px;
    --kt-onb-card-gap: 12px;
    --kt-onb-card-pad: 24px;
    /* The expanded card insets its rows by 12px and lets the dividers run the extra 12px out to
       the card edge, so the horizontal padding is half the vertical one. */
    --kt-onb-card-inset: 12px;
    --kt-onb-card-border: 2px;
    --kt-onb-card-radius: 12px;
    --kt-onb-card-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.04);
    --kt-onb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --kt-onb-btn-radius: 8px;
    --kt-onb-input-radius: 6px;
    --kt-onb-input-border: 1.5px;
    --kt-onb-divider: #DDE3EA;
    --kt-onb-surface: #FFFFFF;
    --kt-onb-surface-subtle: #F7F9FB;
    --kt-onb-surface-muted: #EEF1F5;
    --kt-onb-fg: #181D23;
    --kt-onb-fg-muted: #56616F;
    --kt-onb-fg-locked: #9AA6B4;
    --kt-onb-accent: #0071A2;
    --kt-onb-accent-hover: #005B83;
    /* Inline links run darker than the accent so they hold their contrast against body text. The
       design gives this one as a raw hex rather than a named token. */
    --kt-onb-link: #00577C;
    --kt-onb-danger: #9E0A17;
    --kt-onb-danger-tint: rgba(158, 10, 23, 0.06);
    /* A form control's stroke, a step darker than the divider so an empty field still reads as one
       on a white card, and the accent's hover wash for an outlined accent button. */
    --kt-onb-control-border: #CFD5DC;
    --kt-onb-accent-tint: rgba(0, 113, 162, 0.08);
    /* The design system's info badge fill: the accent at 10%. */
    --kt-onb-info-tint: rgba(0, 113, 162, 0.1);
    /* The design system's surface-brand-subtle fill, behind a count badge. */
    --kt-onb-brand-subtle: #EBF5FF;
    /* The design system's Shadow/md effect style, taken from the style rather than the exported
       drop-shadow CSS, which halves each blur. */
    --kt-onb-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
    /* The design system's error badge (707:6062): the error-background fill and the error-default
       stroke, which runs a step brighter than the danger text above. */
    --kt-onb-error-tint: #FEE9E9;
    --kt-onb-error-border: #C50F1F;
    /* The design system's Shadow/xl effect style, under a panel that slides over the page. */
    --kt-onb-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    /* The design's green for a count of what went well (789:13405), which the palette's success
       green does not match. */
    --kt-onb-success: #207F4F;
    /* The design system's success alert (707:6573): its background at 50% and a brighter stroke
       than the success text above. */
    --kt-onb-success-tint: rgba(210, 254, 226, 0.5);
    --kt-onb-success-border: #2BA166;
    /* The design system's warning badge (707:7237): its background at 50%, and a stroke brighter
       than the --kt-warning text it carries. */
    --kt-onb-warning-tint: rgba(255, 251, 235, 0.5);
    --kt-onb-warning-border: #FBBF24;
}

.network-onboarding-page {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    max-width: 2100px;
    margin: 0 auto;
    padding: 16px 24px 48px;
}

.network-onboarding-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.network-onboarding-heading-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.network-onboarding-title {
    color: var(--kt-onb-fg);
    font-size: 36px;
    line-height: 46.8px;
    font-weight: 700;
    margin: 0;
}

.network-onboarding-subtitle {
    color: var(--kt-onb-fg-muted);
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    margin: 0;
}

.network-onboarding-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* =============== Step chrome buttons =============== */

/* The step chrome (start over, learn more, next step) carries the Figma design system's sizing
   and fills. Controls inside the individual step components keep the product's Bootstrap buttons,
   so this stays a page-scoped opt-in rather than an override of .btn. */
.network-onboarding-btn {
    --kt-onb-btn-border: 1px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* As with the cards, Figma measures the 8px/16px padding from the button's outer edge and
       draws the stroke inside it, so the padding is short by the border width. */
    padding: calc(8px - var(--kt-onb-btn-border)) calc(16px - var(--kt-onb-btn-border));
    border: var(--kt-onb-btn-border) solid transparent;
    border-radius: var(--kt-onb-btn-radius);
    background: none;
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.network-onboarding-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.network-onboarding-btn-danger {
    border-color: var(--kt-onb-danger);
    color: var(--kt-onb-danger);
}

.network-onboarding-btn-danger:hover:not(:disabled) {
    background: var(--kt-onb-danger-tint);
    color: var(--kt-onb-danger);
}

/* The secondary variant is rendered as an <a> (it opens the docs), and the global `a` rule sets
   its colour with !important, so this has to match it to win — the same trick
   .kt-info-card-action already uses. */
.network-onboarding-btn-secondary {
    border-color: var(--kt-onb-fg-muted);
    color: var(--kt-onb-fg) !important;
}

/* A secondary button that sits on the grey page rather than a white card, so it carries its own
   white fill instead of showing the page through it. The hover tint below still wins. */
.network-onboarding-btn-secondary.network-onboarding-btn-filled {
    background: var(--kt-onb-surface);
}

.network-onboarding-btn-secondary:hover:not(:disabled) {
    background: var(--kt-fill-muted);
    color: var(--kt-onb-fg) !important;
}

.network-onboarding-btn-primary {
    background: var(--kt-onb-accent);
    color: #F7F9FB;
}

.network-onboarding-btn-primary:hover:not(:disabled) {
    background: var(--kt-onb-accent-hover);
    color: #F7F9FB;
}

/* The global a rule forces link blue with !important, which put blue text on this fill when the
   button is a link (the identity wizard's Accept new permissions). */
a.network-onboarding-btn-primary,
a.network-onboarding-btn-primary:hover {
    color: #F7F9FB !important;
}

/* Disabled is its own fill in the design rather than a dimmed one, so it opts out of the shared
   opacity above. */
.network-onboarding-btn-primary:disabled {
    background: var(--kt-onb-surface-muted);
    border-color: var(--kt-onb-divider);
    color: var(--kt-onb-fg-locked);
    opacity: 1;
}

/* The large size the step bodies use: the filled variant only comes in this size, the outlined
   one comes in both (step 1's "Learn more" is the small one). */
.network-onboarding-btn-primary,
.network-onboarding-btn-lg {
    padding: calc(12px - var(--kt-onb-btn-border)) calc(24px - var(--kt-onb-btn-border));
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-btn-secondary.network-onboarding-btn-lg {
    background: var(--kt-onb-surface);
}

/* The small filled button: the outlined button's size with the filled colours. */
.network-onboarding-btn-primary.network-onboarding-btn-sm {
    padding: calc(8px - var(--kt-onb-btn-border)) calc(16px - var(--kt-onb-btn-border));
    font-size: 14px;
    line-height: 19.6px;
}

.network-onboarding-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.network-onboarding-btn-icon-lg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =============== Progress strip =============== */

.network-onboarding-progress-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--kt-brand-blue), #162438);
    color: #FFFFFF;
}

.network-onboarding-progress-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 96px;
}

.network-onboarding-progress-cell-end {
    text-align: right;
}

.network-onboarding-progress-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

.network-onboarding-progress-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.network-onboarding-progress-bar {
    margin-top: 6px;
    height: 6px;
    width: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.network-onboarding-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #FFFFFF;
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.network-onboarding-progress-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.22);
}

.network-onboarding-progress-spacer {
    flex: 1 1 auto;
}

/* =============== Step cards =============== */

.network-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-card-gap);
}

.network-onboarding-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: var(--kt-onb-card-border) solid transparent;
    /* Figma measures the padding from the card's outer edge and draws the 2px selected-state
       border inside it, so the padding here is short by the border width. That keeps the content
       of every card on the same inset whether or not the card is the selected one. The header,
       body and footer add the remaining 12px themselves, which is what lets the dividers between
       them run wider than the content. */
    padding: calc(var(--kt-onb-card-pad) - var(--kt-onb-card-border)) calc(var(--kt-onb-card-inset) - var(--kt-onb-card-border));
    border-radius: var(--kt-onb-card-radius);
    box-shadow: var(--kt-onb-card-shadow);
}

.network-onboarding-card-selected {
    border-color: var(--kt-onb-accent);
}

.network-onboarding-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
    width: 100%;
    margin: 0;
    padding: 0 var(--kt-onb-card-inset);
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.network-onboarding-step-header:disabled {
    cursor: default;
}

.network-onboarding-step-identity {
    display: flex;
    align-items: center;
    gap: var(--kt-onb-gap);
    min-width: 0;
}

.network-onboarding-step-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* 28px circle centred in the same 32px slot the checkmark and lock icons occupy, so the titles of
   numbered and iconed steps line up. */
.network-onboarding-step-number {
    width: 28px;
    height: 28px;
    margin: 2px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--kt-onb-fg-muted);
    border-radius: 999px;
    color: var(--kt-onb-fg-muted);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.network-onboarding-step-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.network-onboarding-step-title {
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.network-onboarding-step-subtitle {
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 400;
}

.network-onboarding-card-locked .network-onboarding-step-number {
    border-color: var(--kt-onb-fg-locked);
    color: var(--kt-onb-fg-locked);
}

.network-onboarding-card-locked .network-onboarding-step-title,
.network-onboarding-card-locked .network-onboarding-step-subtitle {
    color: var(--kt-onb-fg-locked);
}

/* Opens the 20px gap between the step header and the divider that starts the body. It lives here
   rather than on the card so the gap does not linger while the card is collapsed. */
.network-onboarding-card-collapse {
    padding-top: var(--kt-onb-gap);
}

/* A dropdown near the bottom of an open step opens its menu past the card's edge, which
   MudCollapse's scrolling wrapper would cut off. Once the step has finished opening nothing else
   in it overflows, so the wrapper can let the menu out. */
.network-onboarding-card > .mud-collapse-entered > .mud-collapse-wrapper {
    overflow: visible;
}

.network-onboarding-step-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    padding: var(--kt-onb-gap) var(--kt-onb-card-inset) 0;
    color: var(--kt-onb-fg);
}

/* The design draws this rule 1076px wide inside a 1124px card, i.e. flush with the content rather
   than spanning the card. A border on the body would sit on its padding box and run 12px wider on
   each side, so the rule is a pseudo-element pinned to the content inset instead. */
.network-onboarding-step-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--kt-onb-card-inset);
    right: var(--kt-onb-card-inset);
    border-top: 1px solid var(--kt-onb-divider);
}

/* The legacy global .form-control nudge fights a design that pins every field to the right edge of
   its row. */
.network-onboarding-step-body .form-control {
    margin-left: 0;
    margin-right: 0;
}

.network-onboarding-step-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    /* The step body insets its content by 12px; the divider above the footer is a card-wide rule
       in the design, so the footer bleeds back out of that inset and re-applies it as padding. */
    margin-inline: calc(var(--kt-onb-card-inset) * -1);
    padding: var(--kt-onb-gap) var(--kt-onb-card-inset) 0;
    border-top: 1px solid var(--kt-onb-divider);
}

/* =============== Step 1: Entra ID application =============== */

.network-onboarding-consent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.network-onboarding-consent-title {
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.network-onboarding-consent-description {
    color: var(--kt-onb-fg-muted);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 400;
}

/* =============== Status pills and step form controls =============== */

.network-onboarding-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.network-onboarding-status-pill-done {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.network-onboarding-status-pill-skip {
    background: #F2F4F8;
    color: var(--kt-fg-3);
}

.network-onboarding-status-pill-pending {
    background: var(--kt-warning-pale);
    color: var(--kt-warning);
}

.network-onboarding-status-pill-premium {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
}

.network-onboarding-field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
}

.network-onboarding-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.network-onboarding-field-label {
    font-size: 19px;
    font-weight: 500;
    color: var(--kt-fg-2);
    margin: 0;
}

.network-onboarding-subscription-select {
    width: 100%;
    max-width: 360px;
}

.network-onboarding-toggle.mud-toggle-group {
    width: auto;
    min-width: 0;
    display: inline-flex;
    background: var(--kt-bg-subtle);
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.network-onboarding-toggle .mud-toggle-item {
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    text-transform: none;
}

/* MudBlazor paints an unselected item with `.mud-button-text.mud-button-text-primary`, which is two
   classes deep and ships in a sheet that loads after this one, so the design's grey only wins with
   the `:not()` making up the difference. */
.network-onboarding-toggle .mud-toggle-item:not(.mud-toggle-item-selected) {
    color: var(--kt-onb-fg-muted);
    font-weight: 400;
}

.network-onboarding-toggle .mud-toggle-item:not(.mud-toggle-item-selected):hover {
    background: rgba(11, 94, 216, 0.06);
    color: var(--kt-brand-blue);
}

.network-onboarding-toggle .mud-toggle-item.mud-toggle-item-selected {
    background: #FFFFFF;
    color: var(--kt-brand-blue);
    box-shadow: 0 1px 2px rgba(23, 29, 34, 0.10);
}

.network-onboarding-toggle .mud-toggle-item.mud-toggle-item-selected:hover {
    background: #FFFFFF;
    color: var(--kt-brand-blue);
}

/* The full-size tab item from the design system, which is what the step 2 questions use. The
   compact toggle above stays as it is - the network profile forms are built around that size. */
.network-onboarding-toggle-lg.mud-toggle-group {
    background: var(--kt-onb-surface-muted);
    border: 0;
    border-radius: var(--kt-onb-btn-radius);
    padding: 4px;
    gap: 8px;
}

.network-onboarding-toggle-lg .mud-toggle-item {
    padding: 8px 16px;
    font-size: 16px;
    line-height: 22.4px;
}

/* MudBlazor's own sheet loads after this one and squares every item off through
   `.mud-toggle-group > .mud-toggle-item`, so the radius has to match that shape to win. */
.network-onboarding-toggle-lg.mud-toggle-group > .mud-toggle-item {
    border-radius: 4px;
}

.network-onboarding-toggle-lg .mud-toggle-item:not(.mud-toggle-item-selected):hover {
    background: transparent;
    color: var(--kt-onb-accent);
}

.network-onboarding-toggle-lg .mud-toggle-item.mud-toggle-item-selected,
.network-onboarding-toggle-lg .mud-toggle-item.mud-toggle-item-selected:hover {
    background: var(--kt-onb-surface);
    color: var(--kt-onb-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* =============== Step 2: environment questions =============== */

/* A question and its answer control. Bootstrap's grid is not the right tool here: the design pins
   the control to the right edge at every width and gives the question whatever is left, which is a
   flex row rather than a column split. */
.network-onboarding-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
}

.network-onboarding-question-label {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

/* A question with its docs link beside it, the two sharing a baseline. */
.network-onboarding-question-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}

.network-onboarding-question-tooltip {
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    cursor: help;
}

/* The global `a` rule sets its colour with !important, so this has to match it to win. */
.network-onboarding-learn-more {
    color: var(--kt-onb-link) !important;
    font-size: 14px;
    line-height: 19.6px;
}

/* A question whose answer is a block rather than a single control - the two columns of checkboxes a
   certificate's usages are picked from. The label sits at the top of that block instead of being
   centred against its whole height. */
.network-onboarding-question-top {
    align-items: flex-start;
}

/* The usages themselves: two columns, because either list on its own would run a card's height past
   what is readable. The width is a fixed share of the row rather than "whatever is left", because
   the row is space-between and the two lists sit under labels of different lengths - left to flex
   they would each start wherever their own label ended, which is what made the two blocks read as
   misaligned. A fixed share puts both on the same edge. */
.network-onboarding-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kt-onb-gap);
    row-gap: 14px;
    flex: 0 0 62%;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .network-onboarding-usage-grid {
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The "select at least one group" note inside a grey panel. A bootstrap heading would bring its own
   margins into a panel whose row gap already spaces its children. */
.network-onboarding-panel-warning {
    color: var(--kt-danger);
    font-size: 16px;
    line-height: 22.4px;
}

/* A question whose answer is not the administrator's to change - the network policy an existing
   Wi-Fi profile belongs to, for instance. It takes the same right-hand column as the controls it
   sits among so the rows still line up. */
.network-onboarding-question-value {
    width: 336px;
    max-width: 100%;
    flex-shrink: 0;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

/* A question answered from a list rather than a toggle - the network profile a RadSec certificate
   is issued for. Same right-hand column as the toggles and read-only values it sits among. */
.network-onboarding-question-select {
    width: 336px;
    max-width: 100%;
    flex-shrink: 0;
}

/* The grey panel the design uses for a section that only applies once its question is answered:
   the bring-your-own Root CA certificates, and an MDM's API credentials. It hangs off the card's
   own 12px inset rather than the 24px the questions sit on, so as a child of the step body it
   bleeds back out of that inset. */
.network-onboarding-panel {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    padding: var(--kt-onb-card-inset);
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-card-radius);
    background: var(--kt-onb-surface-subtle);
}

.network-onboarding-field-stack > .network-onboarding-panel,
.network-onboarding-form > .network-onboarding-panel {
    margin-inline: calc(var(--kt-onb-card-inset) * -1);
}

/* A table inside a grey panel runs to the panel's own edges rather than sitting on its 12px inset,
   so it bleeds back out of it. */
.network-onboarding-panel-bleed {
    margin-inline: calc(var(--kt-onb-card-inset) * -1);
}

/* Half of a panel's width, for a picker whose few short columns would otherwise stretch across the
   whole card. A phone keeps the full width. */
@media (min-width: 900px) {
    .network-onboarding-panel-half {
        width: 50%;
    }
}

/* Everything that belongs under a subsection title inside a panel - the certificate authorities
   below "Authorized certificate authorities", the fields below "Enable MAC address bypass" - sits
   12px in from the panel's own rows. */
.network-onboarding-indent {
    padding-left: var(--kt-onb-card-inset);
}

/* A row of inputs that adds an entry to the list below it: the fields share the width and the
   button keeps its own, all bottom-aligned so the button lines up with the inputs, not their
   labels. */
.network-onboarding-entry-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.network-onboarding-entry-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

/* The narrower of the two fields in an add-an-entry row - the SAN type beside its value. Both the
   add row and the rows it has already added use it, which is what keeps their columns lined up. */
.network-onboarding-entry-field-narrow {
    flex: 0 0 30%;
}

/* The button that ends an add-an-entry row. It is given a width rather than taking its text's,
   because "Add" and "Remove" are not the same length and the flex fields beside them would each
   take whatever their own button left - so no two rows in the list would line up. */
.network-onboarding-entry-action {
    flex: 0 0 116px;
    width: 116px;
}

/* On a phone the three columns crush each other - a 30% type field lands around 80px, which fits
   neither "User Principal Name (UPN)" nor a useful part of it - so the row becomes a stack and the
   button keeps its own width at the end of it. */
@media (max-width: 767.98px) {
    .network-onboarding-entry-row {
        flex-wrap: wrap;
    }

    .network-onboarding-entry-field,
    .network-onboarding-entry-field-narrow {
        flex: 1 1 100%;
    }

    .network-onboarding-entry-action {
        flex: 0 0 auto;
    }
}

/* The shared group picker brings a bootstrap bottom margin with it, which double-spaces it inside a
   panel whose column gap already separates the rows. */
.network-onboarding-group-picker > .input-group {
    margin-bottom: 0;
}

/* =============== Entra ID group / user picker =============== */

.kt-group-search-label {
    margin-right: 5px;
}

/* The row the autocomplete sits in. It paints no background of its own: `.mud-input-outlined` is
   already white, so a white row only showed as a band around the field on any surface that is not
   itself white - the wizard's grey panels, for instance. */
.kt-group-search-field {
    flex-grow: 1;
}

.network-onboarding-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
    padding-left: var(--kt-onb-card-inset);
}

.network-onboarding-panel-labels {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.network-onboarding-panel-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: var(--kt-onb-card-inset);
}

.network-onboarding-panel-title {
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.network-onboarding-panel-description {
    max-width: 800px;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-panel-divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--kt-onb-divider);
    opacity: 1;
}

.network-onboarding-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* A question and the control that answers it on one line, the control pinned to the right edge.
   The RADIUS server step is built entirely out of these. Rows carry no spacing of their own - both
   the step body and the grey panel are flex columns with the standard gap between their children. */
.network-onboarding-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
}

.network-onboarding-inline-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.network-onboarding-inline-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--kt-onb-fg);
    margin: 0;
}

.network-onboarding-inline-hint {
    color: var(--kt-onb-fg-muted);
    font-size: 15px;
    line-height: 21px;
}

.network-onboarding-inline-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Keeps a dropdown from stretching across the row when it is the control on the right. */
.network-onboarding-inline-select {
    min-width: 200px;
}

/* A text field answering a row's question. Without a width it falls back to the browser's default
   input size, which is roughly half of the 307.5px the design draws. */
.network-onboarding-inline-field {
    width: 307.5px;
    max-width: 100%;
}

.network-onboarding-inline-field > .form-control {
    width: 100%;
}

/* The file input behind an upload button - the label-for button is the visible control, so the
   input itself must not take up a row of its own. */
.network-onboarding-file-input {
    display: none;
}

/* A filled button that sits in a row of inputs answers to the field height, not the larger size
   the filled variant is otherwise drawn at for a step footer. Placed after the size rule above so
   the single class is enough to win. */
.network-onboarding-btn-field {
    /* Bootstrap's own .form-control metrics, so the button lines up with the inputs beside it
       exactly the way the 80x43 button lines up with the 43px fields in the design. */
    padding: 6px 24px;
    min-width: 80px;
    font-size: 16px;
    line-height: 24px;
}

/* A button beside a .network-onboarding-input: the same padding, line height and border math as
   the input, so the two boxes come out the same height without either being stretched. */
.network-onboarding-btn-input {
    padding: calc(10px - var(--kt-onb-btn-border)) calc(16px - var(--kt-onb-btn-border));
    font-size: 16px;
    line-height: 22.4px;
}

/* An add-an-entry row whose controls are all single-line boxes rather than labelled fields, so
   they meet on their centre line instead of their baseline; the large toggle is a few pixels
   taller than an input, which centring splits evenly. */
.network-onboarding-entry-row-centered {
    align-items: center;
}

/* A step whose body is one <form> has to move the body's column layout onto the form, or every
   row inside it collapses against its neighbour. */
.network-onboarding-form {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
}

/* The RADIUS server step draws its footer rule inset with the content rather than spanning the
   whole card, which is what the shared footer does. */
.network-onboarding-step-footer-inset {
    margin-inline: 0;
    padding-inline: 0;
}

/* Rows that belong to one question sit closer together than the sections around them - the
   "Add IP addresses" picker and the fields it governs, or a table and the alert above it. */
.network-onboarding-inline-group {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-card-gap);
}

/* The heading that opens a section of rows, e.g. "RADIUS allowed IP addresses". */
.network-onboarding-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--kt-onb-fg);
    margin: 0;
}

/* A section heading that also collapses, e.g. "Authorized certificate thumbprints". */
.network-onboarding-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--kt-onb-gap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kt-onb-fg);
    text-align: left;
}

/* A grey panel's rows come from child components, which render straight into it, so a bootstrap
   row landing there must not add a margin on top of the panel's own gap. */
.network-onboarding-panel > .row {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .network-onboarding-inline-row {
        flex-direction: column;
        align-items: stretch;
    }

    .network-onboarding-inline-control {
        justify-content: flex-start;
    }
}

/* The upload/download control and the field it fills, stacked against the right edge of a row. */
.network-onboarding-upload-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* The file input is never shown: the design draws a button, and the label opens the picker. */
.network-onboarding-file-input {
    display: none;
}

.network-onboarding-cert-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 380px;
    max-width: 100%;
    padding: 6px 12px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-input-radius);
    background: var(--kt-onb-surface);
}

.network-onboarding-cert-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
    resize: none;
}

.network-onboarding-cert-input:focus-visible {
    outline: none;
}

.network-onboarding-cert-input::placeholder {
    color: var(--kt-onb-fg-muted);
}

.network-onboarding-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* =============== Step 2: MDM selection =============== */

.network-onboarding-mdm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* In the wizard the design puts the question on the left and the checkboxes on the right. The
   network policies page hosts the same component in a legacy card, where it keeps the stacked
   layout it renders on its own. */
.network-onboarding-field-stack > .network-onboarding-mdm {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
}

.network-onboarding-mdm-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.network-onboarding-mdm-hint {
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-mdm-selection {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

/* The selection column is sized by its checkbox grid, so a sentence of alert text inside it would
   widen the column and squeeze the question sitting to its left. Zero width keeps the alert out of
   that measurement while min-width still fills the column the grid settled on. */
.network-onboarding-mdm-alert {
    width: 0;
    min-width: 100%;
}

/* Two columns of checkboxes, shared by the MDM question and the RADIUS server locations below it. */
.network-onboarding-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 197px);
    column-gap: var(--kt-onb-gap);
    row-gap: 24px;
}

.network-onboarding-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

/* A native input rather than MudCheckBox: the design's box is a 24px 5px-radius square with a
   16px tick, and MudBlazor draws that as a material icon glyph - hiding the glyph to paint this
   one costs more than styling a checkbox of our own. The box is a span because Chrome lays an
   appearance:none checkbox out 2px wider than the width it is given; the input itself stays in the
   page (hidden, not display:none) so it keeps its label, focus and keyboard behaviour. */
.network-onboarding-checkbox-input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

.network-onboarding-checkbox-box {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 5px;
    background: var(--kt-onb-surface);
}

.network-onboarding-checkbox-input:checked + .network-onboarding-checkbox-box {
    border-color: var(--kt-onb-accent);
    background: var(--kt-onb-accent) url("../_content/KeytosUIShared/images/onboarding/onboarding-checkbox-check.svg") center / 16px 16px no-repeat;
}

.network-onboarding-checkbox-input:focus-visible + .network-onboarding-checkbox-box {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.network-onboarding-checkbox-label {
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
}

/* A checkbox another answer has taken over - an enhanced key usage while "Any purpose" is picked. It
   keeps its place in the grid so the list does not reflow, and reads as unavailable rather than
   simply unchecked. */
.network-onboarding-checkbox-locked {
    cursor: default;
}

.network-onboarding-checkbox-input:disabled:not(:checked) + .network-onboarding-checkbox-box {
    border-color: var(--kt-onb-divider);
    background: var(--kt-onb-surface-muted);
}

/* A box that is ticked and locked - the home RADIUS region, which always runs the policy. It has to
   keep its tick, so this comes after the plain disabled rule, and wears the locked grey instead of
   the accent so it still reads as something the administrator cannot turn off. */
.network-onboarding-checkbox-input:disabled:checked + .network-onboarding-checkbox-box {
    border-color: var(--kt-onb-fg-locked);
    background: var(--kt-onb-fg-locked) url("../_content/KeytosUIShared/images/onboarding/onboarding-checkbox-check.svg") center / 16px 16px no-repeat;
}

.network-onboarding-checkbox-input:disabled ~ .network-onboarding-checkbox-label {
    color: var(--kt-onb-fg-locked);
}

/* The design draws the credentials panel and the checkbox that opens it as one shape: the panel
   grows a tab up around the selected MDM, so the grey covers JamfPro rather than starting below it.
   The tab is the checkbox itself wearing the panel's fill and stroke, pulled 12px back out of its
   grid cell on the left and 12px above it so the checkbox keeps the column it shares with the ones
   above; the padding is short by the 1px border the box draws inside those 12px. It hangs one
   further pixel over the panel below so its fill covers the panel's top border and the two read as
   a single outline - hence no bottom border and no bottom-left radius of its own.
   Only an MDM we hold credentials for opens a panel, and today that is JamfPro alone, which the MDM
   list puts in the left column of the last row, beside Other MDM - that is what leaves the tab
   sitting directly on top of its panel. The one-column layout further down moves it to the end. */
.network-onboarding-checkbox-tab {
    position: relative;
    z-index: 1;
    margin: calc(var(--kt-onb-card-inset) * -1) 0 calc((var(--kt-onb-card-inset) + 1px) * -1)
        calc(var(--kt-onb-card-inset) * -1);
    padding: calc(var(--kt-onb-card-inset) - 1px) 0 calc(var(--kt-onb-card-inset) + 1px)
        var(--kt-onb-card-inset);
    border: 1px solid var(--kt-onb-divider);
    border-bottom: 0;
    border-radius: var(--kt-onb-card-radius) var(--kt-onb-card-radius) 0 0;
    background: var(--kt-onb-surface-subtle);
}

/* Wide enough for the 414px fields the design draws inside it, which lands its edges 12px outside
   the checkbox columns above - the same 12px the step body insets its content by, so it bleeds back
   out of that inset the way the other grey panels do. */
.network-onboarding-mdm-panel {
    width: 438px;
    margin-inline: calc(var(--kt-onb-card-inset) * -1);
    gap: 12px;
}

/* The panel hangs off the tab above it: 12px below the checkbox row rather than the 24px the
   selection block puts between its own children, and square in the corner the tab continues out of. */
.network-onboarding-checkbox-grid + .network-onboarding-mdm-panel {
    margin-top: -12px;
    border-top-left-radius: 0;
}

.network-onboarding-input-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.network-onboarding-input-label {
    /* Bootstrap's reboot loads after this file and gives every label an 8px bottom margin, which
       double-spaces it from the field the block's own 4px gap already separates it from. */
    margin-bottom: 0;
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 600;
}

.network-onboarding-input {
    width: 100%;
    /* As with the cards and buttons, Figma measures the 10px/16px padding from the field's outer
       edge and draws the stroke inside it, so the padding is short by the border width. Without
       this the field renders 3px taller than the 43px the design draws. */
    padding: calc(10px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-input::placeholder {
    color: var(--kt-onb-fg-locked);
}

/* An input that answers a question on the right-hand side of its row rather than filling a panel.
   The design gives it the same 336px column the toggle beside it occupies, so it must opt out of
   the full width above. */
.network-onboarding-input-fixed {
    width: 336px;
    max-width: 100%;
    flex-shrink: 0;
}

/* The wider column for a value that does not fit the 336px one - a tenant GUID set in the
   monospace face runs to about 380px before the ellipsis kicks in. */
.network-onboarding-input-wide {
    width: 480px;
    max-width: 100%;
    flex-shrink: 0;
}

/* A panel that adds entries to a list - the identity domain endings and alternative accounts -
   kept to the width of the field above it and lined up under it on the right, rather than
   stretching across the whole card. */
.network-onboarding-panel-narrow {
    width: 480px;
    max-width: 100%;
    align-self: flex-end;
}

/* =============== Step 5: connect your network =============== */

/* A numbered section of a step body - "5.1 Open the guide for your networking vendor". The step
   body separates them with its own rule; the sub-step only owns the space inside itself, which is
   tighter than the 20px between the step's own sections. */
.network-onboarding-substep {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.network-onboarding-substep-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The design sets the sub-step number in DM Mono, which we do not license, so it falls back to the
   app's own monospace stack. */
.network-onboarding-substep-number {
    font-family: var(--kt-font-mono);
    font-size: 18px;
    line-height: 25.2px;
    color: var(--kt-onb-fg-muted);
}

.network-onboarding-substep-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.network-onboarding-substep-hint {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-substep-footnote {
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
}

/* The global `a` rule sets its colour with !important, so this has to match it to win. */
.network-onboarding-substep-footnote a {
    color: var(--kt-onb-link) !important;
}

/* A grid of read-only fields, three to a row: the vendor guides, the IP addresses a location
   exposes, the allowed clients and their secrets. */
.network-onboarding-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.network-onboarding-field-grid-label {
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 600;
}

/* A value the customer copies rather than edits. It wears the same chrome as the editable input
   above so a card of them reads as one set of controls. */
.network-onboarding-readonly-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* The design draws this as a fixed 43px control with its value centred, so the height is stated
       rather than derived from padding: a <span>'s content box is the 22.4px line-height, which no
       whole-pixel padding adds up to 43 around. */
    min-height: 43px;
    padding: 0 16px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
}

/* The vendor guides are links, and the global `a` rule sets their colour with !important, so this
   has to match it to win - the same trick .network-onboarding-btn-secondary already uses. */
.network-onboarding-readonly-link {
    color: var(--kt-onb-fg) !important;
    text-decoration: none !important;
}

.network-onboarding-readonly-link:hover {
    border-color: var(--kt-onb-accent);
    color: var(--kt-onb-fg) !important;
}

.network-onboarding-readonly-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 22.4px;
}

/* Addresses and secrets are read character by character, so the design sets them in a monospace
   face. */
.network-onboarding-readonly-value-mono {
    font-family: var(--kt-font-mono);
}

.network-onboarding-field-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.network-onboarding-field-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* The server card packs its rows tighter than the grey panels elsewhere in the wizard. */
.network-onboarding-panel-tight {
    gap: 12px;
}

.network-onboarding-server-location {
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.network-onboarding-server-location-count {
    color: var(--kt-onb-fg-muted);
    font-weight: 400;
}

.network-onboarding-server-ports {
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
}

.network-onboarding-server-ports strong {
    font-weight: 600;
}

/* A section whose explanation takes the width and whose one value sits against the right edge: the
   RadSec shared secret, and the RadSec CA certificate below it. */
.network-onboarding-value-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.network-onboarding-value-row-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* The value is stated rather than offered for editing, so it is drawn on the disabled fill. */
.network-onboarding-value-stated {
    width: 280px;
    flex-shrink: 0;
    justify-content: flex-start;
    min-height: 50px;
    background: var(--kt-onb-surface-muted);
}

.network-onboarding-value-stated .network-onboarding-readonly-value {
    font-size: 18px;
    line-height: 25.2px;
}

/* The RADIUS server locations read like the MDM question in step 2: the heading on the left and the
   checkbox grid against the right edge, with no grey panel around them. */
.network-onboarding-locations {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kt-onb-gap);
}

.network-onboarding-locations-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

/* As with the MDM alert, the column is sized by its checkbox grid, so anything holding a sentence -
   the out-of-region warning and the acknowledgement under it - has to stay out of that measurement
   or it widens the column and squeezes the heading beside it. */
.network-onboarding-locations-wide {
    width: 0;
    min-width: 100%;
}

@media (max-width: 767.98px) {
    .network-onboarding-locations {
        flex-direction: column;
        gap: 12px;
    }

    .network-onboarding-locations-selection {
        width: 100%;
    }
}

/* =============== Step 6: MDM guides and Keytos Connect =============== */

/* A card inside a step body, one per MDM guide and one for Keytos Connect. Unlike the grey panels
   elsewhere in the wizard this one is a surface of its own on the card, because it collapses. */
.network-onboarding-guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-card-radius);
    background: var(--kt-onb-surface);
}

.network-onboarding-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.network-onboarding-guide-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* One asset serves both states: a chevron is symmetric about its vertical axis, so the expanded
   state is the collapsed one turned over. */
.network-onboarding-guide-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.network-onboarding-guide-chevron-expanded {
    transform: rotate(180deg);
}

.network-onboarding-guide-name {
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.network-onboarding-guide-summary {
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-guide-body {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
}

.network-onboarding-guide-footer {
    display: flex;
    justify-content: flex-end;
}

/* A heading and the one value it introduces. */
.network-onboarding-field-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The heading and its explanation on the left, the action that applies to the whole block on the
   right - "RADIUS server names" and its Copy all. */
.network-onboarding-field-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.network-onboarding-field-block-head-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* The certificate file a guide offers for download. */
.network-onboarding-file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface-subtle);
}

/* The download sits on the card's grey fill, so it takes a surface of its own to stay legible. */
.network-onboarding-file-card .network-onboarding-btn-secondary {
    background: var(--kt-onb-surface);
}

.network-onboarding-file-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.network-onboarding-file-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.network-onboarding-file-name {
    font-family: var(--kt-font-mono);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    word-break: break-all;
}

.network-onboarding-file-size {
    color: var(--kt-onb-fg-locked);
    font-size: 11px;
}

/* A long value - an enrollment URL, a static SCEP password - with its actions inside the field. */
.network-onboarding-value-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

.network-onboarding-value-field-text {
    flex: 1 1 0;
    min-width: 0;
    word-break: break-all;
}

/* A file or command shown in full for the administrator to read before saving or running it - the
   certreq INF and the OpenSSL command in the CSR instructions dialog. Set like the value fields
   around it, on the subtle fill the file card uses so it reads as content rather than an input. */
.network-onboarding-code-block {
    max-height: 320px;
    margin: 0;
    padding: 12px 16px;
    overflow: auto;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface-subtle);
    color: var(--kt-onb-fg);
    font-family: var(--kt-font-mono);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre;
}

/* A one-line command wraps rather than scrolls sideways, so all of it can be read at once. */
.network-onboarding-code-block-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.network-onboarding-instruction-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-inline-start: 20px;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

/* The global `ul, li` and `ol li::before` rules turn every list item into a blue bullet; these are
   steps taken in order, so they keep their numbers. */
.network-onboarding-instruction-list > li {
    list-style: decimal;
}

.network-onboarding-instruction-list > li::before {
    content: none;
}

/* =============== Dialogs =============== */

/* MudBlazor squares its dialogs off at 4px; the design system's surfaces take the card radius. */
.mud-dialog.network-onboarding-dialog {
    border-radius: var(--kt-onb-card-radius);
}

.network-onboarding-dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
}

.network-onboarding-dialog-footer {
    width: 100%;
    flex-wrap: wrap;
    padding: 8px 16px 16px;
}

/* The identity confirmation dialog (Figma 548:6537) draws its own header and rules instead of
   MudBlazor's title bar. It keeps the design's width until the screen is narrower. As with the
   buttons, Figma draws the stroke inside the frame and measures the padding from its outer edge,
   so the padding along the edge is short by the border width. */
.mud-dialog.identity-confirmation-dialog {
    --kt-onb-dialog-border: 1px;

    width: 559px;
    max-width: calc(100vw - 32px);
    border: var(--kt-onb-dialog-border) solid var(--kt-onb-divider);
    box-shadow: var(--kt-onb-shadow-lg);
}

/* MudBlazor's stylesheet loads after this one, so its gutterless padding needs outranking. */
.mud-dialog.identity-confirmation-dialog .mud-dialog-content.identity-confirmation-dialog-content {
    padding: 0;
}

.identity-confirmation-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(20px - var(--kt-onb-dialog-border)) calc(24px - var(--kt-onb-dialog-border)) 20px;
    border-bottom: 1px solid var(--kt-onb-divider);
}

.identity-confirmation-dialog-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 24px;
    line-height: 31.2px;
    font-weight: 500;
    font-style: normal;
}

/* The padding makes a 44px target around the 20px icon, and the negative margin takes it back
   out of the layout, so the icon stays where the design puts it. */
.identity-confirmation-dialog-dismiss {
    display: inline-flex;
    flex-shrink: 0;
    margin: -12px;
    padding: 12px;
    border: 0;
    border-radius: var(--kt-onb-btn-radius);
    background: none;
    cursor: pointer;
}

.identity-confirmation-dialog-dismiss-icon {
    display: block;
}

/* The design sets this text in plain black, which the palette has no token for, so it takes the
   primary text colour the title uses. */
.identity-confirmation-dialog-body {
    margin: 0;
    padding: 20px calc(24px - var(--kt-onb-dialog-border));
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.identity-confirmation-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px calc(24px - var(--kt-onb-dialog-border)) calc(16px - var(--kt-onb-dialog-border));
    border-top: 1px solid var(--kt-onb-divider);
}

/* =============== Network certificate form =============== */

/* The "Create Certificate" card on the network policies page. The card body is unpadded so the
   footer's rule can run edge to edge; the form carries the card's padding itself. */
.kt-netcert-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: var(--kt-onb-card-pad);
}

.kt-netcert-section {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
}

.kt-netcert-section-divided {
    padding-top: var(--kt-onb-card-pad);
    border-top: 1px solid var(--kt-onb-divider);
}

.kt-netcert-section-intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A section heading with its toggle pinned right; the toggle drops under it on a narrow screen. */
.kt-netcert-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px var(--kt-onb-gap);
}

.kt-netcert-section-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.kt-netcert-description {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 13px;
    line-height: 1.5;
}

.kt-netcert-error {
    margin: 0;
    color: var(--kt-danger);
    font-size: 13px;
    line-height: 1.5;
}

.kt-netcert-fields {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    max-width: 1160px;
}

.kt-netcert-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The label, its help icon and any "Learn More" link on one line. As a row it also keeps a tooltip
   wrapped around the label as wide as the label, rather than stretched across the field. */
.kt-netcert-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.kt-netcert-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

/* The global .form-control rule adds flex and side margins, and the bare input rule sets font-size
   with !important, so both are undone here the way .kt-localusers-input does. */
.kt-netcert-input.form-control,
.kt-netcert-textarea.form-control {
    flex: none;
    margin: 0;
    border: 1px solid var(--kt-onb-control-border);
    border-radius: 4px;
    color: var(--kt-onb-fg);
}

.kt-netcert-input.form-control {
    height: 40px;
    padding: 0 12px;
    font-size: 15px !important;
}

.kt-netcert-textarea.form-control {
    padding: 8px 12px;
}

.kt-netcert-input.form-control:focus,
.kt-netcert-textarea.form-control:focus,
.kt-netcert-combo:focus-within {
    border-color: var(--kt-onb-accent);
    box-shadow: var(--kt-focus-ring);
}

.kt-netcert-san-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* The type picker and the value share one bordered control, split by a 1px rule. */
.kt-netcert-combo {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--kt-onb-control-border);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    overflow: hidden;
}

.kt-netcert-combo > .kt-netcert-combo-select.form-select,
.kt-netcert-combo > .kt-netcert-combo-select.form-select:focus {
    flex: 0 0 180px;
    width: 180px;
    height: 100%;
    padding: 0 36px 0 12px;
    border: 0;
    border-right: 1px solid var(--kt-onb-control-border);
    border-radius: 0;
    color: var(--kt-onb-fg);
    font-size: 15px;
    box-shadow: none;
}

.kt-netcert-combo > .kt-netcert-combo-input.form-control,
.kt-netcert-combo > .kt-netcert-combo-input.form-control:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    color: var(--kt-onb-fg);
    font-size: 15px !important;
    box-shadow: none;
}

.kt-netcert-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--kt-onb-accent);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-accent);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 160ms ease;
}

.kt-netcert-btn-secondary:hover {
    background: var(--kt-onb-accent-tint);
}

.kt-netcert-btn-secondary:focus-visible {
    box-shadow: var(--kt-focus-ring);
}

.kt-netcert-table-wrap {
    border: 1px solid var(--kt-onb-divider);
    border-radius: 4px;
    overflow: hidden;
}

.kt-netcert-san-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--kt-onb-fg);
    font-size: 14px;
}

.kt-netcert-san-col-type {
    width: 140px;
}

.kt-netcert-san-col-action {
    width: 48px;
}

/* Undoes the global even-row stripe and row border, which this table replaces with its own rules. */
.kt-netcert-san-table > thead > tr,
.kt-netcert-san-table > tbody > tr {
    border-width: 0;
    background: none;
}

.kt-netcert-san-table th {
    height: 36px;
    padding: 0 12px;
    background: var(--kt-fill-muted);
    color: var(--kt-onb-fg-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
}

.kt-netcert-san-table td {
    height: 40px;
    padding: 0 12px;
    border-top: 1px solid var(--kt-border-subtle);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.kt-netcert-san-table .kt-netcert-san-action {
    padding: 0 8px;
    text-align: right;
}

.kt-netcert-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--kt-onb-fg-muted);
    transition: background-color 160ms ease, color 160ms ease;
}

.kt-netcert-icon-btn:hover {
    background: var(--kt-onb-danger-tint);
    color: var(--kt-onb-danger);
}

.kt-netcert-validity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kt-netcert-slider {
    flex: 1 1 auto;
    min-width: 0;
}

/* MudBlazor's colour rules are three classes deep and load after this sheet, so these take a
   fourth to win. */
.mud-slider.mud-slider-info.kt-netcert-slider .mud-slider-filled {
    background-color: var(--kt-onb-accent);
}

.mud-slider.mud-slider-info.kt-netcert-slider .mud-slider-input::-webkit-slider-runnable-track {
    background-color: var(--kt-onb-surface-muted);
}

.mud-slider.mud-slider-info.kt-netcert-slider .mud-slider-input::-moz-range-track {
    background-color: var(--kt-onb-surface-muted);
}

.mud-slider.mud-slider-info.kt-netcert-slider .mud-slider-input::-webkit-slider-thumb {
    background-color: var(--kt-onb-accent);
}

.mud-slider.mud-slider-info.kt-netcert-slider .mud-slider-input::-moz-range-thumb {
    background-color: var(--kt-onb-accent);
}

.kt-netcert-days {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 84px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--kt-onb-control-border);
    border-radius: 4px;
    color: var(--kt-onb-fg);
    font-size: 15px;
    white-space: nowrap;
}

/* The toggles keep the design system's segmented control, drawn a little tighter for this form. */
.kt-netcert-toggle.mud-toggle-group {
    border-radius: 6px;
}

.kt-netcert-toggle.mud-toggle-group > .mud-toggle-item {
    height: 36px;
    padding: 0 16px;
}

.kt-netcert-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px var(--kt-onb-card-pad);
    border-top: 1px solid var(--kt-onb-divider);
}

.kt-netcert-footer-btn {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}

/* On a phone the 180px type picker and the Add button would leave the value a sliver, so the
   control takes the whole row with a narrower picker and Add wraps under it. */
@media (max-width: 575.98px) {
    .kt-netcert-san-row {
        flex-wrap: wrap;
    }

    .kt-netcert-combo {
        flex-basis: 100%;
    }

    .kt-netcert-combo > .kt-netcert-combo-select.form-select,
    .kt-netcert-combo > .kt-netcert-combo-select.form-select:focus {
        flex-basis: 120px;
        width: 120px;
    }
}

/* The RADIUS server names: adjoining rows sharing their borders, striped so a long list stays
   readable. The header carries the top corners and the last row the bottom ones. */
.network-onboarding-name-table {
    display: flex;
    flex-direction: column;
}

.network-onboarding-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-bottom-width: 0;
    background: var(--kt-onb-surface);
}

.network-onboarding-name-row:nth-child(odd) {
    background: var(--kt-onb-surface-subtle);
}

.network-onboarding-name-row:first-child {
    border-radius: var(--kt-onb-btn-radius) var(--kt-onb-btn-radius) 0 0;
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.network-onboarding-name-row:last-child {
    border-bottom-width: var(--kt-onb-input-border);
    border-radius: 0 0 var(--kt-onb-btn-radius) var(--kt-onb-btn-radius);
}

.network-onboarding-name-value {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--kt-font-mono);
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
    word-break: break-all;
}

/* The self-service link and the button that copies it, the button matching the field's height. */
.network-onboarding-link-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* The stated value fills the row here rather than holding the fixed column it takes in step 5. */
.network-onboarding-value-stated-fill {
    width: auto;
    flex: 1 1 0;
}

/* =============== Button sizes used by the guides =============== */

/* The compact filled/outlined size that sits inside a field or a file card. Placed after the size
   rule above so the single class is enough to win. */
.network-onboarding-btn-md {
    padding: calc(8px - var(--kt-onb-btn-border)) calc(16px - var(--kt-onb-btn-border));
    font-size: 16px;
    line-height: 22.4px;
}

/* An action that answers to the height of the field beside it rather than to its own padding. */
.network-onboarding-btn-stretch {
    align-self: stretch;
    padding: 0 calc(32px - var(--kt-onb-btn-border));
    font-size: 18px;
    line-height: 25.2px;
}

/* The button that finishes the wizard is drawn a size up from the per-step actions. */
.network-onboarding-btn-xl {
    padding: calc(16px - var(--kt-onb-btn-border)) calc(32px - var(--kt-onb-btn-border));
    font-size: 18px;
    line-height: 25.2px;
}

.network-onboarding-btn-icon-xl {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .network-onboarding-field-grid {
        grid-template-columns: 1fr;
    }

    .network-onboarding-link-row {
        flex-direction: column;
        align-items: stretch;
    }

    .network-onboarding-value-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .network-onboarding-value-stated {
        width: auto;
    }

    .network-onboarding-page {
        padding: 14px 16px 40px;
    }

    .network-onboarding-title {
        font-size: 28px;
        line-height: 36px;
    }

    .network-onboarding-subtitle {
        font-size: 16px;
        line-height: 24px;
    }

    .network-onboarding-header {
        flex-direction: column;
        align-items: stretch;
    }

    .network-onboarding-progress-strip {
        flex-wrap: wrap;
        gap: 14px;
    }

    .network-onboarding-progress-divider {
        display: none;
    }

    .network-onboarding-progress-spacer {
        display: none;
    }

    .network-onboarding-progress-cell-end {
        text-align: left;
    }

    .network-onboarding-question,
    .network-onboarding-panel-row,
    .network-onboarding-field-stack > .network-onboarding-mdm {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .network-onboarding-upload-group {
        align-items: flex-start;
        width: 100%;
    }

    .network-onboarding-checkbox-grid {
        grid-template-columns: 1fr;
    }

    /* One column: the tab is as wide as the panel it sits on, so it bleeds out of the selection
       block on both sides instead of stopping at a column edge. */
    .network-onboarding-mdm-selection {
        width: 100%;
    }

    .network-onboarding-mdm-panel {
        width: auto;
    }

    .network-onboarding-checkbox-tab {
        margin-right: calc(var(--kt-onb-card-inset) * -1);
        padding-right: var(--kt-onb-card-inset);
    }

    /* In one column Other MDM would sit between JamfPro's tab and its panel, so an MDM that opens a
       panel goes to the end of the list here. */
    .network-onboarding-checkbox-opens-panel {
        order: 1;
    }

    /* Both top corners now belong to the tab, so the panel keeps only its bottom two. */
    .network-onboarding-checkbox-grid + .network-onboarding-mdm-panel {
        border-top-right-radius: 0;
    }
}

/* =================== File download / copy rows =================== */

.kt-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.kt-field-heading {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    margin-bottom: 8px;
}

.kt-file-card,
.kt-input-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 10px 16px;
    border: 1px solid var(--kt-border);
    border-radius: 10px;
}

.kt-file-card {
    background: var(--kt-bg-subtle);
}

.kt-input-card {
    background: #FFFFFF;
    border-color: var(--kt-border-input);
}

.kt-file-card-icon {
    font-size: 20px;
    color: var(--kt-fg-1);
    flex-shrink: 0;
}

.kt-file-card-info {
    flex: 1;
    min-width: 0;
}

.kt-file-card-name {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

/* Like .kt-file-card-name but for product names rather than file names and URLs, which are the
   only things that want the monospace treatment. */
.kt-file-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-file-card-meta {
    font-size: 12px;
    color: var(--kt-fg-3);
    margin-top: 2px;
}

.kt-input-card-value {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-input-card-value-empty {
    color: var(--kt-fg-3);
}

/* Layout only: the button keeps whatever Bootstrap variant it is given, so this must not set
   background, border-color or color or it would silently cancel the variant. */
.kt-card-action {
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 8px;
}

/* A primary card action can be an anchor, and the global `a` rule sets its colour with
   !important, so the label needs the same weight to stay readable on the primary fill. */
.kt-card-action.btn-primary {
    color: #FFFFFF !important;
}

/* Subtle variant for the secondary actions on a card, such as copy and show/hide. */
.kt-card-action.btn-outline-secondary {
    background: #FFFFFF;
    border-color: var(--kt-border-input);
    color: var(--kt-fg-1);
}

.kt-card-action.btn-outline-secondary:hover {
    background: var(--kt-bg-page);
    border-color: var(--kt-border-input);
    color: var(--kt-fg-1);
}

/* =================== MDM Setup Guide (collapsible per MDM) =================== */

.kt-mdm-guide {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    margin-bottom: 12px;
}

.kt-mdm-guide--expanded {
    border-color: var(--kt-border-input);
}

.kt-mdm-guide-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

.kt-mdm-guide-chevron {
    flex-shrink: 0;
    width: 12px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

.kt-mdm-guide-heading {
    flex: 1;
    min-width: 0;
}

.kt-mdm-guide-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-mdm-guide-summary {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-mdm-guide-body {
    background: var(--kt-paper-bg);
    border-top: 1px solid var(--kt-border);
    border-radius: 0 0 10px 10px;
    padding: 16px;
}

/* Bordered white list of reference values inside an expanded guide. */
.kt-value-list {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    background: var(--kt-paper-bg);
    overflow: hidden;
}

.kt-value-row {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-value-row:last-child {
    border-bottom: 0;
}

/* The RADIUS names row carries its own table, so it drops the label column. */
.kt-value-row--full {
    display: block;
}

.kt-value-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-value-mono {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-value-meta {
    font-size: 12px;
    color: var(--kt-fg-3);
}

.kt-value-url {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-brand-blue);
    word-break: break-all;
}

.kt-value-password {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--kt-fg-1);
}

.kt-value-empty {
    font-size: 13px;
    color: var(--kt-fg-3);
}

/* RADIUS server-name sub-table. */
.kt-radius-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}

.kt-radius-head-text {
    flex: 1;
    min-width: 0;
}

.kt-radius-helper {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-radius-table {
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    overflow: hidden;
}

.kt-radius-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-radius-row:last-child {
    border-bottom: 0;
}

.kt-radius-row-header {
    background: var(--kt-bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

/* Zebra striping skips the header, which is the first row of the table. */
.kt-radius-row:not(.kt-radius-row-header):nth-of-type(even) {
    background: var(--kt-bg-page);
}

.kt-radius-name {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    word-break: break-all;
}

/* Text-only copy affordance for the rows of a sub-table. */
.kt-copy-link {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-brand-blue);
    white-space: nowrap;
}

/* =================== Networking Equipment Step =================== */

/* Tinted "start here" band that leads the step, same role as step 4's guide list. */
.kt-start-band {
    background: var(--kt-brand-blue-pale);
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    padding: 18px;
}

.kt-step-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kt-brand-blue);
}

.kt-step-heading {
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
    margin-top: 2px;
}

.kt-step-helper {
    font-size: 13px;
    color: var(--kt-fg-2);
    margin-top: 2px;
}

.kt-vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .kt-vendor-grid {
        grid-template-columns: 1fr;
    }
}

.kt-vendor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    padding: 10px 14px;
}

.kt-vendor-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-vendor-footnote {
    font-size: 12px;
    color: var(--kt-fg-2);
    margin-top: 12px;
}

/* Read-only server reference, grouped by location. */
.kt-server-card {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    padding: 16px;
}

.kt-server-location {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.kt-server-location-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-server-location-count {
    font-size: 12px;
    color: var(--kt-fg-3);
}

.kt-server-ip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .kt-server-ip-grid {
        grid-template-columns: 1fr;
    }
}

.kt-server-ip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--kt-bg-page);
    border: 1px solid var(--kt-border);
    border-radius: 7px;
    padding: 9px 12px;
}

.kt-server-ip-value {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-server-ports {
    border-top: 1px solid var(--kt-border);
    padding-top: 12px;
    font-size: 12px;
    color: var(--kt-fg-2);
}

/* RadSec CA certificate row, shown instead of the classic RADIUS client list. */
.kt-radsec-cert {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: var(--kt-paper-bg);
    padding: 14px 16px;
    margin-top: 12px;
}

.kt-radsec-cert-text {
    flex: 1;
    min-width: 0;
}

.kt-radsec-cert-meta {
    text-align: right;
    font-size: 12px;
    color: var(--kt-fg-3);
}

/* Allowed client table for classic RADIUS. */
.kt-client-table {
    border: 1px solid var(--kt-border);
    border-radius: 8px;
    overflow: hidden;
}

.kt-client-row {
    display: grid;
    grid-template-columns: 190px 1fr 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kt-border);
}

.kt-client-row:last-child {
    border-bottom: 0;
}

.kt-client-row-header {
    background: var(--kt-bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

.kt-client-row:not(.kt-client-row-header):nth-of-type(even) {
    background: var(--kt-bg-page);
}

.kt-client-ip {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

.kt-client-secret {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border-input);
    border-radius: 7px;
    padding: 6px 10px;
}

.kt-client-secret-value {
    flex: 1;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--kt-fg-1);
    overflow: hidden;
}

.kt-client-description {
    font-size: 13px;
    color: var(--kt-fg-1);
    overflow-wrap: anywhere;
}

/* =================== Network Profile Card =================== */

.kt-np-card {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background: white;
    overflow: hidden;
}

.kt-np-card--expanded {
    border-color: var(--kt-brand-blue);
    box-shadow: 0 4px 16px rgba(11,94,216,0.08);
}

.kt-np-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.kt-np-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.kt-np-avatar--active {
    background: var(--kt-brand-blue);
    color: white;
}

.kt-np-header-info {
    flex: 1;
    min-width: 0;
}

.kt-np-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--kt-fg-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kt-np-summary {
    font-size: 17px;
    color: var(--kt-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kt-np-chevron {
    font-size: 19px;
    color: var(--kt-fg-3);
    flex-shrink: 0;
}

.kt-np-body {
    padding: 18px;
    border-top: 1px solid var(--kt-border);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kt-np-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kt-np-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--kt-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kt-np-section-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.kt-np-section-key {
    color: var(--kt-fg-3);
    min-width: 80px;
}

.kt-np-section-value {
    color: var(--kt-fg-1);
    font-weight: 500;
}

/* Footer bar inside an expanded network profile card */
.kt-np-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--kt-border);
}

/* The same bar with nothing on its left - a card that cannot be deleted carries only its save
   button, and space-between would park that button on the wrong edge. */
.kt-np-footer--end {
    justify-content: flex-end;
}

/* The header of a card that is already open and has no collapsed state to return to: the card being
   filled in for a new Wi-Fi network. It reads as a title rather than as something to click. */
.kt-np-header--static {
    cursor: default;
}

/* =================== Server Certificate Card =================== */

/* Section heading with its explanatory note pushed to the far side of the same row. */
.kt-servercert-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.kt-servercert-heading-title {
    margin: 0;
}

.kt-servercert-heading-note {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-servercert-card {
    border: 1px solid var(--kt-border-input);
    border-radius: 6px;
    background: white;
    box-shadow: var(--kt-shadow-card);
    overflow: hidden;
}

.kt-servercert-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 18px;
}

.kt-servercert-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 300px;
}

.kt-servercert-subject {
    font-size: 15px;
    font-weight: 500;
    color: var(--kt-fg-1);
}

.kt-servercert-thumbprint {
    font-family: var(--kt-font-mono);
    font-size: 12px;
    color: var(--kt-fg-2);
    overflow-wrap: anywhere;
}

.kt-servercert-hint {
    font-size: 13px;
    color: var(--kt-fg-2);
}

.kt-servercert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bootstrap's outline hover fills the button solid, which is heavier than this card wants for a
   secondary action next to a filled primary one, so it tints instead. */
.kt-servercert-button.btn-outline-primary:hover,
.kt-servercert-button.btn-outline-primary:focus {
    background: var(--kt-info-pale);
    color: var(--kt-brand-blue);
}

/* Status pill: one shape, four fills. The dot inherits the pill's text color. */
.kt-servercert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    white-space: nowrap;
}

.kt-servercert-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.kt-servercert-badge--valid {
    background: var(--kt-success-pale);
    border-color: var(--kt-success-border);
    color: var(--kt-success);
}

.kt-servercert-badge--expiring {
    background: var(--kt-warning-pale);
    border-color: var(--kt-warning-border);
    color: var(--kt-warning);
}

.kt-servercert-badge--expired {
    background: var(--kt-danger-pale);
    border-color: var(--kt-danger);
    color: var(--kt-danger);
}

.kt-servercert-badge--none {
    background: var(--kt-bg-subtle);
    border-color: var(--kt-border-input);
    color: var(--kt-fg-2);
}

/* Metadata strip: label/value pairs that wrap to a second line on narrow viewports. */
.kt-servercert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    padding: 10px 18px;
    border-top: 1px solid var(--kt-border);
    background: white;
    font-size: 13px;
    color: var(--kt-fg-1);
}

.kt-servercert-meta-label {
    color: var(--kt-fg-2);
}

.kt-servercert-banner {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 18px;
    border-top: 1px solid transparent;
    font-size: 13px;
    line-height: 1.45;
}

.kt-servercert-banner--warning {
    background: var(--kt-warning-pale);
    border-top-color: var(--kt-warning-border);
    color: var(--kt-warning);
}

.kt-servercert-banner--info {
    background: var(--kt-info-pale);
    border-top-color: var(--kt-info-border);
    color: var(--kt-info);
}

/* "Add a Wi-Fi Profile" picker: the policy dropdown grows to fill the row and the
   Create button sits flush next to it, aligned to the input (not to the helper text
   underneath). Wraps below the select on narrow viewports. */
.kt-wifi-new-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.kt-wifi-new-row__select {
    flex: 1 1 320px;
    min-width: 240px;
}

.kt-wifi-new-row__button {
    align-self: flex-start;
    margin-top: 8px;
    white-space: nowrap;
}

/* Explanatory line under a field, matching the helper text MudBlazor renders for its own inputs. */
.kt-field-helper-text {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kt-fg-3);
}

/* A read-only PEM blob shown once, such as a freshly issued certificate and its private key.
   Monospaced so the base64 body lines up, and never resized by the reader so the card keeps its
   shape next to the buttons that download the same content. */
.kt-pem-box {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    resize: none;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* Marks a local user that only exists on some of its RADIUS locations */
.kt-local-user-warning {
    color: var(--kt-warning);
}

/* Home region column in RADIUS server location grid — locked, not interactive */
.kt-region-home-wrapper {
    pointer-events: none;
    user-select: none;
}

/* HOME badge on the home region in RADIUS server location grid */
.kt-region-home-badge {
    color: var(--kt-brand-blue);
    font-size: 0.7em;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Partner billing pages (PartnerBilling / AdminPartnerBilling) */

.kt-partner-callout {
    border-left: 4px solid var(--kt-partner-owes);
    background: var(--kt-partner-owes-pale);
    border-radius: 6px;
}

.kt-partner-filter-bar {
    background: var(--kt-partner-owes-tint);
    border-radius: 16px;
}

.kt-partner-paper {
    background-color: var(--kt-paper-bg);
}

.kt-partner-summary-paper {
    background-color: var(--kt-paper-bg);
    min-height: 140px;
}

/* Keytos admin Usage & Revenue page */
.kt-usage-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--kt-fg-1);
}

.mud-paper.kt-usage-failed-tile {
    background-color: var(--kt-danger-pale);
    border: 1px solid var(--kt-danger);
    color: var(--kt-danger);
}

.mud-paper.kt-usage-failed-tile .kt-usage-kpi-value {
    color: var(--kt-danger);
}

.kt-usage-tile {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    background-color: var(--kt-paper-bg);
}

.kt-usage-table th,
.kt-usage-table td {
    white-space: nowrap;
}

.kt-usage-detail-row td {
    font-size: 0.875rem;
}

.kt-partner-summary-icon {
    width: 48px;
    height: 48px;
}

.kt-partner-helper-text {
    font-size: 0.8rem;
}

.kt-partner-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-badge-partner-owes {
    background: var(--kt-partner-owes);
    color: #fff;
}

.kt-badge-keytos-owes {
    background: var(--kt-keytos-owes);
    color: #fff;
}

/* ConnectToNetworkComponent */
.connect-card {
    max-width: 560px;
    padding: 1.75rem;
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.tab-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: #eef1f4;
    border-radius: 10px;
}

.tab {
    flex: 1 1 0;
    padding: 0.55rem 1rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #667085;
    cursor: pointer;
}

.tab.active {
    background: #ffffff;
    color: #0b5d8f;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

/* DownloadWifiProfile: full-width tab toggle with icons + Recommended badge */
.wifi-tab-toggle {
    max-width: 940px;
}

.wifi-tab-toggle .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wifi-page-subtitle {
    margin: 0.25rem 0 1.25rem;
    color: var(--kt-fg-2);
    font-size: 0.95rem;
}

.tab-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* DownloadWifiProfile: section header with rounded icon chip */
.profile-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.profile-section-icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

.profile-section-icon-muted {
    background: var(--kt-bg-subtle);
    color: var(--kt-fg-2);
}

.profile-section-desc {
    color: var(--kt-fg-2);
    font-size: 0.875rem;
    line-height: 1.5;
}

.os-badge {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.3rem 0.85rem;
    background: #e8f1fb;
    color: #1a4d7a;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
}

/* An identity-only download page has no tab toggle, so what would sit under it starts the card. */
.connect-card > :first-child {
    margin-top: 0;
}

.connect-title {
    margin: 1rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 800;
    font-style: normal !important;
    color: #111827;
}

.connect-subtitle {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #667085;
}

.join-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10px;
    background: #0a6aa3;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(10, 106, 163, 0.4);
}

.join-btn:hover {
    background: #0a5f93;
    box-shadow: 0 2px 15px rgba(10, 106, 163, 0.5);
}

.store-badge-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.store-badge {
    height: 52px;
    width: auto;
}

.secondary-btn {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 2px solid black;
    border-radius: 10px;
    background: #ffffff;
    color: black;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.secondary-btn:hover {
    background: #f9fafb;
}

/* A lighter border while focused or pressed. */
.secondary-btn:focus,
.secondary-btn:active {
    border: 1px solid #d0d5dd;
    outline: none;
}

/* Same shape as .join-btn but outlined, so it reads clearly as the secondary action. */
.join-btn-outline {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border: 2px solid #0a6aa3;
    border-radius: 10px;
    background: transparent;
    color: #0a6aa3;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

.join-btn-outline:hover {
    background: rgba(10, 106, 163, 0.06);
}

.join-btn-outline:focus,
.join-btn-outline:active {
    border: 2px solid #0a6aa3;
    outline: none;
}

/* "OR" separator with a rule on each side. */
.or-divider {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    color: #667085;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4e7ec;
}

.or-divider::before {
    margin-right: 0.75rem;
}

.or-divider::after {
    margin-left: 0.75rem;
}

/* "Other downloads" menu under the main download button. A small outlined button, so the
   alternatives read as fallbacks rather than a second choice next to the full-width main button. */
.other-downloads {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.other-downloads-toggle {
    border-color: var(--kt-onb-accent);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-accent);
}

.other-downloads-toggle:hover:not(:disabled) {
    background: var(--kt-onb-accent-tint);
}

/* The global button:focus rule strips the outline, so keyboard focus needs its own ring. */
.other-downloads-toggle:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.other-downloads-toggle .fa-chevron-down {
    font-size: 0.7em;
    transition: transform 160ms ease;
}

.other-downloads-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .other-downloads-toggle .fa-chevron-down {
        transition: none;
    }
}

/* Two classes to outrank MudBlazor's .mud-paper surface colour, so the menu matches the white card. */
.mud-popover.other-downloads-popover {
    min-width: min(300px, calc(100vw - 32px));
    border-radius: 10px;
    background-color: var(--kt-paper-bg);
}

/* Inset rounded highlights: a full-width square highlight leaves the popover's rounded corners
   unhighlighted above the first item and below the last. Item radius = popover radius - padding. */
.other-downloads-popover .mud-menu-list {
    padding: 6px;
}

.other-downloads-popover .mud-menu-item {
    border-radius: 4px;
}

.other-downloads-item-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
}

.other-downloads-item-edition {
    color: var(--kt-fg-1);
    font-weight: 600;
}

.other-downloads-item-architecture {
    color: var(--kt-fg-2);
    font-size: 0.85rem;
    font-weight: 600;
}

.other-downloads-item-detail {
    display: block;
    color: var(--kt-fg-3);
    font-size: 0.8rem;
}

/* "Skip the manual setup" banner on the Distribute Network Profile page. */
.connect-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #EBF5FF;
    color: #00577C;
    border-radius: 10px;
}

.connect-banner-icon {
    margin-top: 0.15rem;
    font-size: 1.1rem;
    color: #00577C;
}

.connect-banner strong {
    display: block;
    margin-bottom: 0.25rem;
}

.connect-banner p {
    margin-bottom: 0.75rem;
    color: #00577C;
}

.connect-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: #ffffff;
    color: #00577C;
    border: 1px solid #cfe4f7;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 87, 124, 0.12);
}

.connect-banner-btn:hover {
    color: #00577C;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 87, 124, 0.2);
}

.connect-banner-btn .fa-arrow-right {
    font-size: 0.85em;
}

.connect-subtitle code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: none;
    color: inherit;
    padding: 0;
}

.signed-in-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #667085;
}

.signed-in-status {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.signed-in-status i {
    flex: none;
    margin-top: 0.15rem;
    color: #12b76a;
}

.signed-in-email {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.link-btn {
    padding: 0;
    border: none;
    background: none;
    color: #51617b;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.signed-in-sep {
    color: #98a2b3;
}

.back-arrow {
    display: block;
    margin-top: 1.25rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #667085;
    cursor: pointer;
}

.email-input {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 1rem;
    color: #344054;
}

.email-input::placeholder {
    color: #98a2b3;
}

.email-input.input-error {
    border-color: #f04438;
    background: #fef3f2;
}

.email-input.input-error::placeholder {
    color: #d0797b !important;
}

.error-text {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #d92d20;
}

.file-name {
    margin: 0.75rem 0 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    color: #667085;
}

/* DeviceSelectorComponent */
.device-selector {
    margin-top: 1rem;
}

.device-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.6rem;
}

.device-chip {
    padding: 0.55rem 1.4rem;
    border: 1px solid #e6e8eb;
    border-radius: 999px;
    background: #ffffff;
    color: #98a2b3;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.device-chip.selected {
    border: 2px solid #0b5d8f;
    background: #e8f1fb;
    color: #0b5d8f;
    font-weight: 700;
}

.another-os-prompt {
    margin-top: 1.5rem;
    text-align: center;
    color: #667085;
    font-size: 1.15rem;
}

/* Public download page (PublicDownloadLayout + TenantDownload) */
.public-download-page {
    background: #f8f9fd;
}

.public-download-shell {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.public-college {
    display: flex;
    align-items: center;
}

.public-college-name {
    color: #162438;
    font-size: 1rem;
    font-weight: 700;
}

.public-college-logo {
    max-height: 2.5rem;
    width: auto;
}

.public-powered-by {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #98a2b3;
    font-size: 0.9rem;
}

.public-powered-by-logo-full {
    height: 1.4rem;
    width: auto;
}

.public-powered-by-logo-k {
    display: none;
    height: 1.4rem;
    width: auto;
}

@media (max-width: 640px) {
    .public-powered-by-logo-full {
        display: none;
    }

    .public-powered-by-logo-k {
        display: inline-block;
    }
}

.public-download-shell .connect-card {
    margin-left: auto;
    margin-right: auto;
}

/* Invalid-tenant message occupies the same centered slot as the connect card. */
.public-download-invalid {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ========== Page heading ========== */

/* A page title and its one-line explanation, sized well below the browser default for h1 so the
   heading does not dwarf the card titles underneath it. */
.kt-page-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kt-page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--kt-fg-1);
}

.kt-page-description {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--kt-fg-3);
    text-wrap: pretty;
}

/* ========== Data Table (MudTable) ========== */

.kt-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kt-fg-1);
}

.kt-datatable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.kt-datatable-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kt-datatable-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kt-fill-muted);
    color: var(--kt-fg-3);
    font-size: 12px;
    font-weight: 600;
}

.kt-datatable-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    max-width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    background: var(--kt-paper-bg);
}

.kt-datatable-search:focus-within {
    border-color: var(--kt-brand-blue-accent);
}

.kt-datatable-search-icon {
    flex: none;
    font-size: 13px;
    color: var(--kt-fg-4);
}

/* Borderless because the wrapper draws the border. font-size carries !important because the bare
   `input` rule near the top of this file sets it that way globally. */
.kt-datatable-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px !important;
    color: var(--kt-fg-1);
}

.kt-datatable-search-input::placeholder {
    color: var(--kt-fg-4);
}

/* Keeps MudBlazor's table structure and gives it the card treatment used elsewhere on the page: a
   tinted column-header band and footer, uppercase column labels, and a hover tint per row.
   The selectors are deliberately long. MudBlazor.min.css loads *after* style.css in index.html, and
   it styles cells through `.mud-table-root .mud-table-head .mud-table-cell` (three classes) and
   padding through `.mud-table-dense * .mud-table-row .mud-table-cell` (four), so anything shorter
   than four classes plus an element loses the cascade rather than winning it. */
/* The background is what makes the zebra visible. MudBlazor leaves the table and its rows
   transparent, so without it the odd rows show whatever is behind the table — on a page that is
   --kt-bg-page (#F8F9FD) that lands two units away from the even-row stripe (#F6F8FE) and the
   striping disappears. Painting the body white gives the global `tr:nth-child(even)` rule white to
   alternate against, the same contrast a plain `.table` gets from its white cells. */
.kt-datatable.mud-table {
    border: 1px solid var(--kt-border);
    border-radius: 10px;
    box-shadow: var(--kt-shadow-card);
    background: var(--kt-paper-bg);
}

.kt-datatable div.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    height: auto;
    min-height: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--kt-border-subtle);
}

.kt-datatable .mud-table-root .mud-table-head th.mud-table-cell {
    padding: 10px 20px;
    background: var(--kt-surface-subtle);
    border-bottom: 1px solid var(--kt-border-subtle);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kt-fg-3);
    max-width: none;
}

.kt-datatable .mud-table-root .mud-table-body td.mud-table-cell {
    padding: 14px 20px;
    border-bottom: 1px solid var(--kt-fill-muted);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--kt-fg-1);
    max-width: none;
    white-space: normal;
}

/* Zebra striping is NOT set here: the global `tr:nth-child(even)` rule near the top of this file
   already tints even rows #f6f8fe, and it reaches a MudTable's rows because MudBlazor leaves
   `.mud-table-cell` transparent. Leaving it to that rule is what keeps a MudTable in phase and in
   color with the plain `.table` markup it shares a page with — setting a background on the cell here
   would paint over the stripe instead of matching it.
   Hover therefore has to be DARKER than that stripe, not lighter, or hovering an even row would
   wash it out. */
.kt-datatable .mud-table-root .mud-table-body tr.mud-table-row:hover td.mud-table-cell {
    background: var(--kt-fill-muted);
}

.kt-datatable div.mud-toolbar.mud-toolbar-gutters.mud-table-pagination-toolbar {
    height: auto;
    min-height: 0;
    padding: 12px 20px;
    background: var(--kt-surface-subtle);
    border-top: 1px solid var(--kt-border-subtle);
    font-size: 13px;
    color: var(--kt-fg-3);
}

/* Centering an action column has to out-specify MudBlazor's own .mud-table-cell text-align, which
   loads after this file. */
.kt-datatable .mud-table-root .kt-datatable-col-center {
    text-align: center;
}

/* A password shown inside a row is a MudTextField so the reveal toggle can sit inside the field as
   an adornment. Only the value is restyled — monospace, because the whole point of revealing a
   password is being able to read it character by character.
   The selector mirrors MudBlazor's own `.mud-input > input.mud-input-root { font-family: inherit }`
   and adds this class on top, because anything shorter loses to it. */
.kt-datatable-password-field .mud-input > input.mud-input-root {
    font-family: var(--kt-font-mono);
    font-size: 13px !important;
    color: var(--kt-fg-1);
}

/* Reads as a table with nothing in it rather than as a gap under the column headers. */
.kt-datatable-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 52px 20px;
}

.kt-datatable-empty-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--kt-fill-muted);
    color: var(--kt-fg-4);
    font-size: 18px;
}

.kt-datatable-empty-icon--danger {
    background: var(--kt-danger-pale);
    color: var(--kt-danger);
}

.kt-datatable-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

.kt-datatable-empty-text {
    margin: 0;
    max-width: 380px;
    font-size: 13px;
    color: var(--kt-fg-3);
    text-align: center;
    text-wrap: pretty;
}

/* A notice that explains a configuration change rather than naming a missing thing needs more room
   than the one-line empty state. */
.kt-datatable-empty-text--wide {
    max-width: 560px;
}

.kt-datatable-muted {
    font-size: 13px;
    color: var(--kt-fg-3);
}

/* ========== Shield Local Users ========== */

/* The username field grows, the password shell grows twice as fast because its value is monospace and
   long, and the primary action keeps its width and wraps to its own line rather than squeezing them. */
.kt-localusers-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.kt-localusers-field-username {
    flex: 1 1 220px;
    min-width: 0;
}

.kt-localusers-field-password {
    flex: 2 1 300px;
    min-width: 0;
}

.kt-localusers-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kt-fg-2);
}

/* The star after a mandatory field's label. */
.kt-required {
    color: var(--kt-danger);
}

/* Two globals have to be undone here: the .form-control rule adds flex and side margins for the
   inline-diff layout it was written for, and the bare `input` rule sets font-size with !important —
   which is why matching the intended 14px needs !important of its own rather than specificity. */
.kt-localusers-input.form-control {
    height: 42px;
    flex: none;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    font-size: 14px !important;
    color: var(--kt-fg-1);
}

.kt-localusers-input.form-control:focus {
    border-color: var(--kt-brand-blue-accent);
    box-shadow: var(--kt-focus-ring);
}

.kt-localusers-input.form-control::placeholder {
    color: var(--kt-fg-4);
}

/* One control that reads as a single input but holds the password plus three actions. The value is
   pre-filled with a generated password and can be typed over, so reveal, regenerate and copy all act
   on whatever is currently in the field. */
.kt-localusers-password {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 4px;
    padding-left: 12px;
    border: 1px solid var(--kt-border-input);
    border-radius: 8px;
    background: var(--kt-paper-bg);
    overflow: hidden;
}

.kt-localusers-password:focus-within {
    border-color: var(--kt-brand-blue-accent);
    box-shadow: var(--kt-focus-ring);
}

/* Borderless because the shell draws the border. font-size carries !important because the bare
   `input` rule near the top of this file sets it that way globally. */
.kt-localusers-password-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--kt-font-mono);
    font-size: 13.5px !important;
    letter-spacing: 0.02em;
    color: var(--kt-fg-1);
    text-overflow: ellipsis;
}

.kt-localusers-ghost-button {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--kt-fg-3);
    transition: background-color 120ms ease, color 120ms ease;
}

.kt-localusers-ghost-button:hover:not(:disabled) {
    background: var(--kt-fill-muted);
    color: var(--kt-fg-1);
}

/* Copy sits flush in the shell's right edge, so it covers the border there instead of sitting inside
   it: stretching alone only reaches the content box, so the negative margins take it over the shell's
   own 1px border on three sides. The shell clips it back to the rounded corner. */
.kt-localusers-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    align-self: stretch;
    margin: -1px -1px -1px 0;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid var(--kt-border);
    background: var(--kt-bg-page);
    color: var(--kt-fg-2);
    font-size: 13px;
    font-weight: 600;
    transition: background-color 120ms ease, color 120ms ease;
}

.kt-localusers-copy-button:hover:not(:disabled) {
    background: var(--kt-fill-muted);
}

.kt-localusers-copy-button--copied {
    color: var(--kt-success);
}

.kt-localusers-add-button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Inline notice for something the administrator has to act on before leaving the form, rather than
   the gray helper text it replaced — which read as optional detail. */
.kt-localusers-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--kt-info-border);
    border-radius: 8px;
    background: var(--kt-info-pale);
    color: var(--kt-info);
    font-size: 12.5px;
    line-height: 1.5;
}

.kt-localusers-callout-icon {
    flex: none;
    margin-top: 2px;
    color: var(--kt-brand-blue);
}

.kt-localusers-callout p {
    margin: 0;
}

/* table.mud-table-root is table-layout: fixed globally, so the columns need explicit shares. */
.kt-localusers-col-user {
    width: 17%;
}

.kt-localusers-col-managed {
    width: 11%;
}

.kt-localusers-col-expiry {
    width: 12%;
}

.kt-localusers-col-password {
    width: 22%;
}

.kt-localusers-col-get {
    width: 14%;
}

.kt-localusers-col-save {
    width: 14%;
}

.kt-localusers-col-delete {
    width: 10%;
}

/* Who owns the account, as a pill: an administrator-created user can have its password read back, a
   self-service one cannot, so the distinction drives what the row offers. */
.kt-localusers-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.kt-localusers-pill--admin {
    background: var(--kt-brand-blue-pale);
    border-color: var(--kt-info-border);
    color: var(--kt-brand-blue);
}

.kt-localusers-pill--selfservice {
    background: var(--kt-fill-muted);
    border-color: var(--kt-border);
    color: var(--kt-fg-2);
}

/* ========== RADIUS Allowed IP Addresses ========== */

/* table.mud-table-root is table-layout: fixed globally, so the columns need explicit shares. */
.kt-ipaddresses-col-ip {
    width: 22%;
}

.kt-ipaddresses-col-secret {
    width: 26%;
}

.kt-ipaddresses-col-description {
    width: 22%;
}

.kt-ipaddresses-col-regenerate {
    width: 20%;
}

.kt-ipaddresses-col-delete {
    width: 10%;
}

/* =================== Shield identity settings =================== */

/* Figma file aQYCo8agBMU7jXQWZtKETk: the section list (393:3579) and the Domain section (400:1679,
   426:2910). They are drawn in the onboarding palette, so they use its tokens, and as there the
   type keeps the app's own face rather than the mockup's Inter, Ubuntu and DM Mono. */
/* Not the pt-lg-4 / px-lg-4 utilities the other pages use: MudBlazor ships classes of the same
   name that load after Bootstrap's and turn the design's 24px into 16px from 1280px up. */
.identity-settings-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 24px 0;
}

@media (max-width: 991.98px) {
    .identity-settings-page {
        padding: 8px 8px 0;
    }
}

.identity-settings-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 28px;
    line-height: 36.4px;
    font-weight: 500;
}

.identity-settings-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* As with the onboarding cards, Figma measures the 20px padding from the card's outer edge and
   draws the stroke inside it. The 12px gap is not in the design, whose text runs right up to the
   chevron; it only shows once a description wraps on a narrow screen. The design has no hover
   state either, so the card borrows the palette's subtle surface for one. */
.identity-settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: 8px;
    background: var(--kt-onb-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: background-color 160ms ease;
}

.identity-settings-card:hover {
    background: var(--kt-onb-surface-subtle);
}

.identity-settings-card:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.identity-settings-card-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
}

.identity-settings-card-title {
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.identity-settings-card-description {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-settings-card-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.identity-settings-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.identity-settings-heading {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* The global `a` rule sets its colour with !important, so this has to match it to win - the same
   trick .network-onboarding-btn-secondary uses. */
.identity-settings-back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 12px;
    color: var(--kt-onb-fg) !important;
    font-size: 20px;
    line-height: 28px;
    text-decoration: none;
}

/* MudBlazor's sheet loads after this one and takes the outline off every focused link. */
.identity-settings-back:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.identity-settings-back-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.identity-settings-heading-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.identity-settings-subtitle {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

/* The design system's large button with the small one's 16px sides, a size the onboarding step
   chrome never uses. Both classes are needed to beat .network-onboarding-btn-primary's padding. */
.network-onboarding-btn.identity-settings-header-btn {
    padding: calc(12px - var(--kt-onb-btn-border)) calc(16px - var(--kt-onb-btn-border));
    font-size: 16px;
    line-height: 22.4px;
}

/* Figma draws the divider as a line of no height, stroked 1px above where it sits, so it takes
   the last pixel of the 20px gap above it rather than adding one below. */
.identity-settings-divider {
    height: 1px;
    margin-top: -1px;
    background: var(--kt-onb-divider);
}

/* The design's 394px column for the control that answers a question, wider than the onboarding
   questions' 336px one. */
.identity-settings-control {
    width: 394px;
    max-width: 100%;
    flex-shrink: 0;
}

/* The settings fields' 12px padding, larger than the onboarding questions' fields. As there, the
   padding is short by the border width. The line height needs !important to beat the global
   `input` rule's, which would make the field 1.6px taller than the design. */
.network-onboarding-input.identity-settings-input {
    padding: calc(12px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    line-height: 22.4px !important;
}

/* The domains an administrator picks sit in the design's 634px column against the right edge,
   under the toggle they answer. */
.identity-domains {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: flex-end;
    width: 634px;
    max-width: 100%;
}

/* A grid rather than a <table>: the global `tr:nth-child(even)` stripe would fight the design's
   own, and the header's first column has to hold the checkbox column's 188px whatever the width of
   its label in the app's face. Each row draws only its top stroke, inside its 16px padding as
   Figma does, so neighbouring rows share one line. */
.identity-domains-row {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    padding: calc(16px - 1.5px) calc(12px - 1.5px) 16px;
    border: 1.5px solid var(--kt-onb-divider);
    border-bottom: 0;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

/* The design is desktop only. On a phone its 188px checkbox column would leave a domain name too
   little room to fit on one line, so the column header wraps instead. */
@media (max-width: 900px) {
    .identity-domains-row {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}

.identity-domains-header,
.identity-countries-header {
    border-radius: 8px 8px 0 0;
    background: var(--kt-onb-surface-subtle);
    font-weight: 500;
}

.identity-domains-body > .identity-domains-row:nth-child(even) {
    background: var(--kt-onb-surface-subtle);
}

.identity-domains-name {
    font-family: var(--kt-font-mono);
    overflow-wrap: anywhere;
}

/* A row that cannot be changed, such as a domain an alternative account names, turns grey whatever
   its stripe, and its tooltip says why. */
.identity-domains-body > .identity-domains-row.identity-domains-row-locked {
    background: var(--kt-onb-surface-muted);
}

/* The Default badge (694:5762). The design's padding is measured from the outside of its 1px
   stroke. */
.identity-domains-default-badge {
    display: inline-flex;
    align-items: center;
    padding: calc(2px - 1px) calc(8px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-domains-empty {
    grid-column: 1 / -1;
    color: var(--kt-onb-fg-muted);
}

.identity-domains-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(16px - 1.5px) calc(12px - 1.5px);
    border: 1.5px solid var(--kt-onb-divider);
    border-radius: 0 0 8px 8px;
    background: var(--kt-onb-surface);
}

.identity-domains-range {
    flex: 1 1 0;
    min-width: 0;
    color: var(--kt-onb-fg-locked);
    font-size: 16px;
    line-height: 22.4px;
}

.identity-domains-pager-btn,
.identity-countries-delete {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--kt-onb-fg);
}

.identity-domains-pager-btn:disabled,
.identity-countries-delete:disabled {
    color: var(--kt-onb-fg-locked);
    cursor: default;
}

.identity-domains-pager-btn:focus-visible,
.identity-countries-delete:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

/* The design only draws each pager glyph in the one colour page one needs, so the glyph is a mask
   painted with the button's colour, which gives the other state the design's other colour. */
.identity-domains-pager-icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.identity-domains-pager-icon-first,
.identity-domains-pager-icon-last {
    -webkit-mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-end.svg");
    mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-end.svg");
}

/* Figma's Arrow Next mirrored, as the design's first-page button draws it. */
.identity-domains-pager-icon-first {
    transform: scaleX(-1);
}

.identity-domains-pager-icon-previous {
    -webkit-mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-previous.svg");
    mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-previous.svg");
}

.identity-domains-pager-icon-next {
    -webkit-mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-next.svg");
    mask-image: url("../_content/KeytosUIShared/images/settings/settings-pager-next.svg");
}

/* The Smart cards section (405:2402). */
.identity-settings-question-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The dropdowns that stand in for native selects: the security key picker (694:6650), shared by
   the wizard and the Smart cards section, and the single-choice dropdown (707:6044). Each menu
   opens 8px under its field, right-aligned. */
.identity-dropdown {
    position: relative;
}

/* The key picker's 48px field. */
.identity-key-picker-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 calc(16px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 8px;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    text-align: left;
}

/* The dimming Chrome gives a disabled native select, kept from the selects these replaced. */
.identity-key-picker-field:disabled,
.network-onboarding-input.identity-dropdown-field:disabled {
    cursor: default;
    opacity: 0.7;
}

.identity-dropdown-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-dropdown-value-empty {
    color: var(--kt-onb-fg-locked);
}

.identity-key-picker-end {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

/* The design's padding is measured from the outside of its 1px stroke. */
.identity-key-picker-count {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 calc(8px - 1px);
    border: 1px solid var(--kt-onb-brand-subtle);
    border-radius: 4px;
    background: var(--kt-onb-brand-subtle);
    color: var(--kt-onb-link);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dropdown-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.identity-dropdown-chevron-open {
    transform: rotate(180deg);
}

/* Clicking anywhere outside the menu closes it. */
.identity-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
}

/* Eight 50px rows show before the list scrolls, inside the design's 5px inset (4px plus the
   stroke). The scrollbar takes the design's 6px column at the right. */
.identity-key-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 410px;
    overflow-y: auto;
    padding: calc(5px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 8px;
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-md);
}

/* MudThemeProvider sets scrollbar-width on every element, and Chrome ignores ::-webkit-scrollbar
   wherever it is set: the bar would be macOS's overlay one, hidden until the list scrolls and
   drawn over the rows instead of in the design's 6px column. The standard properties are put back
   only for the browsers that have no other way to thin the bar. */
.identity-key-picker-menu,
.identity-dropdown-options {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.identity-key-picker-menu::-webkit-scrollbar,
.identity-dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.identity-key-picker-menu::-webkit-scrollbar-thumb,
.identity-dropdown-options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--kt-onb-fg-locked);
}

@supports not selector(::-webkit-scrollbar) {
    .identity-key-picker-menu,
    .identity-dropdown-options {
        scrollbar-width: thin;
        scrollbar-color: var(--kt-onb-fg-locked) transparent;
    }
}

.identity-key-picker-option {
    flex-shrink: 0;
    gap: 8px;
    min-height: 50px;
    padding: 0 12px;
}

.identity-key-picker-option + .identity-key-picker-option {
    border-top: 1px solid var(--kt-onb-divider);
}

.identity-key-picker-option-indent {
    padding-left: 46px;
}

/* The single-choice dropdown's field keeps the size of the inputs around it, as the native select
   it replaced did: the design's 16px chevron sits 16px in from the right edge with the text 8px
   clear of it. */
.network-onboarding-input.identity-dropdown-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

/* The global button rule takes every button's focus outline away, so the field gets the ring the
   text inputs show. */
.network-onboarding-input.identity-dropdown-field:focus-visible {
    border-color: var(--kt-input-focus-border);
    box-shadow: var(--kt-input-focus-ring);
}

/* The 5px inset is 4px plus the stroke. */
.identity-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(5px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 12px;
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-lg);
}

/* As in the design, the 12px padding is measured from the outside of the 1px stroke. The design's
   rows are 47px rather than the 46.4px the padding and line height add up to, as Figma sizes the
   text box to a whole 23px. */
.identity-dropdown-search {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: calc(12px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 8px;
}

.identity-dropdown-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* The box round the input is the field, so the global input rule's border, padding and focus ring
   give way. The line height needs !important to beat that rule's. */
.identity-dropdown-search-input,
.identity-dropdown-search-input:focus {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px !important;
}

.identity-dropdown-search-input::placeholder {
    color: var(--kt-onb-fg-locked);
}

/* Eight rows show before the list scrolls under the search box, as in the key picker. */
.identity-dropdown-options {
    display: flex;
    flex-direction: column;
    max-height: calc(8 * 47px);
    overflow-y: auto;
}

.identity-dropdown-option {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    /* MudBlazor centres every button's content, which would centre a short value in its row. */
    justify-content: flex-start;
    min-height: 47px;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    text-align: left;
    overflow-wrap: anywhere;
}

/* The design highlights one row: the chosen value's until the pointer is over the list, then the
   one under the pointer. */
.identity-dropdown-option:hover,
.identity-dropdown-option:focus-visible,
.identity-dropdown-options:not(:hover) > .identity-dropdown-option-selected {
    background: var(--kt-onb-surface-subtle);
}

.identity-dropdown-empty {
    padding: 12px;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
}

/* =============== Identity logs =============== */
/* Figma file aQYCo8agBMU7jXQWZtKETk, frames 707:6289 (nothing fetched yet) and 707:6079, with the
   column filters in 707:6013, 707:6044 and 707:6062. As elsewhere, the type keeps the app's own
   faces: the design's DM Mono dates and serial numbers use the monospace stack. */
.identity-logs-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.identity-logs-filters {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.identity-logs-filter-field {
    flex: 1 1 0;
    min-width: 0;
}

/* The design's info alert. Its padding is measured from the outside of the 4px stroke. */
.identity-logs-alert {
    padding: 12px 16px 12px calc(16px - 4px);
    border-left: 4px solid var(--kt-onb-link);
    background: var(--kt-onb-info-tint);
    color: var(--kt-onb-link);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-logs-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.identity-logs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The global h2 rule sets its headings in italics, which the design's B1 title is not. */
.identity-logs-table-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    font-style: normal;
}

/* Without min-width: 0 the search's 437px is this box's minimum, so on a phone the search
   overflows instead of shrinking to its max-width: 100%. */
.identity-logs-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* The 12px padding is measured from the outside of the 1.5px stroke, as on the other fields. */
.identity-logs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 437px;
    max-width: 100%;
    min-height: 47px;
    padding: calc(12px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
}

.identity-logs-search:focus-within {
    border-color: var(--kt-input-focus-border);
    box-shadow: var(--kt-input-focus-ring);
}

.identity-logs-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The columns keep the design's widths, so the rows scroll sideways inside the page. The
   scrollbar is the design's 6px grey thumb, as in the dropdowns. */
.identity-logs-scroll {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.identity-logs-scroll::-webkit-scrollbar {
    height: 6px;
}

.identity-logs-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--kt-onb-fg-locked);
}

@supports not selector(::-webkit-scrollbar) {
    .identity-logs-scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--kt-onb-fg-locked) transparent;
    }
}

/* Each row draws only its top stroke, inside its padding as Figma does. The row under the header
   draws none. */
.identity-logs-row {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
    width: max-content;
    min-width: 100%;
    min-height: 56px;
    padding: calc(16px - 1px) 16px 16px;
    border-top: 1px solid var(--kt-onb-divider);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.identity-logs-header {
    padding: 16px;
    border-top: 0;
    border-radius: 12px;
    background: var(--kt-onb-surface-subtle);
    font-weight: 500;
}

.identity-logs-header + .identity-logs-row {
    padding-top: 16px;
    border-top: 0;
}

.identity-logs-no-match {
    color: var(--kt-onb-fg-muted);
}

.identity-logs-cell {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 24px;
    white-space: nowrap;
}

.identity-logs-col-date {
    width: 202px;
}

/* The design's 138.8px holds a YubiKey's eight digits but cuts a HID Crescendo serial
   (4790D600-3782-01506521) before the digits that tell two cards apart, so the column fits those
   22 characters of the monospace font. A longer serial is cut off and opens on hover. */
.identity-logs-col-serial {
    width: 220px;
}

.identity-logs-col-narrow {
    width: 100px;
}

.identity-logs-col-wide {
    width: 300px;
}

.identity-logs-cell-mono {
    font-family: var(--kt-font-mono);
}

/* The 12px rule between header cells sits in the middle of the 16px gap. */
.identity-logs-header .identity-logs-cell + .identity-logs-cell::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 1px;
    height: 12px;
    border-radius: 999px;
    background: var(--kt-onb-fg-locked);
    transform: translate(-50%, -50%);
}

.identity-logs-header-btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
}

.identity-logs-header-btn:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.identity-logs-sort-btn {
    flex-direction: column;
}

/* The design draws each header glyph in its resting grey only, so the glyphs are masks painted
   with a colour: sorted, the direction in use darkens and the other fades; filtered, the funnel
   takes the accent. */
.identity-logs-sort-icon,
.identity-logs-filter-icon {
    background-color: var(--kt-onb-fg-muted);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.identity-logs-sort-icon {
    width: 12px;
    height: 12px;
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
}

.identity-logs-sort-icon-up {
    -webkit-mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-sort-up.svg");
    mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-sort-up.svg");
}

.identity-logs-sort-icon-down {
    -webkit-mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-sort-down.svg");
    mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-sort-down.svg");
}

.identity-logs-sort-icon-active {
    background-color: var(--kt-onb-fg);
}

.identity-logs-sort-icon-inactive {
    background-color: var(--kt-onb-fg-locked);
}

.identity-logs-filter {
    display: inline-flex;
}

.identity-logs-filter-icon {
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-filter.svg");
    mask-image: url("../_content/KeytosUIShared/images/identity-logs/identity-logs-filter.svg");
}

/* The title and the funnel are one button, so the menu opens under the title (707:5776). */
.identity-logs-filter-btn {
    gap: 8px;
    color: inherit;
    font: inherit;
    line-height: 22.4px;
}

/* The column whose menu is open, or that is filtered, turns semibold in the accent (707:5776). */
.identity-logs-filter-active .identity-logs-header-title {
    color: var(--kt-onb-accent);
    font-weight: 600;
}

.identity-logs-filter-active .identity-logs-filter-icon {
    background-color: var(--kt-onb-accent);
}

/* A wide column's value, or a serial number, opens to its full length in the design's bordered box
   while the pointer is on it, since CSS cannot tell a cut-off value from one that fits. In the last
   row it opens upwards, since the rows below the table would hide it. */
.identity-logs-cell-text {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-logs-cell-text:not(:empty):hover {
    position: absolute;
    top: -4px;
    left: -4.8px;
    z-index: 1;
    width: 308px;
    padding: calc(4px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
}

.identity-logs-row:last-child .identity-logs-cell-text:not(:empty):hover {
    top: auto;
    bottom: -4px;
}

/* At the wide columns' 308px a serial number's box would cover the next column. */
.identity-logs-col-serial .identity-logs-cell-text:not(:empty):hover {
    width: calc(100% + 8px);
}

/* The design's Badge. Its padding is measured from the outside of the 1px stroke. */
.identity-logs-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    height: 24px;
    padding: calc(2px - 1px) calc(8px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
    white-space: nowrap;
}

.identity-logs-badge-brand {
    border-color: var(--kt-onb-brand-subtle);
    background: var(--kt-onb-brand-subtle);
    color: var(--kt-onb-link);
}

.identity-logs-badge-error {
    border-color: var(--kt-onb-error-border);
    background: var(--kt-onb-error-tint);
    color: var(--kt-onb-danger);
}

.identity-logs-badge-warning {
    border-color: var(--kt-onb-warning-border);
    background: var(--kt-onb-warning-tint);
    color: var(--kt-warning);
}

.identity-logs-badge-info {
    border-color: var(--kt-onb-link);
    background: var(--kt-onb-info-tint);
    color: var(--kt-onb-link);
}

/* The filter menus are the dropdown's menu in MudBlazor's popover layer, 8px under the funnel,
   at the design's 300px. */
.identity-logs-filter-popover {
    overflow: visible;
}

.identity-dropdown-menu.identity-logs-filter-menu {
    position: static;
    width: 300px;
    margin-top: 8px;
    font-weight: 400;
}

.identity-logs-filter-option {
    gap: 8px;
}

.identity-logs-filter-person-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.identity-logs-filter-person {
    min-width: 0;
}

.identity-logs-badge-cell {
    display: flex;
}

/* The calendar is MudBlazor's own; the menu only gives it the dropdown's frame. */
.identity-dropdown-menu.identity-logs-date-menu {
    right: auto;
    left: 0;
    width: auto;
}

/* The logs table's footer: a top stroke only, with the count's numbers darker than its "of". */
.identity-domains-footer.identity-logs-footer {
    padding: calc(16px - 1px) 16px 16px;
    border: 0;
    border-top: 1px solid var(--kt-onb-divider);
    border-radius: 0 0 8px 8px;
}

.identity-domains-range.identity-logs-range {
    color: var(--kt-onb-fg-muted);
}

.identity-logs-range-count {
    color: var(--kt-onb-fg);
}

/* 20px from the page buttons, which sit 12px apart. */
.identity-logs-rows-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.identity-logs-rows-per-page-label {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 400;
    white-space: nowrap;
}

.network-onboarding-input.identity-logs-rows-per-page-field {
    width: 69px;
    padding: calc(8px - var(--kt-onb-input-border));
    border-radius: var(--kt-onb-input-radius);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-logs-rows-per-page-field .identity-dropdown-chevron {
    width: 20px;
    height: 20px;
}

/* The footer is the bottom of the page, where a menu opening downwards runs off it and under the
   floating support button, so this one opens upwards over the table. */
.identity-logs-rows-per-page .identity-dropdown-menu {
    top: auto;
    bottom: calc(100% + 8px);
}

.identity-logs-older {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.identity-logs-older-text {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

@media (max-width: 900px) {
    .identity-logs-filters {
        flex-wrap: wrap;
    }

    .identity-logs-filter-field {
        flex-basis: 100%;
    }
}

/* =============== Security keys =============== */
/* Figma file aQYCo8agBMU7jXQWZtKETk, frame 707:6634, with the inventory details (707:6814) and the
   registration (777:12695, 789:13405) over it. The table is the identity logs table, but its
   columns share the table's width as the design draws them, so it never scrolls sideways. */
.security-keys-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.security-keys-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The tabs are shorter than the search box and sit on its bottom edge. */
.security-keys-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.security-keys-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The design's Badge at its tab size. Its padding is measured from the outside of the 1px
   stroke. */
.security-keys-tab {
    padding: calc(8px - 1px) calc(16px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 4px;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 400;
    cursor: pointer;
}

.security-keys-tab-selected {
    border-color: var(--kt-onb-link);
    background: var(--kt-onb-info-tint);
    color: var(--kt-onb-link);
    font-weight: 500;
}

.security-keys-tab:focus-visible,
.security-keys-checkbox-btn:focus-visible,
.security-keys-icon-btn:focus-visible,
.security-keys-selection-delete:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

/* The selection bar floats over the rows, so the table is what it is placed against. */
.security-keys-table {
    position: relative;
}

.security-keys-table .identity-logs-row {
    width: 100%;
}

.security-keys-col-flexible {
    flex: 1 1 0;
}

.security-keys-col-status {
    width: 100px;
}

/* A flexible column's value opens to its full length over the cell, as the identity logs' do,
   at the cell's own width rather than theirs. */
.security-keys-table .identity-logs-cell-text:not(:empty):hover {
    width: calc(100% + 8px);
}

.security-keys-cell-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-logs-row.security-keys-row-selected {
    background: var(--kt-onb-surface-subtle);
}

/* The checkbox and the actions are columns of the page's own, so neither draws the rule the
   identity logs header puts before each of its cells. */
.security-keys-check-cell {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.security-keys-action-cell {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
}

/* The header's box is a button rather than a native checkbox, so it can show the design's dash
   when only some of the page is ticked. */
.security-keys-checkbox-btn {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: none;
    cursor: pointer;
}

.security-keys-checkbox-btn:disabled {
    cursor: default;
}

.network-onboarding-checkbox-box.security-keys-checkbox-checked {
    border-color: var(--kt-onb-accent);
    background: var(--kt-onb-accent) url("../_content/KeytosUIShared/images/onboarding/onboarding-checkbox-check.svg") center / 16px 16px no-repeat;
}

.network-onboarding-checkbox-box.security-keys-checkbox-partial {
    position: relative;
    border-color: var(--kt-onb-accent);
    background: var(--kt-onb-accent);
}

.security-keys-checkbox-partial::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12.25px;
    height: 2px;
    border-radius: 1px;
    background: var(--kt-onb-surface);
    transform: translate(-50%, -50%);
}

/* The padding makes a 32px target around a 20px icon, and the negative margin takes it back out
   of the layout, so the icon stays where the design puts it. */
.security-keys-icon-btn {
    display: inline-flex;
    flex-shrink: 0;
    margin: -6px;
    padding: 6px;
    border: 0;
    border-radius: var(--kt-onb-btn-radius);
    background: none;
    cursor: pointer;
}

.security-keys-icon-btn img {
    display: block;
}

.security-keys-icon-btn:hover:not(:disabled),
.security-keys-selection-delete:hover:not(:disabled) {
    background: var(--kt-fill-muted);
}

.security-keys-icon-btn:disabled,
.security-keys-selection-delete:disabled {
    opacity: 0.65;
    cursor: default;
}

/* Centred over the rows, 3px above the table's footer. Its shadow is the design system's
   Shadow/lg effect style, not the exported drop-shadow CSS, which halves each blur. */
.security-keys-selection-bar {
    position: absolute;
    bottom: 71px;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: 12px;
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-lg);
    white-space: nowrap;
    transform: translateX(-50%);
}

.security-keys-selection-count {
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

.security-keys-selection-delete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
    cursor: pointer;
}

/* The inventory details are a dialog, for MudBlazor's overlay, focus and Escape handling, drawn
   as the design's full-height panel along the right edge. MudBlazor opens a dialog by scaling it
   up from its centre; the panel slides in from the edge instead, at the speed and easing
   MudBlazor gives a right-hand drawer. */
.mud-dialog.security-keys-details-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 864px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-xl);
    animation: security-keys-details-panel-slide-in 225ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes security-keys-details-panel-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog.security-keys-details-panel {
        animation: none;
    }
}

.mud-dialog.security-keys-details-panel .mud-dialog-content.security-keys-details-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 24px;
}

.security-keys-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

/* The global h2 rule sets its headings in italics, which the design's title is not. */
.security-keys-details-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 28px;
    line-height: 36.4px;
    font-weight: 500;
    font-style: normal;
}

.security-keys-details-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Each row draws only its top stroke, inside its padding as Figma does; the row under the header
   draws none. */
.security-keys-details-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: calc(16px - 1px) 16px 16px;
    border-top: 1px solid var(--kt-onb-divider);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.security-keys-details-header-row {
    padding: 16px;
    border-top: 0;
    border-radius: 12px;
    background: var(--kt-onb-surface-subtle);
    font-weight: 500;
}

.security-keys-details-header-row + .security-keys-details-row {
    padding-top: 16px;
    border-top: 0;
}

.security-keys-details-model {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    width: 319px;
}

.security-keys-details-count {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* The photos are not all square, and the design shows each whole in its 80px box. */
.security-keys-details-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.security-keys-details-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The registration dialog is the identity confirmation dialog at this design's width and
   spacing. */
.mud-dialog.security-keys-register-dialog {
    width: 700px;
}

.security-keys-register-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(24px - var(--kt-onb-dialog-border)) calc(24px - var(--kt-onb-dialog-border)) 24px;
    border-bottom: 1px solid var(--kt-onb-divider);
}

/* The body keeps the height it has before a file is read, so reading one does not move the
   buttons, as in the design. */
.security-keys-register-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 483px;
    padding: 20px calc(24px - var(--kt-onb-dialog-border));
}

.security-keys-register-intro {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
}

/* The type needs !important to beat the global input rule's, as the dropdown search's does. */
.network-onboarding-input.security-keys-register-input {
    padding: calc(12px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    font-size: 18px !important;
    line-height: 25.2px !important;
}

.security-keys-register-separator {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

.security-keys-register-separator::before,
.security-keys-register-separator::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--kt-onb-divider);
}

.security-keys-register-step-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.security-keys-register-step-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.security-keys-register-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-keys-register-step-title {
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
}

.security-keys-register-step-hint,
.security-keys-register-dropzone-hint {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

/* Unlike the buttons and fields, Figma draws this dashed stroke outside the 24px padding. */
.security-keys-register-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    border: 1px dashed var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    text-align: center;
}

.security-keys-register-dropzone:focus-within {
    border-color: var(--kt-onb-accent);
}

/* The file input covers the whole box, unseen, so a file dropped anywhere on it is taken and a
   click anywhere opens the picker. */
.security-keys-register-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.security-keys-register-dropzone-text {
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

.security-keys-register-dropzone-link {
    color: var(--kt-onb-accent);
}

.security-keys-register-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(16px - 1px) calc(12px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface-subtle);
}

.security-keys-register-file-details {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.security-keys-register-file-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.security-keys-register-file-name {
    overflow: hidden;
    color: var(--kt-onb-fg);
    font-family: var(--kt-font-mono);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The design sets this at Inter's normal line height, a 13px box; the app's face runs taller at
   normal, so the box is given outright. */
.security-keys-register-file-summary {
    color: var(--kt-onb-fg-muted);
    font-size: 11px;
    line-height: 13px;
}

.security-keys-register-file-detected {
    color: var(--kt-onb-success);
}

.security-keys-register-file-duplicates {
    color: var(--kt-warning);
}

.security-keys-register-file-invalid {
    color: var(--kt-onb-danger);
}

.security-keys-register-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px calc(24px - var(--kt-onb-dialog-border)) calc(24px - var(--kt-onb-dialog-border));
    border-top: 1px solid var(--kt-onb-divider);
}

/* =============== Security key requests =============== */
/* Figma file aQYCo8agBMU7jXQWZtKETk, frames 707:6573 (no open requests), 707:7031, 707:7445 and
   707:7237, with the row menus in 707:7642 and 707:7634 and the dialog in 777:13205 to 855:6863.
   The table is the identity logs table at this design's column widths, so it scrolls sideways
   like the logs; the checkboxes and the selection bar are the security keys page's. */
.security-key-requests-caught-up {
    padding: 12px 16px 12px calc(16px - 4px);
    border-left: 4px solid var(--kt-onb-success-border);
    background: var(--kt-onb-success-tint);
    color: var(--kt-onb-success);
    font-size: 14px;
    line-height: 19.6px;
}

/* The selection bar floats over the rows, so the table is what it is placed against. */
.security-key-requests-table {
    position: relative;
}

.security-key-requests-col-status {
    width: 120px;
}

.security-key-requests-col-key-type {
    width: 217px;
}

.security-key-requests-col-address {
    width: 150px;
}

/* The justification takes the row's spare width rather than leaving it as a gap before the row
   menu; the design's 163px is its least. */
.security-key-requests-col-reason {
    flex-grow: 1;
    width: 163px;
}

/* The row menu sits on the row's right edge, however wide the page makes the row. */
.security-key-requests-table .security-keys-action-cell {
    margin-inline-start: auto;
}

/* The justification opens to its full length over its own column rather than at the people
   columns' 300px, which would cover the row's menu. */
.security-key-requests-col-reason .identity-logs-cell-text:not(:empty):hover {
    width: calc(100% + 8px);
}

.security-key-requests-selection-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The design measures these buttons' padding from inside their stroke, as the security keys
   page's Delete does. */
.security-key-requests-selection-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--kt-onb-fg-muted);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.security-key-requests-selection-approve {
    border-color: var(--kt-onb-success-border);
    color: var(--kt-onb-success);
}

.security-key-requests-selection-danger {
    border-color: var(--kt-onb-error-border);
    color: var(--kt-onb-danger);
}

.security-key-requests-selection-btn:hover:not(:disabled) {
    background: var(--kt-fill-muted);
}

.security-key-requests-selection-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.security-key-requests-selection-btn:focus-visible,
.security-key-request-actions-item:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.security-key-requests-selection-btn img,
.security-key-request-actions-item img {
    display: block;
    flex-shrink: 0;
}

.security-key-request-actions {
    display: inline-flex;
}

/* The row menu, 8px under its dots. Its 4px padding is measured from inside the stroke. */
.security-key-request-actions-menu {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    padding: 4px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-md);
}

.security-key-request-actions-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 175px;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* The rule between the two actions sits on the second one's top edge, inside its 47px. */
.security-key-request-actions-item + .security-key-request-actions-item {
    padding-top: calc(12px - 1px);
    border-top: 1px solid var(--kt-onb-divider);
    border-radius: 0 0 4px 4px;
}

.security-key-request-actions-item:hover {
    background: var(--kt-fill-muted);
}

.mud-dialog.security-key-request-dialog {
    width: 700px;
}

/* The "1 of 4 requests" badge stands as tall as the title it sits on the baseline of. Its padding
   is measured from the outside of its 1px stroke. */
.security-key-request-dialog-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.security-key-request-dialog-count {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding: 0 calc(12px - 1px);
    border: 1px solid var(--kt-onb-brand-subtle);
    border-radius: 6px;
    background: var(--kt-onb-brand-subtle);
    color: var(--kt-onb-link);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
    white-space: nowrap;
}

.security-key-request-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px calc(24px - var(--kt-onb-dialog-border));
}

.security-key-request-dialog-detail {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.security-key-request-dialog-label {
    flex-shrink: 0;
    width: 203px;
    color: var(--kt-onb-fg-muted);
}

.security-key-request-dialog-value {
    flex: 1 1 0;
    min-width: 0;
    color: var(--kt-onb-fg);
    overflow-wrap: anywhere;
}

.security-key-request-dialog-text {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

/* The global link rule sets its colour with !important, so this has to as well to win. */
.security-key-request-dialog-link {
    color: var(--kt-onb-link) !important;
    text-decoration: underline;
}

.security-key-request-dialog-field {
    display: flex;
    flex-direction: column;
}

.network-onboarding-input.security-key-request-dialog-input-invalid {
    border-color: var(--kt-onb-error-border);
}

.security-key-request-dialog-error {
    min-height: 19.6px;
    color: var(--kt-onb-error-border);
    font-size: 14px;
    line-height: 19.6px;
}

/* The design's read-only field. Its padding is measured from the outside of the 1.5px stroke, as
   on the other fields. */
.security-key-request-dialog-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(12px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface-subtle);
}

.security-key-request-dialog-address-text {
    min-width: 0;
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    overflow-wrap: anywhere;
}

.identity-countries {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The design centres the question in a 43px box beside the 47px field, which puts it 7.5px down. */
.identity-countries-label {
    padding-top: 7.5px;
}

/* The white is the table's rather than each row's, so the header's grey, shared with the domains
   table's and declared earlier, is not painted over. */
.identity-countries-table {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: var(--kt-onb-surface);
}

/* As in the domains table, each row draws only its top stroke, inside its 12px padding as Figma
   does, so neighbouring rows share one line, and the last row closes the table. */
.identity-countries-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(12px - var(--kt-onb-input-border)) calc(12px - var(--kt-onb-input-border)) 12px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-bottom: 0;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.identity-countries-row:last-child {
    padding-bottom: calc(12px - var(--kt-onb-input-border));
    border-bottom: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 0 0 8px 8px;
}

.identity-countries-name {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.identity-countries-action {
    display: flex;
    flex: 0 0 50px;
    justify-content: center;
}

.identity-countries-delete-icon {
    width: 20px;
    height: 20px;
}

/* The Certificates section (405:2832). Unlike the file rows inside it, the card keeps its 12px
   padding inside its stroke, so the rows start 13px in. */
.identity-certificates-card {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    padding: 12px;
    border: 1px solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-card-radius);
    background: var(--kt-onb-surface);
}

/* Taller than the MDM guide's file card, with Figma's 16px and 12px measured from the outer edge
   and the stroke drawn inside them. */
.network-onboarding-file-card.identity-certificates-file-card {
    padding: calc(16px - 1px) calc(12px - 1px);
}

.identity-certificates-file-text {
    min-width: 0;
}

/* The design's "normal" line is Inter's 13px, and the app's face runs 18px at the same setting,
   which would make each row 4px taller than drawn. The thumbprint is one 40-character word, so on a
   phone it breaks wherever it has to. */
.identity-certificates-file-details {
    color: var(--kt-onb-fg-muted);
    font-size: 11px;
    line-height: 13px;
    overflow-wrap: anywhere;
}

/* The Alternative accounts section (410:2586, 420:3081, 420:3348). As with the onboarding cards,
   Figma measures the 24px padding from the card's outer edge and draws the 2px stroke inside it. */
.identity-alt-account-card {
    display: flex;
    flex-direction: column;
    gap: var(--kt-onb-gap);
    padding: calc(24px - var(--kt-onb-card-border));
    border: var(--kt-onb-card-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-card-radius);
    background: var(--kt-onb-surface);
}

/* The whole title row opens and closes the card, so it is one button the width of the card. */
.identity-alt-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kt-onb-fg);
    text-align: left;
    cursor: pointer;
}

.identity-alt-account-header:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.identity-alt-account-title {
    min-width: 0;
    color: var(--kt-onb-fg);
    font-size: 24px;
    line-height: 31.2px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.identity-alt-account-chevron {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Unlike .identity-settings-divider, Figma counts this line's stroke in the layout, so it takes a
   pixel of its own between the two 20px gaps. */
.identity-alt-account-divider {
    height: 1px;
    flex-shrink: 0;
    background: var(--kt-onb-divider);
}

/* The prefix or suffix toggle and its field share the 394px column, the field taking what the
   toggle leaves. */
.identity-alt-account-alias {
    display: flex;
    align-items: center;
    gap: 8px;
}

.identity-alt-account-alias > .network-onboarding-input {
    flex: 1 1 0;
    min-width: 0;
}

.identity-alt-account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* The card's text-only actions, which the design draws with neither a border nor a fill. */
.identity-alt-account-text-btn {
    color: var(--kt-onb-fg);
}

.identity-alt-account-text-btn:hover:not(:disabled) {
    background: var(--kt-fill-muted);
}

.identity-alt-account-text-btn.identity-alt-account-remove {
    color: var(--kt-onb-danger);
}

.identity-alt-account-text-btn.identity-alt-account-remove:hover:not(:disabled) {
    background: var(--kt-onb-danger-tint);
}

/* The examples under an account's set-up toggles take the size of the card's other hints, and
   wrap anywhere, since the two addresses they name can be longer than the column. */
.identity-alt-account-card .network-onboarding-inline-hint {
    font-size: 16px;
    line-height: 22.4px;
    overflow-wrap: anywhere;
}

/* Those examples can be longer than the question, which would otherwise squeeze the toggle beside
   them. */
.identity-alt-account-card .network-onboarding-toggle {
    flex-shrink: 0;
}

/* The Enrollment and recovery section (694:5769). */

/* The grey panels that put a role's list with the question it belongs to. Their rows sit 12px
   apart rather than the onboarding panels' 20px, and they stay inside the page's edges instead of
   bleeding out of a card's inset the way those do. */
.identity-enrollment-panel {
    gap: 12px;
}

.network-onboarding-field-stack > .identity-enrollment-panel {
    margin-inline: 0;
}

.identity-enrollment-bootstrap {
    display: flex;
    flex-direction: column;
}

/* The design draws the credential managers' panel across the page and around the last onboarding
   method, IT help desk, the role it lists: the panel reaches 12px above that checkbox's 25.2px
   row, and its list starts 12px below it. The checkbox is positioned so it paints over the panel
   after it. */
.identity-enrollment-panel-heading {
    position: relative;
    z-index: 1;
}

.identity-enrollment-credential-managers {
    margin-top: calc(-1 * (12px + 25.2px));
    padding-top: calc(12px + 25.2px + 12px);
}

/* Once the question wraps above its checkboxes there is no room beside it for the panel to reach
   up into, so the panel starts below the checkboxes instead. */
@media (max-width: 900px) {
    .identity-enrollment-credential-managers {
        margin-top: 12px;
        padding-top: var(--kt-onb-card-inset);
    }
}

/* The design's hint under this question is a size smaller than the wizard's. */
.identity-enrollment-unblock .network-onboarding-inline-hint {
    font-size: 14px;
    line-height: 19.6px;
}

.identity-enrollment-puk-options {
    padding-right: 12px;
}

/* The design centres the question in a 47px box beside the field, which puts it 9.5px down. */
.identity-blocked-pins-label {
    padding-top: 9.5px;
}

/* The domains table's rows with the design's PIN and delete columns. Declared after those rows,
   and their narrow-screen columns, so these columns win at every width. */
.identity-blocked-pins-row {
    grid-template-columns: minmax(0, 1fr) 50px;
    column-gap: 12px;
}

.identity-role-members {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.identity-role-members-title {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

.identity-role-members-help {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    cursor: help;
}

.identity-role-members-help:focus-visible {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

.identity-role-members-help-icon {
    width: 20px;
    height: 20px;
}

.identity-role-members-note {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

/* MudBlazor's outlined autocomplete drawn as the design's text field. Its stroke is a fieldset
   laid over the field, so unlike .network-onboarding-input the 12px/16px padding is the input's
   own. The line height needs !important to beat the global `input` rule's. */
.identity-role-members-search .mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}

.identity-role-members-search .mud-input.mud-input-outlined {
    border-radius: var(--kt-onb-btn-radius);
    background: var(--kt-onb-surface);
}

.identity-role-members-search .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: var(--kt-onb-btn-radius);
}

.identity-role-members-search .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
    padding: 12px 16px;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px !important;
}

.identity-role-members-search .mud-input > input.mud-input-root::placeholder {
    color: var(--kt-onb-fg-locked);
    opacity: 1;
}

/* The global `input:focus` rule would put its glow round the inner input, inside MudBlazor's own
   2px outline, which reads as two rings. The field gets the one ring the page's other fields show,
   on its outer edge. */
.identity-role-members-search .mud-input > input.mud-input-root:focus {
    background: transparent;
    box-shadow: none;
}

.identity-role-members-search .mud-input.mud-input-outlined:focus-within {
    box-shadow: var(--kt-input-focus-ring);
}

.identity-role-members-search .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: var(--kt-onb-input-border);
    border-color: var(--kt-input-focus-border);
}

/* A grid rather than a <table>, as with the domains table. Each row is a subgrid of the table's
   columns, so the type column takes its widest badge in every row and the rows still line up: a
   group or a service principal runs wider than the design's 50px "User" badge. The type and
   delete columns keep the design's 50px however short their headers are in the app's face. */
.identity-role-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px minmax(50px, max-content) minmax(50px, max-content);
    column-gap: 12px;
}

.identity-role-table-read-only {
    grid-template-columns: minmax(0, 1fr) 346px minmax(50px, max-content);
}

/* As in the domains table, each row draws only its top stroke, inside its padding as Figma does,
   and the last row closes the table. */
.identity-role-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: calc(16px - var(--kt-onb-input-border)) calc(12px - var(--kt-onb-input-border)) 16px;
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-bottom: 0;
    background: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.identity-role-row:nth-child(odd):not(:first-child) {
    background: var(--kt-onb-surface-subtle);
}

.identity-role-row:last-child {
    padding-bottom: calc(16px - var(--kt-onb-input-border));
    border-bottom: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 0 0 8px 8px;
}

.identity-role-header {
    border-radius: 8px 8px 0 0;
    background: var(--kt-onb-surface-subtle);
    font-weight: 500;
}

.identity-role-name {
    min-width: 0;
    font-family: var(--kt-font-mono);
    overflow-wrap: anywhere;
}

.identity-role-object-id {
    white-space: nowrap;
}

.identity-role-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 24px;
    padding: 0 calc(8px - 1px);
    border: 1px solid var(--kt-onb-link);
    border-radius: 999px;
    background: var(--kt-onb-info-tint);
    color: var(--kt-onb-link);
    font-size: 14px;
    line-height: 19.6px;
    white-space: nowrap;
}

/* The object IDs alone are wider than a phone, so they give way there. */
@media (max-width: 900px) {
    .identity-role-table {
        grid-template-columns: minmax(0, 1fr) minmax(50px, max-content) minmax(50px, max-content);
    }

    .identity-role-table-read-only {
        grid-template-columns: minmax(0, 1fr) minmax(50px, max-content);
    }

    .identity-role-object-id {
        display: none;
    }
}

/* =============== Identity dashboard =============== */

/* Figma file aQYCo8agBMU7jXQWZtKETk, frame 825:6803. The cards carry the design system's
   Shadow/md effect style. */
.identity-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.identity-dashboard-top {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.identity-dashboard-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 12px;
    background: var(--kt-onb-surface);
    box-shadow: var(--kt-onb-shadow-md);
}

.identity-dashboard-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.identity-dashboard-card-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.identity-dashboard-card-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 600;
    font-style: normal;
}

.identity-dashboard-panel-title {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

/* The design's 32px figures are 37px tall at Ubuntu's normal line height; the app's own face
   keeps that box. */
.identity-dashboard-metric {
    color: var(--kt-onb-fg);
    font-size: 32px;
    line-height: 37px;
    font-weight: 500;
}

.identity-dashboard-muted {
    color: var(--kt-onb-fg-muted);
}

.identity-dashboard-success {
    color: var(--kt-onb-success);
}

.identity-dashboard-warning {
    color: var(--kt-warning);
}

.identity-dashboard-danger {
    color: var(--kt-onb-danger);
}

/* The global link rule sets its colour with !important, so this has to as well. */
.identity-dashboard-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    color: var(--kt-onb-accent) !important;
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 500;
}

.identity-dashboard-link:hover {
    text-decoration: underline;
}

.identity-dashboard-link img {
    width: 16px;
    height: 16px;
}

.identity-dashboard-more {
    padding: 4px 0;
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

/* ----- Open requests ----- */

.identity-dashboard-requests {
    flex: 1 1 0;
    min-width: 0;
}

.identity-dashboard-requests .identity-dashboard-card-summary {
    flex-shrink: 0;
}

.identity-dashboard-request-tabs {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.identity-dashboard-request-tab {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
    text-align: left;
}

/* Only the counts that are tabs can be picked; a reader's counts are plain text. */
button.identity-dashboard-request-tab {
    cursor: pointer;
}

.identity-dashboard-request-tab-selected {
    padding-bottom: 8px;
    border-bottom: 3px solid var(--kt-onb-accent);
}

.identity-dashboard-request-list {
    display: flex;
    flex-direction: column;
}

.identity-dashboard-request-rows {
    border-bottom: 1px solid var(--kt-onb-divider);
}

.identity-dashboard-request {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--kt-onb-divider);
}

.identity-dashboard-request-empty {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dashboard-request-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.identity-dashboard-request-people,
.identity-dashboard-request-model {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-dashboard-request-people {
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

.identity-dashboard-request-assignee {
    font-weight: 500;
}

.identity-dashboard-request-requester {
    color: var(--kt-onb-fg-muted);
}

.identity-dashboard-request-model {
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dashboard-request-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

/* A disabled button swallows the pointer, which would keep the tooltip around the pair from
   ever showing why. */
.identity-dashboard-request-actions .network-onboarding-btn:disabled {
    pointer-events: none;
}

/* ----- Stock ----- */

.identity-dashboard-stock {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
}

.identity-dashboard-inventory {
    gap: 12px;
}

.identity-dashboard-stock-table {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dashboard-stock-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
}

.identity-dashboard-stock-header {
    border-radius: 8px;
    background: var(--kt-onb-surface-subtle);
}

/* Every model after the first is ruled off from the one above, inside the row's 36px. */
.identity-dashboard-stock-row:nth-child(n + 3) {
    padding-top: calc(8px - 1px);
    border-top: 1px solid var(--kt-onb-divider);
}

.identity-dashboard-stock-model {
    flex: 0 0 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-dashboard-stock-spare {
    flex: 0 0 50px;
}

.identity-dashboard-stock-count {
    flex: 0 0 74px;
    white-space: nowrap;
}

.identity-dashboard-days-left {
    flex: 1 1 auto;
    gap: 12px;
}

.identity-dashboard-days-left-count {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The design's badge here is a pixel shorter than the logs' and takes the full warning fill. */
.identity-dashboard-order-soon {
    height: 23px;
    background: var(--kt-warning-pale);
}

.identity-dashboard-days-left-summary {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

/* ----- Adoption and key usage ----- */

.identity-dashboard-adoption {
    gap: 16px;
}

.identity-dashboard-adoption-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The tab item at body size, semibold once picked. */
.identity-dashboard-range-toggle .mud-toggle-item {
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dashboard-range-toggle .mud-toggle-item.mud-toggle-item-selected {
    font-weight: 600;
}

.identity-dashboard-adoption-panels {
    display: flex;
    gap: 16px;
}

/* Figma measures the 24px padding from the outside of the stroke. */
.identity-dashboard-adoption-panel {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: calc(24px - 1px);
    border: 1px solid var(--kt-onb-divider);
    border-radius: 12px;
    background: var(--kt-onb-surface);
}

.identity-dashboard-onboarded-count,
.identity-dashboard-assigned-count {
    display: flex;
    gap: 8px;
}

.identity-dashboard-onboarded-count {
    align-items: center;
}

.identity-dashboard-onboarded-change {
    font-size: 14px;
    line-height: 19.6px;
}

.identity-dashboard-assigned-count {
    align-items: baseline;
}

.identity-dashboard-assigned-change {
    font-size: 16px;
    line-height: 22.4px;
}

.identity-dashboard-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.identity-dashboard-chart-caption {
    color: var(--kt-onb-fg-muted);
    font-size: 12px;
    line-height: 15px;
}

.identity-dashboard-chart-body {
    display: grid;
    grid-template-columns: minmax(21px, max-content) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 12px;
    color: var(--kt-onb-fg-muted);
    font-size: 12px;
    line-height: 16px;
}

.identity-dashboard-chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 101px;
    white-space: nowrap;
}

/* The design hangs the top of the scale 3px above the plot and its zero 4px below it. */
.identity-dashboard-chart-scale-top {
    align-self: flex-start;
    margin-top: -3px;
}

.identity-dashboard-chart-scale-bottom {
    align-self: flex-end;
    margin-bottom: -4px;
}

.identity-dashboard-chart-plot {
    display: block;
    width: 100%;
    height: 101px;
    overflow: visible;
}

.identity-dashboard-chart-gridline {
    stroke: var(--kt-onb-divider);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.identity-dashboard-chart-bar {
    fill: var(--kt-onb-accent);
}

.identity-dashboard-chart-line,
.identity-dashboard-chart-line-end {
    fill: none;
    stroke: var(--kt-onb-accent);
    vector-effect: non-scaling-stroke;
}

.identity-dashboard-chart-line {
    stroke-width: 2px;
    stroke-linejoin: round;
}

.identity-dashboard-chart-line-end {
    stroke-width: 10.67px;
    stroke-linecap: round;
}

/* The design spreads its dates evenly; here each sits under the point or bar it names, which an
   even spread only matches when the number of values happens to divide evenly. */
.identity-dashboard-chart-axis {
    display: block;
    grid-column: 2;
    width: 100%;
    height: 20px;
    overflow: visible;
    fill: var(--kt-onb-fg-muted);
    font-size: 12px;
}

/* While another range loads, the numbers on screen are still the previous range's. */
.identity-dashboard-adoption-panels-loading {
    opacity: 0.6;
    transition: opacity 160ms ease;
}

/* The stock column keeps its table's width, so below this the requests would be squeezed. */
@media (max-width: 1319.98px) {
    .identity-dashboard-top {
        flex-direction: column;
    }
}

@media (max-width: 1099.98px) {
    .identity-dashboard-adoption-panels {
        flex-direction: column;
    }
}

/* ========== Partner Customer Settings ========== */

/* Two lines per dropdown option: the ID underneath is what tells apart customers or subscriptions
   whose names are alike. Full width so a product pill in the title can sit at the far edge. */
.kt-select-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    line-height: 1.35;
}

.kt-select-option-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.kt-select-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-select-option-meta {
    font-family: var(--kt-font-mono);
    font-size: 12px;
    color: var(--kt-fg-3);
}

/* The customer's EZRADIUS portal inside the partner portal: its own nav beside the content, the way
   the product lays it out. Below md the nav becomes a scrolling strip above the content. */
.kt-msp-portal {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* min-width: 0 lets the long subscription name ellipsize instead of widening the column. */
.kt-msp-portal-nav {
    flex: 0 0 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--kt-paper-bg);
    border: 1px solid var(--kt-border);
    border-radius: 12px;
    padding: 12px 8px;
    position: sticky;
    top: 16px;
}

.kt-msp-portal-nav-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 4px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--kt-border-subtle);
}

.kt-msp-portal-nav-product {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kt-chart-purple);
}

/* The EZRADIUS label keeps the purple above; EZCA's matches its product pill. */
.kt-msp-portal-nav-product--ezca {
    color: var(--kt-brand-blue);
}

.kt-msp-portal-nav-subscription {
    font-size: 14px;
    font-weight: 600;
    color: var(--kt-fg-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-msp-portal-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--kt-fg-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.kt-msp-portal-nav-item:hover:not(:disabled) {
    background: var(--kt-fill-muted);
    color: var(--kt-fg-1);
}

.kt-msp-portal-nav-item:focus-visible {
    outline: none;
    box-shadow: var(--kt-focus-ring);
}

.kt-msp-portal-nav-item--active,
.kt-msp-portal-nav-item--active:hover:not(:disabled) {
    background: var(--kt-brand-blue-pale);
    color: var(--kt-brand-blue);
}

.kt-msp-portal-nav-item:disabled {
    color: var(--kt-fg-4);
    cursor: default;
}

/* Qualified by the item: Font Awesome loads after this file and its own .fas rules would win. */
.kt-msp-portal-nav-item .kt-msp-portal-nav-icon {
    width: 16px;
    text-align: center;
}

.kt-msp-portal-nav-soon {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--kt-fill-muted);
    color: var(--kt-fg-3);
    font-size: 10px;
    font-weight: 500;
}

.kt-msp-portal-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .kt-msp-portal {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .kt-msp-portal-nav {
        flex: none;
        flex-direction: row;
        position: static;
        overflow-x: auto;
        padding: 6px;
    }

    .kt-msp-portal-nav-header {
        display: none;
    }

    .kt-msp-portal-nav-item {
        width: auto;
    }
}

/* ----------------------------------------------------------------- */
/* EZCA: Certificates allowed to enroll with EST                     */
/* ----------------------------------------------------------------- */
/* From the Figma "For-Kabir-10.27" frames (file 3rZMeTg240Hy28F1w5DtzR, nodes 1:3874, 1:4446,
   1:4600 and 1:4754). They are drawn in the same design system as the network onboarding wizard, so
   the colours are its --kt-onb-* tokens, and as there the type keeps the app's own font rather than
   the mockup's Inter. Figma draws every stroke inside the box and measures padding from the outer
   edge, so each padding below is the design's value less the border width. The heading and the
   table use the CA page's own classes, so they match the IP allow list above them. */
.kt-est-section {
    --kt-est-field-height: calc(22.4px + 24px);

    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 1rem;
}

.kt-est-description {
    margin: 0;
    color: var(--kt-onb-fg-muted);
    font-size: 14px;
    line-height: 19.6px;
}

.kt-est-add-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kt-est-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.kt-est-add-row-upload {
    align-items: center;
}

.kt-est-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 414px;
    max-width: 100%;
}

/* The "or" between the EZCA CA picker and the upload beside it. */
.kt-est-or {
    color: var(--kt-onb-fg-muted);
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

.kt-est-nickname-field {
    width: 241px;
    max-width: 100%;
}

.kt-est-label {
    margin: 0;
    color: var(--kt-onb-fg);
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 600;
}

/* Bootstrap loads after style.css, so each control rule pairs its class with Bootstrap's to win. */
.form-select.kt-est-select {
    height: var(--kt-est-field-height);
    padding: calc(12px - var(--kt-onb-input-border)) calc(16px + 16px + 8px - var(--kt-onb-input-border))
        calc(12px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 8px;
    background-color: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px;
    line-height: 22.4px;
}

/* The unpicked "Select an EZCA CA" placeholder wears the design's placeholder grey; the options in the open
   list keep the normal text colour. */
.form-select.kt-est-select.kt-est-select-placeholder {
    color: var(--kt-onb-fg-locked);
}

.form-select.kt-est-select option:not(:disabled) {
    color: var(--kt-onb-fg);
}

/* The global .form-control rule adds flex and side margins, input:focus adds a right margin, and the
   bare input rule sets font-size and line-height with !important, so all of them are undone here. */
.form-control.kt-est-input,
.form-control.kt-est-input:focus {
    flex: none;
    width: 100%;
    height: var(--kt-est-field-height);
    margin: 0;
    padding: calc(12px - var(--kt-onb-input-border)) calc(16px - var(--kt-onb-input-border));
    border: var(--kt-onb-input-border) solid var(--kt-onb-divider);
    border-radius: 8px;
    background-color: var(--kt-onb-surface);
    color: var(--kt-onb-fg);
    font-size: 16px !important;
    line-height: 22.4px !important;
}

.form-control.kt-est-input::placeholder {
    color: var(--kt-onb-fg-locked);
}

.form-select.kt-est-select:focus,
.form-control.kt-est-input:focus {
    border-color: var(--kt-onb-accent);
    box-shadow: var(--kt-focus-ring);
}

/* The product's Bootstrap buttons, stretched to the height of the fields beside them. The upload
   button is the label of a hidden file input, so the global label margin is undone too. Paired
   with .btn because Bootstrap loads after style.css. */
.btn.kt-est-add-btn {
    display: inline-flex;
    align-items: center;
    height: var(--kt-est-field-height);
    margin: 0;
}

/* The file input stays focusable (visually hidden, not display:none) so the upload can be reached
   with the keyboard; its label shows the focus instead. */
.kt-est-file-input:focus-visible + .btn.kt-est-add-btn {
    outline: 2px solid var(--kt-onb-accent);
    outline-offset: 2px;
}

/* MudCheckBox draws its box as a <label>, and the global label rule's bottom margin would lift
   "Check CRL" above the middle-aligned text in the rest of the row. */
.kt-est-revocation-cell .mud-checkbox {
    margin: 0;
}