@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);
    --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;
    border: 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: #80bdff;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.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;
}

.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;
}

.mud-slider > input {
    border: 0 !important;
    padding: 0;

}

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

textarea:focus {
    border-color: #80bdff;
    outline: 0;
    outline-color: initial;
    outline-style: initial;
    outline-width: 0px;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.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;
}

/* 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;
}

.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);
}

/* 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: page title and the new-dashboard toggle share one line. */
.kt-overview-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

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

/* Tinted like .checkbox-highlight but sized to its content instead of spanning the page, and pushed to
   the trailing edge so it holds the same spot whether or not the title beside it is rendered. */
.kt-preview-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 12px;
    border-radius: 8px;
    background: rgba(0, 123, 224, 0.07);
    white-space: nowrap;
}

/* 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-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);
}

.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;
}

.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;
}

/* 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);
}

.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);
}

.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 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;
}

/* 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);
}

/* 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 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("../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 + .network-onboarding-checkbox-box {
    border-color: var(--kt-onb-divider);
    background: var(--kt-onb-surface-muted);
}

.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 last in the grid - that is what leaves the tab sitting directly on top of its panel. */
.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;
}

/* =============== 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;
}

/* 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);
    }

    /* 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);
}

/* 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;
}

.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;
}

.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;
}

/* Keep the border on focus/active (global `button:focus` sets border: none). */
.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;
}

/* "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-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);
}

.kt-localusers-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%;
}