:root,
:root[data-theme="age"] {
    --background: #f4f6f8;
    --surface: #ffffff;
    --surface-raised: #fbfcfe;
    --surface-muted: #eef2f6;
    --surface-hover: #f6f8fb;
    --header-bg: rgb(255 255 255 / 0.96);
    --input-bg: #ffffff;
    --table-header: #f8fafc;
    --menu-bg: #ffffff;
    --border: #d8dee7;
    --border-strong: #b8c2cf;
    --text: #1f2933;
    --text-strong: #111827;
    --muted: #64748b;
    --muted-strong: #475569;
    --primary: #0095da;
    --primary-hover: #28429b;
    --primary-soft: #e5f5fc;
    --focus: #63c6ed;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --available-bg: #e7f5ee;
    --available-text: #17663b;
    --available-border: #acd9c2;
    --beta-bg: #e7f0fb;
    --beta-text: #225c9f;
    --beta-border: #b7d1ee;
    --development-bg: #fff4d6;
    --development-text: #7a5200;
    --development-border: #e6cb72;
    --planned-bg: #edf1f5;
    --planned-text: #475569;
    --planned-border: #cbd5e1;
    --deprecated-bg: #fdecec;
    --deprecated-text: #9f1d20;
    --deprecated-border: #efb8ba;
}

:root[data-theme="light"] {
    --background: #f4f6f8;
    --surface: #ffffff;
    --surface-raised: #fbfcfe;
    --surface-muted: #eef2f6;
    --surface-hover: #f6f8fb;
    --header-bg: rgb(255 255 255 / 0.96);
    --input-bg: #ffffff;
    --table-header: #f8fafc;
    --menu-bg: #ffffff;
    --border: #d8dee7;
    --border-strong: #b8c2cf;
    --text: #1f2933;
    --text-strong: #111827;
    --muted: #64748b;
    --muted-strong: #475569;
    --primary: #245a88;
    --primary-hover: #1b4568;
    --primary-soft: #e8f1f8;
    --focus: #7aa7d9;
}

:root[data-theme="dark"] {
    --background: #111827;
    --surface: #172033;
    --surface-raised: #1d293d;
    --surface-muted: #25324a;
    --surface-hover: #22304a;
    --header-bg: rgb(23 32 51 / 0.96);
    --input-bg: #101827;
    --table-header: #1d293d;
    --menu-bg: #172033;
    --border: #334155;
    --border-strong: #475569;
    --text: #d9e2ef;
    --text-strong: #f8fafc;
    --muted: #9aa9bd;
    --muted-strong: #cbd5e1;
    --primary: #38bdf8;
    --primary-hover: #7dd3fc;
    --primary-soft: #15364a;
    --focus: #38bdf8;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.22);
    --available-bg: #123826;
    --available-text: #9ee6bd;
    --available-border: #257b51;
    --beta-bg: #143152;
    --beta-text: #bfdbfe;
    --beta-border: #2d5f9f;
    --development-bg: #3b2d12;
    --development-text: #fde68a;
    --development-border: #8a6a21;
    --planned-bg: #25324a;
    --planned-text: #cbd5e1;
    --planned-border: #475569;
    --deprecated-bg: #441b22;
    --deprecated-text: #fecdd3;
    --deprecated-border: #9f343f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--background);
    color: var(--text);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42;
    letter-spacing: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

button:hover,
.button:hover {
    background: var(--primary-hover);
    text-decoration: none;
}

.button--secondary {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text-strong);
}

.button--secondary:hover {
    background: var(--surface-muted);
}

.button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.button-secondary {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text-strong);
}

.button-secondary:hover {
    background: var(--surface-muted);
}

.button-link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.button-link:hover {
    background: transparent;
    text-decoration: underline;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: var(--header-bg);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 10px 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
    color: var(--text);
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 31px;
    flex: 0 0 100px;
}

.brand__logo {
    display: block;
    width: 100px;
    height: 31px;
}

.brand__logo--dark {
    display: none;
}

:root[data-theme="dark"] .brand__logo--light {
    display: none;
}

:root[data-theme="dark"] .brand__logo--dark {
    display: block;
}

.brand__title,
.brand__subtitle {
    display: block;
}

.brand__title {
    color: var(--text-strong);
    font-weight: 700;
}

.brand__subtitle {
    color: var(--muted);
    font-size: 12px;
}

.top-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 280px;
}

.top-nav a {
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
}

.top-nav a:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown__button {
    min-height: auto;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.nav-dropdown__button::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 6px;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.nav-dropdown__button:hover,
.nav-dropdown:focus-within .nav-dropdown__button,
.nav-dropdown:hover .nav-dropdown__button {
    background: var(--surface-muted);
    color: var(--text-strong);
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--menu-bg);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.14);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
    display: grid;
    gap: 2px;
}

.nav-dropdown__menu a {
    display: block;
    padding: 7px 9px;
    color: var(--text);
    white-space: nowrap;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus {
    background: var(--surface-muted);
    color: var(--text-strong);
}

.nav-dropdown__divider {
    display: block;
    height: 1px;
    margin: 4px 2px;
    background: var(--border);
}

.user-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.theme-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.theme-selector label {
    display: inline;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
}

.theme-selector select {
    width: auto;
    min-width: 88px;
    min-height: 30px;
    padding: 0 28px 0 8px;
    font-size: 12px;
}

.user-menu__name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 14px 18px 22px;
}

.site-footer {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 18px 32px;
    color: var(--muted);
    font-size: 12px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.page-heading__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-heading h1,
.detail-header h1 {
    margin: 0;
    color: var(--text-strong);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.15;
}

.page-heading p,
.detail-header p {
    margin: 6px 0 0;
    color: var(--muted);
}

.filter-bar {
    position: sticky;
    top: 56px;
    z-index: 15;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

label {
    display: grid;
    gap: 4px;
    font-weight: 600;
}

label span,
legend,
dt {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
}

.field-hint {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

input,
select,
textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    box-shadow: inset 0 1px 1px rgb(15 23 42 / 0.03);
}

input,
select {
    padding: 0 10px;
}

textarea {
    padding: 8px 10px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.person-picker {
    position: relative;
    display: block;
}

.person-picker__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 25;
    overflow-y: auto;
    max-height: 240px;
    padding: 4px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--menu-bg);
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.18);
}

.person-picker__menu button {
    display: grid;
    justify-content: stretch;
    width: 100%;
    min-height: 42px;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font-weight: 500;
    text-align: left;
    white-space: normal;
    box-shadow: none;
}

.person-picker__menu button:hover,
.person-picker__menu button.is-active {
    background: var(--surface-hover);
}

.person-picker__menu strong {
    color: var(--text-strong);
    font-size: 13px;
}

.person-picker__menu span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.filter-bar label {
    min-width: 150px;
}

.filter-bar label:first-child {
    min-width: 300px;
    flex: 1;
}

.result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--muted-strong);
    font-size: 12px;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 7px 0;
    color: var(--muted-strong);
    font-size: 12px;
}

.pagination-summary,
.pagination-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pagination-size-label {
    margin-left: 4px;
    font-weight: 700;
}

.pagination-actions .action-link {
    min-height: 26px;
}

.pagination-actions .action-link.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.pagination-actions .action-link.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--muted-strong);
    font-size: 12px;
}

.active-filters__label {
    font-weight: 700;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.alert {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.alert--success {
    border-color: #b6ddc9;
    background: var(--available-bg);
    color: var(--available-text);
}

.alert--error {
    border-color: #f2b7b9;
    background: var(--deprecated-bg);
    color: var(--deprecated-text);
}

.alert--warning {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    color: var(--text);
}

.assessment-coverage-alert {
    margin: 1rem 0;
}

.login-page-shell {
    min-height: 100vh;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(390px, 0.8fr);
    min-height: 100vh;
    background: #f7f9fc;
}

.login-identity {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-height: 560px;
    padding: clamp(48px, 8vw, 128px);
    color: #ffffff;
    background:
        linear-gradient(122deg, rgb(13 36 105 / 0.98) 0%, rgb(20 59 135 / 0.94) 48%, rgb(0 149 218 / 0.8) 128%),
        #123b84;
}

.login-identity::before,
.login-identity::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.login-identity::before {
    width: min(53vw, 770px);
    aspect-ratio: 1;
    top: -28%;
    right: -29%;
    border: 1px solid rgb(255 255 255 / 0.17);
    border-radius: 50%;
    box-shadow: 0 0 0 76px rgb(255 255 255 / 0.035), 0 0 0 152px rgb(255 255 255 / 0.025);
}

.login-identity::after {
    width: 72%;
    height: 1px;
    bottom: 19%;
    left: -18%;
    background: linear-gradient(90deg, transparent, rgb(116 210 248 / 0.8), transparent);
    transform: rotate(-28deg);
}

.login-identity__grid {
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-image: linear-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.14) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(120deg, transparent 6%, #000 48%, transparent 95%);
}

.login-identity__content,
.login-identity__footer {
    position: relative;
    z-index: 1;
}

.login-identity__logo {
    display: block;
    width: clamp(150px, 17vw, 230px);
    height: auto;
}

.login-identity__rule {
    display: block;
    width: 64px;
    height: 4px;
    margin: clamp(38px, 5vw, 70px) 0 22px;
    background: #00a3e0;
}

.login-identity__eyebrow,
.login-copy__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.login-identity__eyebrow {
    color: #8cdefe;
}

.login-identity h1 {
    max-width: 670px;
    margin: 13px 0 0;
    font-size: clamp(36px, 4.2vw, 66px);
    font-weight: 650;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.login-identity__copy {
    max-width: 480px;
    margin: 27px 0 0;
    color: rgb(255 255 255 / 0.76);
    font-size: 16px;
    line-height: 1.65;
}

.login-identity__footer {
    position: absolute;
    bottom: 34px;
    margin: 0;
    color: rgb(255 255 255 / 0.56);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-access {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 56px clamp(32px, 5vw, 96px) 34px;
    background: #ffffff;
}

.login-panel {
    display: grid;
    width: min(100%, 410px);
    gap: 30px;
    margin: auto;
}

.login-panel__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #34445d;
    font-size: 13px;
    font-weight: 750;
}

.login-panel__brand img {
    display: block;
    width: 92px;
    height: auto;
}

.login-copy h2 {
    margin: 9px 0 0;
    color: #15253e;
    font-size: clamp(29px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.login-copy__eyebrow {
    color: #087cac;
}

.login-copy p:not(.login-copy__eyebrow) {
    margin: 15px 0 0;
    color: #5d6c80;
    font-size: 15px;
    line-height: 1.62;
}

.login-button {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid #1d5ec8;
    border-radius: 7px;
    background: #1769d3;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px rgb(23 105 211 / 0.19);
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.login-button:hover {
    background: #125dbd;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgb(23 105 211 / 0.25);
}

.microsoft-mark {
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-template-rows: repeat(2, 8px);
    gap: 2px;
}

.microsoft-mark i:nth-child(1) { background: #f35325; }
.microsoft-mark i:nth-child(2) { background: #81bc06; }
.microsoft-mark i:nth-child(3) { background: #05a6f0; }
.microsoft-mark i:nth-child(4) { background: #ffba08; }

.login-button__arrow {
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
}

.login-panel__note {
    margin: -12px 0 0;
    color: #7c8999;
    font-size: 12px;
    line-height: 1.55;
}

.login-access__footer {
    margin-top: auto;
    color: #8994a2;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 850px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-identity {
        min-height: 310px;
        padding: 48px 32px;
    }

    .login-identity h1 {
        max-width: 560px;
        font-size: clamp(34px, 7vw, 50px);
    }

    .login-identity__copy,
    .login-identity__footer {
        display: none;
    }

    .login-access {
        min-height: 500px;
        padding: 42px 28px 28px;
    }
}

@media (max-width: 480px) {
    .login-identity {
        min-height: 270px;
        padding: 35px 24px;
    }

    .login-identity__rule {
        margin: 32px 0 16px;
    }

    .login-identity h1 {
        font-size: 34px;
    }

    .login-access {
        padding-inline: 24px;
    }
}

.checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkbox-field input {
    width: 16px;
    min-height: 16px;
    box-shadow: none;
}

.checkbox-field span {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.self-build-section {
    display: grid;
    gap: 8px;
}

.conditional-field {
    max-width: 360px;
    padding-left: 24px;
}

.conditional-field[hidden] {
    display: none;
}

.form-panel {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.table-wrap--inventory {
    max-height: calc(100vh - 255px);
    min-height: 360px;
}

.data-table {
    width: 100%;
    min-width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
}

.data-table th,
.data-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--border-strong);
    background: var(--table-header);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgb(15 23 42 / 0.04);
}

.data-table tbody tr {
    transition: background-color 100ms ease;
}

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

.data-table--registry {
    min-width: 1500px;
}

.data-table--registry th:nth-child(1),
.data-table--registry td:nth-child(1) {
    width: 13%;
}

.data-table--registry th:nth-child(2),
.data-table--registry td:nth-child(2) {
    width: 21%;
}

.data-table--registry th:nth-child(3),
.data-table--registry td:nth-child(3) {
    width: 12%;
}

.data-table--registry th:nth-child(4),
.data-table--registry td:nth-child(4) {
    width: 8%;
}

.data-table--registry th:nth-child(5),
.data-table--registry td:nth-child(5) {
    width: 7%;
}

.data-table--registry th:nth-child(6),
.data-table--registry td:nth-child(6) {
    width: 9%;
}

.data-table--registry th:nth-child(7),
.data-table--registry td:nth-child(7) {
    width: 9%;
}

.data-table--registry th:nth-child(8),
.data-table--registry td:nth-child(8) {
    width: 10%;
}

.data-table--registry th:nth-child(9),
.data-table--registry td:nth-child(9) {
    width: 7%;
}

.data-table--registry th:nth-child(10),
.data-table--registry td:nth-child(10) {
    width: 7%;
}

.data-table--registry th:nth-child(11),
.data-table--registry td:nth-child(11) {
    width: 8%;
}

.data-table--registry th:nth-child(12),
.data-table--registry td:nth-child(12) {
    width: 5%;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.table-link {
    color: var(--text-strong);
    font-weight: 700;
}

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-strong);
    text-decoration: none;
}

.sort-link:hover {
    color: var(--primary);
    text-decoration: none;
}

.sort-link span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.sort-link.is-sorted {
    color: var(--primary);
}

.tool-name-cell,
.application-cell,
.version-cell {
    white-space: normal;
}

.description-cell {
    color: var(--text);
    line-height: 1.34;
}

.clamp-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.link-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.action-link:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.actions-column {
    width: 130px;
}

.inline-form {
    display: inline;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 23px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.status-badge--available {
    border-color: var(--available-border);
    background: var(--available-bg);
    color: var(--available-text);
}

.status-badge--beta {
    border-color: var(--beta-border);
    background: var(--beta-bg);
    color: var(--beta-text);
}

.status-badge--indevelopment {
    border-color: var(--development-border);
    background: var(--development-bg);
    color: var(--development-text);
}

.status-badge--planned {
    border-color: var(--planned-border);
    background: var(--planned-bg);
    color: var(--planned-text);
}

.status-badge--deprecated {
    border-color: var(--deprecated-border);
    background: var(--deprecated-bg);
    color: var(--deprecated-text);
}

.status-note-inline {
    display: block;
    max-width: 180px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-state {
    padding: 26px 12px;
    color: var(--muted);
    text-align: center;
}

.empty-state strong,
.empty-state span,
.empty-state a {
    display: block;
    margin: 3px 0;
}

.muted {
    color: var(--muted);
}

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 10px;
}

.tool-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
}

.tool-overview h1 {
    margin: 0;
}

.tool-overview > span {
    color: var(--text);
}

.tool-overview__status-note {
    color: var(--development-text) !important;
}

.back-link {
    display: inline-block;
    margin-bottom: 8px;
}

.detail-summary {
    margin-bottom: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.detail-summary h2 {
    margin: 0 0 4px;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-summary p {
    max-width: 960px;
    margin: 0;
}

.detail-summary--status-note {
    padding: 10px 12px;
    border: 1px solid var(--development-border);
    border-radius: 7px;
    background: var(--development-bg);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--border);
    box-shadow: var(--shadow-sm);
}

.detail-grid div,
.panel {
    background: var(--surface);
    padding: 12px;
}

.detail-grid dt {
    margin-bottom: 4px;
}

.detail-grid dd {
    margin: 0;
    color: var(--text-strong);
}

.section-heading,
.roadmap-subsection__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.section-heading {
    margin-bottom: 10px;
}

.section-heading h2,
.roadmap-subsection__heading h3 {
    margin: 0;
    color: var(--text-strong);
}

.section-heading h2 {
    font-size: 20px;
}

.section-heading p {
    margin: 2px 0 0;
    color: var(--muted);
}

.roadmap-section {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.roadmap-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--border);
    box-shadow: var(--shadow-sm);
}

.roadmap-summary-strip div {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 12px;
    background: var(--surface);
}

.roadmap-summary-strip span,
.roadmap-subsection__heading span {
    color: var(--muted);
    font-size: 12px;
}

.roadmap-summary-strip > div > span:first-child {
    color: var(--muted-strong);
    font-weight: 800;
    text-transform: uppercase;
}

.roadmap-summary-strip strong {
    color: var(--text-strong);
}

.roadmap-summary-strip__inline {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.roadmap-summary-strip__inline > span:first-child {
    color: var(--muted-strong);
    font-weight: 800;
    text-transform: uppercase;
}

.roadmap-summary-dialog {
    width: min(720px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: 0 16px 48px rgb(0 0 0 / 35%);
    color: var(--text);
}

.roadmap-summary-dialog::backdrop {
    background: rgb(0 0 0 / 55%);
}

.roadmap-dialog__heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.roadmap-dialog__heading h3 {
    margin: 0;
    color: var(--text-strong);
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--border);
    box-shadow: var(--shadow-sm);
}

.summary-strip > div {
    display: grid;
    gap: 4px;
    min-height: 62px;
    padding: 10px 12px;
    background: var(--surface);
}

.summary-strip__label {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.summary-strip strong {
    color: var(--text-strong);
}

.performance-dashboard {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.performance-dashboard__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.performance-dashboard__header h2 {
    margin: 0;
    font-size: 18px;
}

.performance-dashboard__header p {
    margin: 2px 0 0;
    color: var(--muted);
}

.performance-dashboard__totals {
    display: flex;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.performance-dashboard__totals strong {
    color: var(--text-strong);
}

.activity-line-chart {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-subtle) 76%, transparent);
}

.activity-line-chart__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.activity-line-chart__header h3 {
    margin: 0;
    font-size: 15px;
}

.activity-line-chart__header p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.activity-line-chart__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.activity-line-chart__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.activity-line-chart__key {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 999px;
}

.activity-line-chart__key--user {
    background: #39d38f;
}

.activity-line-chart__key--system {
    background: #3aa0ff;
}

.activity-line-chart__canvas-wrap {
    position: relative;
    min-height: 330px;
}

.activity-line-chart__canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 330px !important;
}

.activity-line-chart__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
}

.activity-heatmap {
    display: grid;
    grid-template-columns: 72px repeat(24, minmax(22px, 1fr));
    gap: 3px;
    align-items: stretch;
}

.activity-heatmap__corner,
.activity-heatmap__hour,
.activity-heatmap__day {
    min-height: 24px;
    color: var(--muted);
    font-size: 11px;
}

.activity-heatmap__hour {
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-heatmap__day {
    display: grid;
    align-content: center;
    gap: 1px;
}

.activity-heatmap__day strong {
    color: var(--text);
    font-size: 12px;
}

.activity-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-strong);
    font-size: 10px;
    font-weight: 800;
}

.activity-cell--0 {
    background: var(--surface-subtle);
}

.activity-cell--idle {
    background: rgba(245, 158, 11, 0.32);
    border-color: rgba(245, 158, 11, 0.58);
    color: var(--text-strong);
}

.activity-cell--1 {
    background: rgba(58, 160, 255, 0.22);
}

.activity-cell--2 {
    background: rgba(58, 160, 255, 0.38);
}

.activity-cell--3 {
    background: rgba(57, 211, 143, 0.48);
}

.activity-cell--4 {
    background: rgba(57, 211, 143, 0.76);
}

.activity-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.activity-legend .activity-cell {
    width: 18px;
    min-height: 14px;
}

.roadmap-health,
.roadmap-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--planned-border);
    border-radius: 999px;
    background: var(--planned-bg);
    color: var(--planned-text);
    font-size: 12px;
    font-weight: 800;
}

.roadmap-health--ontrack,
.roadmap-status--complete {
    border-color: var(--available-border);
    background: var(--available-bg);
    color: var(--available-text);
}

.roadmap-health--watch,
.roadmap-status--inprogress {
    border-color: var(--beta-border);
    background: var(--beta-bg);
    color: var(--beta-text);
}

.roadmap-health--atrisk,
.roadmap-status--blocked,
.roadmap-health--blocked {
    border-color: var(--development-border);
    background: var(--development-bg);
    color: var(--development-text);
}

.roadmap-status--deferred {
    border-color: var(--deprecated-border);
    background: var(--deprecated-bg);
    color: var(--deprecated-text);
}

.roadmap-summary-form,
.roadmap-add-form,
.roadmap-milestone-form {
    display: grid;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.roadmap-summary-form {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.roadmap-add-form,
.roadmap-milestone-form {
    grid-template-columns: minmax(180px, 1.2fr) minmax(130px, 0.75fr) minmax(130px, 0.85fr) 142px 142px 145px minmax(180px, 1.2fr) auto;
}

.roadmap-form-actions {
    display: flex;
    align-items: end;
    gap: 6px;
}

.roadmap-subsection {
    display: grid;
    gap: 8px;
}

.roadmap-table-wrap {
    overflow-x: auto;
}

.roadmap-subtasks { margin-top: 7px; }
.roadmap-subtasks summary { width: fit-content; cursor: pointer; color: var(--link); font-size: 12px; font-weight: 800; }
.roadmap-subtasks ul { display: grid; gap: 5px; margin: 8px 0; padding: 0; list-style: none; }
.roadmap-subtasks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-left: 3px solid var(--border); background: var(--surface-muted); }
.roadmap-subtasks li small { grid-column: 1; color: var(--muted); }
.roadmap-subtasks li form { grid-column: 2; grid-row: 1 / span 2; }
.roadmap-subtask--complete > span { color: var(--muted); text-decoration: line-through; }
.roadmap-subtask-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, .7fr) 135px auto; gap: 6px; margin-top: 8px; }
.roadmap-button--compact { min-height: 30px; padding: 4px 8px; font-size: 12px; }


.data-table--roadmap {
    min-width: 1180px;
}

.data-table--roadmap th:nth-child(1),
.data-table--roadmap td:nth-child(1) {
    width: 20%;
}

.data-table--roadmap th[data-roadmap-sort] {
    cursor: pointer;
    user-select: none;
}

.data-table--roadmap th[data-roadmap-sort]::after {
    margin-left: 6px;
    color: var(--muted);
    content: "↕";
}

.data-table--roadmap th[data-sort-direction="asc"]::after {
    content: "↑";
}

.data-table--roadmap th[data-sort-direction="desc"]::after {
    content: "↓";
}

.data-table--roadmap th:nth-child(4),
.data-table--roadmap td:nth-child(4),
.data-table--roadmap th:nth-child(5),
.data-table--roadmap td:nth-child(5) {
    width: 120px;
}

.data-table--roadmap th:nth-child(6),
.data-table--roadmap td:nth-child(6) {
    width: 130px;
}

.data-table--roadmap th:nth-child(8),
.data-table--roadmap td:nth-child(8) {
    width: 100px;
}

.roadmap-edit-row td {
    padding: 8px;
    background: var(--surface-muted);
}

.row-inactive {
    opacity: 0.68;
}

.empty-state--inline {
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.roadmap-timeline {
    overflow-x: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.roadmap-timeline__axis {
    position: relative;
    height: 22px;
    min-width: 760px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.roadmap-timeline__axis span {
    position: absolute;
    top: 0;
    transform: translateX(-1px);
    white-space: nowrap;
}

.roadmap-timeline__track {
    position: relative;
    min-width: 760px;
    min-height: 92px;
    border-top: 1px solid var(--border);
    background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 12.5% 100%;
}

.roadmap-timeline__bar {
    position: absolute;
    top: 18px;
    min-width: 38px;
    max-width: 100%;
    height: 30px;
    overflow: hidden;
    padding: 6px 8px;
    border: 1px solid var(--planned-border);
    border-radius: 6px;
    background: var(--planned-bg);
    color: var(--planned-text);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roadmap-timeline__bar:nth-child(2n) {
    top: 54px;
}

.roadmap-timeline__bar--complete {
    border-color: var(--available-border);
    background: var(--available-bg);
    color: var(--available-text);
}

.roadmap-timeline__bar--progress {
    border-color: var(--beta-border);
    background: var(--beta-bg);
    color: var(--beta-text);
}

.roadmap-timeline__bar--blocked {
    border-color: var(--development-border);
    background: var(--development-bg);
    color: var(--development-text);
}

.roadmap-timeline__bar--deferred {
    border-color: var(--deprecated-border);
    background: var(--deprecated-bg);
    color: var(--deprecated-text);
}

.data-table--history {
    min-width: 720px;
}

.data-table--boarding {
    min-width: 1220px;
}

.data-table--boarding th:nth-child(1),
.data-table--boarding td:nth-child(1) {
    width: 15%;
}

.data-table--boarding th:nth-child(7),
.data-table--boarding td:nth-child(7),
.data-table--boarding th:nth-child(8),
.data-table--boarding td:nth-child(8),
.data-table--boarding th:nth-child(9),
.data-table--boarding td:nth-child(9),
.data-table--boarding th:nth-child(10),
.data-table--boarding td:nth-child(10) {
    width: 8%;
}

.boarding-section {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.boarding-form {
    max-width: none;
}

.boarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 10px;
}

.boarding-hero__main,
.boarding-progress-card,
.boarding-command-strip,
.boarding-panel {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.boarding-hero__main {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.boarding-title-row,
.boarding-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.boarding-title-row h1,
.boarding-panel h2 {
    margin: 0;
    color: var(--text-strong);
    line-height: 1.15;
}

.boarding-title-row h1 {
    font-size: 24px;
}

.boarding-title-row p,
.boarding-panel__header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.boarding-progress-card {
    display: grid;
    gap: 6px;
    align-content: center;
    padding: 12px;
}

.boarding-progress-card > span:first-child,
.boarding-command-strip span,
.boarding-panel__header span,
.boarding-add-row-form span {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 800;
}

.boarding-progress-card strong {
    color: var(--text-strong);
    font-size: 26px;
    line-height: 1;
}

.boarding-progress-card small {
    color: var(--muted);
}

.boarding-command-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--border);
    gap: 1px;
}

.boarding-command-strip div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 9px 11px;
    background: var(--surface);
}

.boarding-command-strip strong {
    overflow: hidden;
    color: var(--text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boarding-work-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.boarding-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
}

.boarding-panel h2 {
    font-size: 19px;
}

.boarding-panel__header {
    align-items: center;
}

.boarding-panel__header form {
    margin: 0;
}

.boarding-next-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.boarding-next-list li {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.boarding-next-list strong {
    overflow: hidden;
    color: var(--text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boarding-owner-chip,
.boarding-complete-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.boarding-complete-badge--done {
    border-color: var(--available-border);
    background: var(--available-bg);
    color: var(--available-text);
}

.boarding-status-form,
.boarding-assignment-form,
.boarding-add-row-form {
    display: grid;
    align-items: end;
    gap: 8px;
}

.boarding-status-form {
    grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1fr) minmax(220px, 1.15fr) auto;
}

.boarding-detail-form {
    display: grid;
    gap: 10px;
}

.boarding-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 9px;
}

.boarding-form-grid--wide {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.boarding-assignment-form {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr) auto;
}

.boarding-add-row-form {
    grid-template-columns: minmax(260px, 420px) auto;
    justify-content: start;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.boarding-add-row-form--email {
    grid-template-columns: minmax(260px, 420px) 220px auto;
}

.boarding-add-row-form select,
.boarding-add-row-form input {
    min-height: 32px;
}

.data-table--boarding-checklist,
.data-table--boarding-software,
.data-table--boarding-accessories,
.data-table--history {
    table-layout: fixed;
}

.data-table--boarding-checklist th:nth-child(1),
.data-table--boarding-checklist td:nth-child(1) {
    width: 34%;
}

.data-table--boarding-checklist th:nth-child(2),
.data-table--boarding-checklist td:nth-child(2),
.data-table--boarding-checklist th:nth-child(3),
.data-table--boarding-checklist td:nth-child(3),
.data-table--boarding-checklist th:nth-child(5),
.data-table--boarding-checklist td:nth-child(5) {
    width: 120px;
}

.data-table--boarding-software th:nth-child(1),
.data-table--boarding-software td:nth-child(1) {
    width: 28%;
}

.data-table--boarding-software th:nth-child(2),
.data-table--boarding-software td:nth-child(2),
.data-table--boarding-software th:nth-child(3),
.data-table--boarding-software td:nth-child(3),
.data-table--boarding-software th:nth-child(4),
.data-table--boarding-software td:nth-child(4) {
    width: 95px;
    text-align: center;
}

.data-table--boarding-software th:nth-child(6),
.data-table--boarding-software td:nth-child(6),
.data-table--boarding-accessories th:nth-child(6),
.data-table--boarding-accessories td:nth-child(6) {
    width: 88px;
}

.data-table--boarding-accessories th:nth-child(1),
.data-table--boarding-accessories td:nth-child(1) {
    width: 24%;
}

.data-table--boarding-accessories th:nth-child(2),
.data-table--boarding-accessories td:nth-child(2),
.data-table--boarding-accessories th:nth-child(3),
.data-table--boarding-accessories td:nth-child(3) {
    width: 105px;
    text-align: center;
}

.data-table--boarding-accessories th:nth-child(4),
.data-table--boarding-accessories td:nth-child(4) {
    width: 80px;
}

.data-table--boarding-software input[type="checkbox"],
.data-table--boarding-accessories input[type="checkbox"] {
    width: 17px;
    min-height: 17px;
    box-shadow: none;
}

.data-table--boarding-software input:not([type="checkbox"]),
.data-table--boarding-accessories input:not([type="checkbox"]) {
    min-height: 30px;
    padding: 0 8px;
    font-size: 13px;
}

.data-table--boarding-software .muted,
.data-table--history .muted {
    display: block;
    margin-top: 2px;
}

.data-table--boarding-checklist {
    min-width: 760px;
}

.data-table--boarding-software,
.data-table--boarding-accessories {
    min-width: 920px;
}

.progress-meter {
    display: inline-flex;
    width: 90px;
    height: 8px;
    overflow: hidden;
    margin-right: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-muted);
    vertical-align: middle;
}

.progress-meter span {
    display: block;
    min-width: 0;
    background: var(--primary);
}

.boarding-reference-form {
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 160px) repeat(3, minmax(90px, 110px)) 90px minmax(160px, 1fr) auto;
}

.panel {
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: var(--shadow-sm);
}

.panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.panel p {
    margin: 0;
    color: var(--muted);
}

.two-column,
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.edit-form {
    display: grid;
    gap: 12px;
    max-width: 980px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.intake-form {
    max-width: 820px;
}

.checkbox-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.checkbox-list--versions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.checkbox-list legend {
    padding: 0 4px;
}

.checkbox-group {
    display: grid;
    gap: 7px;
    align-content: start;
}

.checkbox-group strong {
    color: var(--text-strong);
    font-size: 13px;
}

.form-actions {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

.validation-summary,
span[data-valmsg-for] {
    color: var(--deprecated-text);
    font-size: 12px;
    font-weight: 700;
}

.reference-section {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.reference-section h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
}

.settings-heading {
    margin-bottom: 12px;
}

.settings-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.settings-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-tabs {
    position: sticky;
    top: 70px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.settings-tabs label {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.settings-tabs label:hover {
    background: var(--surface-muted);
    color: var(--text-strong);
}

.settings-content {
    min-width: 0;
}

.settings-panel {
    display: none;
    gap: 12px;
}

#settings-tab-registry:checked ~ .settings-tabs label[for="settings-tab-registry"],
#settings-tab-software:checked ~ .settings-tabs label[for="settings-tab-software"],
#settings-tab-boarding:checked ~ .settings-tabs label[for="settings-tab-boarding"],
#settings-tab-emails:checked ~ .settings-tabs label[for="settings-tab-emails"] {
    border-color: var(--border-strong);
    background: var(--primary-soft);
    color: var(--primary);
}

#settings-tab-registry:checked ~ .settings-content .settings-panel--registry,
#settings-tab-software:checked ~ .settings-content .settings-panel--software,
#settings-tab-boarding:checked ~ .settings-content .settings-panel--boarding,
#settings-tab-emails:checked ~ .settings-content .settings-panel--emails {
    display: grid;
}

.settings-panel__header,
.settings-card {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.settings-panel__header {
    padding: 12px;
}

.settings-panel__header h2,
.settings-card h3 {
    margin: 0;
    color: var(--text-strong);
}

.settings-panel__header h2 {
    font-size: 20px;
}

.settings-panel__header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.settings-grid {
    display: grid;
    gap: 12px;
}

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

.settings-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
}

.settings-card--wide {
    grid-column: 1 / -1;
}

.settings-add-form,
.settings-row-form {
    display: grid;
    gap: 8px;
    align-items: center;
}

.settings-add-form {
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.settings-add-form--short {
    grid-template-columns: minmax(180px, 1fr) 90px auto;
}

.settings-add-form--status {
    grid-template-columns: minmax(160px, 1fr) 90px minmax(140px, 0.8fr) auto;
}

.settings-add-form--software {
    grid-template-columns: minmax(190px, 1fr) minmax(130px, 165px) minmax(120px, 150px) 80px repeat(4, minmax(84px, auto)) minmax(160px, 1fr) auto;
}

.settings-add-form--accessory {
    grid-template-columns: minmax(190px, 1fr) 110px 90px minmax(180px, 1fr) auto;
}

.settings-add-form--email {
    grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) 90px 90px minmax(260px, 1.6fr) auto;
}

.settings-add-form--version {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) 90px auto;
}

.settings-row-form--short {
    grid-template-columns: minmax(180px, 1fr) 90px 70px auto;
}

.settings-row-form--status {
    grid-template-columns: minmax(160px, 1fr) 80px minmax(130px, 0.8fr) 60px auto;
}

.settings-row-form--software {
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 165px) minmax(120px, 150px) 75px 70px 70px 70px 70px minmax(150px, 1fr) 60px auto;
}

.settings-row-form--accessory {
    grid-template-columns: minmax(190px, 1fr) 110px 90px minmax(180px, 1fr) 110px auto;
}

.settings-row-form--email {
    grid-template-columns: minmax(150px, 220px) minmax(200px, 1fr) 90px 80px 110px minmax(260px, 1.5fr) auto;
}

.settings-row-form--version {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) 90px 70px auto;
}

.settings-add-form--inline-version {
    grid-template-columns: minmax(180px, 260px) 90px auto;
    padding: 7px;
}

.settings-row-form--inline-version {
    grid-template-columns: minmax(180px, 260px) 90px 80px auto;
}

.settings-version-block {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
}

.settings-version-block--muted {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.settings-version-block__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.settings-version-block__header strong {
    color: var(--text-strong);
}

.settings-version-block__header span {
    color: var(--muted);
    font-size: 12px;
}

.settings-version-list {
    display: grid;
    gap: 5px;
}

.data-table--settings {
    min-width: 760px;
}

.data-table--settings-software {
    min-width: 1420px;
}

.data-table--settings-email {
    min-width: 1180px;
}

.reference-add-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 110px minmax(160px, 240px) auto;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.reference-section:nth-of-type(n + 3) .reference-add-form {
    grid-template-columns: minmax(220px, 1fr) 110px auto;
}

.reference-add-form--versions {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) 110px auto;
}

.reference-row-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 90px minmax(160px, 240px) 70px auto;
    gap: 8px;
    align-items: center;
}

.reference-row-form--short {
    grid-template-columns: minmax(220px, 1fr) 90px 70px auto;
}

.reference-row-form--versions {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) 90px 70px auto;
}

.software-catalog-add-form {
    grid-template-columns: minmax(180px, 1fr) minmax(120px, 150px) 80px repeat(4, minmax(86px, auto)) minmax(160px, 1fr) auto;
}

.software-catalog-row-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(120px, 150px) 80px 70px 70px 70px 70px minmax(160px, 1fr) 70px auto;
    gap: 8px;
    align-items: center;
}

.email-template-add-form {
    grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) 90px 90px minmax(260px, 1.5fr) auto;
}

.data-table--admin {
    min-width: 840px;
}

.user-access-add-form {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) minmax(120px, 150px) minmax(170px, 260px) auto;
}

.user-access-add-form--simple {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) minmax(120px, 150px) auto;
}

.user-access-row-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px) minmax(100px, 140px) minmax(180px, 260px) 70px minmax(170px, 240px) auto;
    gap: 8px;
    align-items: center;
}

.data-table--users {
    min-width: 1220px;
}

.group-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.group-picker--compact {
    min-height: 34px;
}

.access-note {
    margin-top: 12px;
    max-width: 900px;
}

.data-table--groups {
    min-width: 1280px;
}

.group-add-form {
    grid-template-columns: minmax(200px, 1fr) 90px repeat(5, minmax(130px, auto)) auto;
}

.group-row-form {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(360px, 1fr) minmax(360px, 1.2fr) auto;
    gap: 10px;
    align-items: start;
}

.group-row-form__identity {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 80px auto;
    gap: 8px;
    align-items: end;
}

.group-row-form__identity label {
    display: grid;
    gap: 4px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 6px 12px;
}

.table-wrap--full {
    width: 100%;
}

.text-nowrap {
    white-space: nowrap;
}

.inline-details summary {
    cursor: pointer;
    color: var(--link);
    font-weight: 700;
}

.inline-details pre {
    max-width: 620px;
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text);
    white-space: pre-wrap;
}

.group-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 34px;
    align-items: center;
}

.member-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.2;
}

.access-management { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.access-management__groups { padding: 12px; }
.access-management__groups h2, .access-settings h2, .access-members h2 { margin: 0; font-size: 1.1rem; }
.access-group-link { display: flex; justify-content: space-between; gap: 8px; padding: 10px; margin-top: 6px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.access-group-link:hover, .access-group-link.is-selected { background: var(--surface-muted); }
.access-group-link small, .member-picker__list small { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 2px; }
.access-management details { margin-top: 12px; }.access-management details form { display: grid; gap: 8px; margin-top: 8px; }.access-management details label { display: grid; gap: 4px; }
.access-management__detail { display: grid; gap: 16px; }.access-settings, .access-members { padding: 16px; }.access-settings__header, .access-members__header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }.access-settings__header p, .access-members__header p { margin: 4px 0 0; color: var(--text-muted); }
.access-settings__identity { display: grid; grid-template-columns: minmax(180px, 1fr) 100px auto; gap: 10px; margin: 16px 0; align-items: end; }.access-settings__identity label { display: grid; gap: 4px; }
.access-levels { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 240px); gap: 8px 14px; align-items: center; }.access-levels > strong { color: var(--text-muted); font-size: .8rem; }.access-levels label { display: grid; gap: 2px; }.access-levels small { color: var(--text-muted); }
.access-members__automatic { margin-top: 14px; padding: 10px; border-left: 3px solid var(--accent); background: var(--surface-muted); }.member-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 16px; }.member-picker h3 { margin: 0 0 8px; font-size: .9rem; }.member-picker input[type=search] { width: 100%; box-sizing: border-box; margin-bottom: 8px; }.member-picker__list { min-height: 170px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; }.member-picker__list label { display: flex; align-items: flex-start; gap: 10px; padding: 8px; cursor: pointer; font-weight: 400; }.member-picker__list input[type="checkbox"] { flex: 0 0 18px; width: 18px; min-width: 18px; min-height: 18px; height: 18px; margin: 1px 0 0; }.member-picker__list label > span { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }.member-picker__list label:hover { background: var(--surface-muted); }.member-picker__actions { display: grid; align-content: center; gap: 8px; }
@media (max-width: 760px) { .access-management { grid-template-columns: 1fr; }.access-settings__identity, .member-picker { grid-template-columns: 1fr; }.member-picker__actions { grid-template-columns: 1fr 1fr; }.access-levels { grid-template-columns: 1fr; }.access-levels > strong { display: none; } }

.group-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.access-note h2 {
    font-size: 16px;
}

.access-note p + p {
    margin-top: 6px;
}

.computer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: 10px;
    align-items: start;
    margin-bottom: 8px;
}

.computer-toolbar--browse {
    display: block;
}

.filter-bar--inline {
    position: static;
    margin-bottom: 0;
}

.computer-filter-bar {
    grid-template-columns: minmax(200px, 1.3fr) minmax(145px, 0.85fr) minmax(165px, 1fr) minmax(130px, 0.8fr) minmax(120px, 0.75fr) minmax(125px, 0.8fr) minmax(110px, 0.65fr) minmax(125px, 0.75fr) auto auto;
    position: sticky;
    top: 56px;
    display: grid;
    align-items: end;
}

.computer-filter-bar label,
.computer-filter-bar label:first-child {
    min-width: 0;
}

.data-table--computers {
    min-width: 2020px;
    table-layout: fixed;
    font-size: 13px;
}

.data-table--computers th,
.data-table--computers td {
    padding: 5px 8px;
}

.data-table--computers th:nth-child(1),
.data-table--computers td:nth-child(1) {
    width: 9%;
}

.data-table--computers th:nth-child(2),
.data-table--computers td:nth-child(2),
.data-table--computers th:nth-child(3),
.data-table--computers td:nth-child(3) {
    width: 7%;
}

.data-table--computers th:nth-child(4),
.data-table--computers td:nth-child(4) {
    width: 9%;
}

.data-table--computers th:nth-child(5),
.data-table--computers td:nth-child(5) {
    width: 6%;
}

.data-table--computers th:nth-child(6),
.data-table--computers td:nth-child(6) {
    width: 8%;
}

.data-table--computers th:nth-child(7),
.data-table--computers td:nth-child(7) {
    width: 9%;
}

.data-table--computers th:nth-child(8),
.data-table--computers td:nth-child(8) {
    width: 7%;
}

.data-table--computers th:nth-child(9),
.data-table--computers td:nth-child(9),
.data-table--computers th:nth-child(10),
.data-table--computers td:nth-child(10),
.data-table--computers th:nth-child(11),
.data-table--computers td:nth-child(11) {
    width: 9%;
}

.data-table--computers th:nth-child(12),
.data-table--computers td:nth-child(12) {
    width: 19%;
}

.data-table--computers th:nth-child(13),
.data-table--computers td:nth-child(13) {
    width: 6%;
}

.data-table--computers td {
    overflow-wrap: anywhere;
}

.data-table--computers td > .muted,
.data-table--computers td strong + .muted {
    display: block;
    margin-top: 2px;
}

.computer-assignment-form {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(108px, 1fr) minmax(78px, 0.8fr) minmax(88px, 1fr) auto;
    gap: 4px;
    align-items: center;
}

.computer-assignment-form input {
    min-height: 29px;
    padding: 0 7px;
    font-size: 12px;
}

.computer-assignment-form button {
    min-height: 29px;
    padding: 0 8px;
}

.date-cell {
    white-space: nowrap;
}

.software-toolbar {
    margin-bottom: 8px;
}

.software-filter-bar {
    display: grid;
    grid-template-columns: minmax(210px, 1.2fr) minmax(220px, 1.2fr) minmax(170px, 0.9fr) minmax(170px, 1fr) minmax(110px, 0.6fr) auto auto;
    align-items: end;
}

.software-filter-bar label,
.software-filter-bar label:first-child {
    min-width: 0;
}

.table-wrap--software {
    max-height: calc(100vh - 255px);
    min-height: 360px;
}

.data-table--software {
    min-width: 1180px;
    table-layout: fixed;
    font-size: 13px;
}

.data-table--software th,
.data-table--software td {
    padding: 5px 8px;
}

.data-table--software th:nth-child(1),
.data-table--software td:nth-child(1) {
    width: 32%;
}

.data-table--software th:nth-child(2),
.data-table--software td:nth-child(2) {
    width: 13%;
}

.data-table--software th:nth-child(3),
.data-table--software td:nth-child(3) {
    width: 20%;
}

.data-table--software th:nth-child(4),
.data-table--software td:nth-child(4) {
    width: 16%;
}

.data-table--software th:nth-child(5),
.data-table--software td:nth-child(5),
.data-table--software th:nth-child(6),
.data-table--software td:nth-child(6) {
    width: 9%;
}

.data-table--software td {
    overflow-wrap: anywhere;
}

.import-panel {
    max-width: 720px;
}

.import-panel h2 {
    margin: 0 0 6px;
    color: var(--text-strong);
    font-size: 17px;
}

.import-page-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.import-note {
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
}

.import-note strong {
    color: var(--text-strong);
    font-size: 13px;
}

.import-note span {
    color: var(--muted);
    font-size: 12px;
}

.import-progress {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
}

.import-progress[hidden] {
    display: none;
}

.import-progress__bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.import-progress__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: var(--primary);
    animation: import-progress-slide 1.15s ease-in-out infinite;
}

.import-progress strong,
.import-progress span {
    display: block;
}

.import-progress strong {
    color: var(--text-strong);
    font-size: 13px;
}

.import-progress span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}

@keyframes import-progress-slide {
    0% {
        transform: translateX(-115%);
    }

    50% {
        transform: translateX(60%);
    }

    100% {
        transform: translateX(250%);
    }
}

@media (max-width: 900px) {
    .site-header__inner,
    .filter-bar,
    .page-heading,
    .detail-header,
    .boarding-title-row,
    .boarding-panel__header {
        align-items: stretch;
        flex-direction: column;
    }

    .top-nav,
    .user-menu {
        flex-wrap: wrap;
    }

    .filter-bar {
        position: static;
    }

    .filter-bar label,
    .filter-bar label:first-child {
        min-width: 100%;
    }

    .detail-grid,
    .two-column,
    .form-grid,
    .checkbox-list,
    .checkbox-list--versions,
    .boarding-hero,
    .boarding-command-strip,
    .boarding-work-grid,
    .boarding-status-form,
    .boarding-form-grid,
    .boarding-form-grid--wide,
    .boarding-assignment-form,
    .boarding-add-row-form,
    .boarding-add-row-form--email,
    .settings-shell,
    .settings-grid--two,
    .settings-add-form,
    .settings-add-form--short,
    .settings-add-form--status,
    .settings-add-form--software,
    .settings-add-form--accessory,
    .settings-add-form--email,
    .settings-add-form--version,
    .settings-row-form,
    .settings-row-form--short,
    .settings-row-form--status,
    .settings-row-form--software,
    .settings-row-form--accessory,
    .settings-row-form--email,
    .settings-row-form--version,
    .reference-add-form,
    .reference-section:nth-of-type(n + 3) .reference-add-form,
    .reference-add-form--versions,
    .reference-row-form,
    .reference-row-form--short,
    .reference-row-form--versions,
    .software-catalog-add-form,
    .software-catalog-row-form,
    .email-template-add-form,
    .user-access-add-form,
    .user-access-row-form,
    .group-add-form,
    .group-row-form,
    .group-row-form__identity,
    .permission-grid,
    .computer-toolbar,
    .software-filter-bar,
    .import-form,
    .computer-assignment-form {
        grid-template-columns: 1fr;
    }

    .import-progress {
        grid-template-columns: 1fr;
    }

    .settings-tabs {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-card--wide {
        grid-column: auto;
    }
}

/* ============================================================
   SETTINGS — REDESIGNED (v2) PATTERNS
   Display-row + toggle-edit, labeled form fields, card lists
   ============================================================ */

/* Card header: title left, "+ Add" button right */
.settings-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.settings-card__header h3 {
    margin: 0;
}

/* Collapsible add panel */
.settings-add-panel {
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--surface);
}

.settings-add-panel__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-strong);
}

/* Labeled field row (flex-wrap) */
.settings-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

/* Single labeled field */
.form-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-strong);
    white-space: nowrap;
}

/* Field size helpers */
.form-field--name    { flex: 2 1 180px; }
.form-field--sort    { flex: 0 0 84px; }
.form-field--badge   { flex: 1 1 150px; }
.form-field--notes   { flex: 2 1 200px; }
.form-field--qty     { flex: 0 0 88px; }
.form-field--select  { flex: 1 1 140px; }
.form-field--wide    { flex: 2 1 260px; }
.form-field--offset  { flex: 0 0 100px; }

/* Settings lookup table — proper display rows */
.data-table--settings-lookup {
    min-width: 0;
    width: 100%;
}

.settings-display-row td {
    vertical-align: middle;
}

.settings-display-row:hover td {
    background: var(--surface-hover);
}

/* Active / inactive badge */
.badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge--active {
    background: var(--available-bg);
    color: var(--available-text);
    border: 1px solid var(--available-border);
}

.badge--inactive {
    background: var(--surface-muted);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* Inline edit row — shown when "Edit" is clicked */
.settings-edit-row > td {
    padding: 0 !important;
    border-bottom: 0;
}

.settings-edit-form {
    padding: 16px;
    border-top: 3px solid var(--primary);
    border-bottom: 1px solid var(--border-strong);
    background: var(--primary-soft);
}

.settings-edit-form__title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
}

/* ── Software Catalog Card List ── */
.settings-sw-list {
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface-raised);
}

.settings-sw-item {
    border-bottom: 1px solid var(--border);
}

.settings-sw-item:last-child {
    border-bottom: 0;
}

.settings-sw-item__row {
    display: grid;
    grid-template-columns: minmax(170px, 1.6fr) minmax(110px, 1fr) minmax(100px, 0.9fr) auto minmax(80px, 0.5fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    transition: background-color 100ms ease;
}

.settings-sw-item__row:hover {
    background: var(--surface-hover);
}

.settings-sw-item--inactive .settings-sw-item__row {
    opacity: 0.65;
}

.settings-sw-item__name strong {
    display: block;
    color: var(--text-strong);
    font-size: 14px;
}

.settings-sw-item__name .badge {
    margin-top: 3px;
}

/* Boolean flag chips */
.settings-sw-flags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.flag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.flag-chip--on {
    background: var(--available-bg);
    color: var(--available-text);
    border: 1px solid var(--available-border);
}

/* Expandable edit form inside software card */
.settings-sw-item__edit {
    border-top: 3px solid var(--primary);
    background: var(--primary-soft);
}

.settings-sw-form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.settings-sw-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.settings-sw-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-sw-checkboxes .checkbox-field {
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
}

.settings-sw-form__section-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-strong);
}

/* ── Email Template Card List ── */
.settings-email-list {
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface-raised);
}

.settings-email-item {
    border-bottom: 1px solid var(--border);
}

.settings-email-item:last-child {
    border-bottom: 0;
}

.settings-email-item__row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(180px, 2fr) 90px 60px 80px auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    transition: background-color 100ms ease;
}

.settings-email-item__row:hover {
    background: var(--surface-hover);
}

.settings-email-item__name strong {
    display: block;
    color: var(--text-strong);
}

.settings-email-item__edit {
    border-top: 3px solid var(--primary);
    background: var(--primary-soft);
}

.settings-email-form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.settings-email-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

/* Versions sub-block */
.settings-version-block-v2 {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.settings-version-block-v2__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.settings-version-block-v2__header strong {
    color: var(--text-strong);
    font-size: 13px;
}

.settings-version-block-v2__header span {
    color: var(--muted);
    font-size: 12px;
}

.settings-version-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.settings-version-items {
    display: grid;
    gap: 6px;
}

.settings-version-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface-raised);
}

/* ── Boarding v2 improvements ── */
.boarding-add-form-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.boarding-row-save {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auto-save-flash {
    font-size: 12px;
    font-weight: 600;
    color: var(--available-text);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

.auto-save-flash.is-visible {
    opacity: 1;
}

/* ── Responsive overrides for new patterns ── */
@media (max-width: 900px) {
    .settings-sw-item__row,
    .settings-email-item__row {
        grid-template-columns: 1fr auto;
    }

    .settings-sw-item__row > :not(.settings-sw-item__name):not(.link-actions),
    .settings-email-item__row > :not(.settings-email-item__name):not(.link-actions) {
        display: none;
    }

    .settings-field-row {
        flex-direction: column;
    }

    .form-field--sort,
    .form-field--qty,
    .form-field--offset {
        flex: 1 1 auto;
    }
}

/* Microsoft 365 Assessment module */

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 7px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
}

.primary-action {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.primary-action:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.secondary-action {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.secondary-action:hover {
    background: var(--surface-hover);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.metric-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.metric-card strong {
    display: block;
    font-size: 22px;
    color: var(--text-strong);
}

.metric-card span {
    color: var(--muted);
    font-size: 13px;
}

.panel {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: var(--shadow-sm);
}

.panel h2 {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--text-strong);
}

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text);
}

.pill.critical {
    background: var(--deprecated-bg, #fdecec);
    color: var(--deprecated-text, #9f1d20);
    border-color: var(--deprecated-border, #efb8ba);
}

.pill.high {
    background: var(--development-bg, #fff4d6);
    color: var(--development-text, #7a5200);
    border-color: var(--development-border, #e6cb72);
}

.pill.medium,
.pill.low {
    background: var(--beta-bg, #e7f0fb);
    color: var(--beta-text, #225c9f);
    border-color: var(--beta-border, #b7d1ee);
}

.pill.informational {
    background: var(--available-bg, #e7f5ee);
    color: var(--available-text, #17663b);
    border-color: var(--available-border, #acd9c2);
}

.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.filter-group.wide {
    flex: 1 1 240px;
}

.filter-group label {
    font-size: 12px;
    color: var(--muted);
}

.filter-group input,
.filter-group select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
}

.table-count,
.table-note {
    padding: 8px 12px;
    color: var(--muted);
    font-size: 13px;
}

.table-pager {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
    padding: 0 12px 8px;
}

.table-pager[hidden] {
    display: none;
}

.table-pager__status {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
}

.table-pager__size {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.table-pager__size select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    min-height: 2rem;
    min-width: 5rem;
    padding: 0.25rem 0.55rem;
}

.table-pager button {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
}

.table-pager button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.dt-container {
    color: var(--text);
}

.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info {
    color: var(--muted);
    font-size: 0.9rem;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    min-height: 2.15rem;
}

.dt-container .dt-paging .dt-paging-button {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text) !important;
    margin-left: 0.25rem;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--surface-hover) !important;
    border-color: var(--accent) !important;
    color: var(--text-strong) !important;
}

.dt-container .dt-paging .dt-paging-button.disabled {
    color: var(--muted) !important;
    opacity: 0.55;
}

.dt-container .dt-layout-row {
    gap: 0.75rem;
    margin: 0.7rem 0;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.detail-main,
.detail-side {
    display: flex;
    flex-direction: column;
}

.detail-main .panel,
.detail-side .panel {
    padding: 12px;
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(0, 160px) 1fr;
    gap: 6px 12px;
    margin: 0;
}

.detail-list dt {
    color: var(--muted);
    font-size: 13px;
}

.detail-list dd {
    margin: 0;
    color: var(--text-strong);
}

.step-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-list span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.link-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.link-list a {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
}

.link-list a:hover {
    background: var(--surface-hover);
}

.link-list span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}
/* Microsoft 365 assessment dashboard */
.assessment-dashboard-panel {
    display: grid;
    gap: 1rem;
}

.assessment-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr) minmax(240px, 0.65fr);
    gap: 1rem;
}

.assessment-readiness-hero,
.assessment-chart-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, #38bdf8 6%), var(--surface));
    box-shadow: var(--shadow-sm);
}

.assessment-readiness-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.2rem;
    align-items: center;
    padding: 1.1rem;
}

.assessment-readiness-hero h3,
.assessment-chart-card h3 {
    margin: 0;
    color: var(--text-strong);
}

.assessment-readiness-hero p:not(.eyebrow) {
    margin: 0.45rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.assessment-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.assessment-action-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-strong);
    font-weight: 700;
    text-decoration: none;
    background: var(--surface-muted);
}

.assessment-chart-card {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: 1rem;
    min-width: 0;
}

.chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.chart-card-head > strong {
    color: var(--text-strong);
    font-size: 1.7rem;
    line-height: 1;
}

.assessment-analytics-grid,
.assessment-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.65fr) minmax(320px, 1fr);
    gap: 1rem;
}

.assessment-workbench {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.assessment-chart-canvas {
    position: relative;
    min-height: 220px;
}

.assessment-chart-canvas--compact {
    min-height: 180px;
}

.assessment-chart-canvas--wide {
    min-height: 240px;
}

.assessment-chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.section-head h2 {
    margin: 0.1rem 0 0;
}

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

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.inventory-section,
.signal-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 1rem;
}

.inventory-section h3,
.signal-group h3,
.dashboard-split h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 1rem;
}

.inventory-section p,
.signal-group p {
    margin: 0.55rem 0 0.9rem;
    color: var(--muted);
    line-height: 1.5;
}

.inventory-metrics,
.signal-list {
    display: grid;
    gap: 0.7rem;
}

.inventory-metric,
.signal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

a.inventory-metric:hover,
a.signal-row:hover {
    background: color-mix(in srgb, var(--surface-hover) 65%, transparent);
    border-radius: 6px;
    margin-inline: -0.45rem;
    padding-inline: 0.45rem;
}

.inventory-metric:first-child,
.signal-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.inventory-metric strong,
.inventory-metric span,
.signal-row strong,
.signal-row span {
    display: block;
}

.inventory-metric span,
.signal-row span {
    color: var(--muted);
    line-height: 1.45;
}

.inventory-metric.not-collected strong,
.inventory-metric.not-collected span {
    color: var(--muted);
}

.inventory-value,
.signal-count {
    min-width: 7.5rem;
    text-align: right;
}

.inventory-value strong,
.signal-count strong {
    color: var(--text-strong);
    font-size: 1.05rem;
}

.inventory-value span {
    font-size: 0.8rem;
}

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

.dashboard-split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.compact-table th,
.compact-table td {
    padding: 0.65rem 0.75rem;
}

.migration-notes {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    padding: 1rem;
}

.migration-notes ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.55;
}

.empty-state--compact {
    padding: 1rem;
}

.assessment-company-shell {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.assessment-company-picker,
.assessment-company-settings {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 1rem;
}

.assessment-company-picker {
    display: flex;
    align-items: end;
    gap: 0.8rem;
}

.assessment-company-picker label {
    flex: 1 1 auto;
}

.assessment-company-picker label,
.assessment-company-settings label:not(.checkbox-field) {
    display: grid;
    gap: 0.35rem;
    color: var(--muted-strong);
    font-weight: 700;
}

.assessment-company-picker select,
.assessment-company-settings input:not([type="checkbox"]) {
    min-height: 2.35rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    padding: 0.45rem 0.65rem;
}

.assessment-company-picker select {
    width: 100%;
    min-width: min(28rem, 100%);
}

.assessment-company-settings {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr auto auto;
    align-items: end;
    gap: 0.8rem;
}

.connection-status-pill {
    display: grid;
    gap: 0.1rem;
    align-self: end;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    text-decoration: none;
}

.connection-status-pill:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    transform: translateY(-1px);
}

.connection-status-pill strong {
    color: var(--text-strong);
    font-size: 0.86rem;
}

.connection-status-pill span {
    color: var(--muted);
    font-size: 0.75rem;
}

.connection-status-pill.configured {
    border-color: color-mix(in srgb, #22c55e 45%, var(--border));
}

.connection-status-pill.not-configured {
    border-color: color-mix(in srgb, #f97316 45%, var(--border));
}

.connection-diagnostics {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.connection-diagnostics > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.connection-diagnostics span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.connection-diagnostics strong {
    font-size: 0.86rem;
}

.assessment-runtime-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.assessment-runtime-strip > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
}

.assessment-runtime-strip span {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.assessment-runtime-strip strong {
    font-size: 0.9rem;
}

.status-good {
    color: #4ade80;
}

.status-warning {
    color: #fbbf24;
}

.run-management-form {
    display: grid;
    gap: 0.85rem;
}

.run-management-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.checkbox-cell {
    width: 2.75rem;
    text-align: center;
}

.checkbox-cell input {
    width: 1rem;
    height: 1rem;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    white-space: nowrap;
}

.link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.link-button:hover {
    text-decoration: underline;
}

.danger-action,
.danger-link {
    color: #fca5a5;
}

.danger-action {
    border-color: color-mix(in srgb, #ef4444 45%, var(--border));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .assessment-runtime-strip {
        grid-template-columns: 1fr;
    }

    .run-management-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

.connection-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.connection-security-note {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--surface-muted);
}

.connection-security-note h2 {
    margin: 0;
    color: var(--text-strong);
}

.connection-security-note p:not(.eyebrow) {
    margin: 0.65rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.connection-form {
    display: grid;
    gap: 1rem;
}

.connection-form fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.connection-form legend {
    padding: 0 0.35rem;
    color: var(--text-strong);
    font-weight: 800;
}

.connection-form label:not(.checkbox-field) {
    display: grid;
    gap: 0.35rem;
}

.connection-form label > span:first-child {
    color: var(--text-strong);
    font-weight: 700;
}

.connection-form input:not([type="checkbox"]) {
    width: 100%;
    min-height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 0.75rem;
    color: var(--text);
    background: var(--surface);
}

.connection-form .field-validation-error,
.connection-form .validation-summary {
    color: #fca5a5;
    font-size: 0.86rem;
}

.connection-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.assessment-run-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 1rem;
}

.assessment-score-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.assessment-score-panel h2 {
    margin: 0;
    font-size: 2.6rem;
}

.score-ring {
    width: 112px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, var(--surface) 58%, transparent 59%),
        conic-gradient(#4d7c0f calc(var(--score) * 1%), var(--surface-muted) 0);
}

.score-ring--large {
    width: 152px;
    background:
        radial-gradient(circle at center, var(--surface) 57%, transparent 58%),
        conic-gradient(#38bdf8 calc(var(--score) * 1%), color-mix(in srgb, var(--surface-muted) 78%, #64748b 22%) 0);
    box-shadow: inset 0 0 0 1px var(--border);
}

.score-ring span {
    color: var(--text-strong);
    font-weight: 800;
}

.score-ring--large span {
    font-size: 2.2rem;
}

.stacked-bar {
    display: flex;
    height: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted);
}

.stacked-bar--thick {
    height: 1.35rem;
}

.stacked-bar > span {
    min-width: 2px;
}

.stacked-bar > span.critical,
.stacked-bar__segment.critical,
.chart-legend i.critical {
    background: #ef4444;
}

.stacked-bar > span.high,
.stacked-bar__segment.high,
.chart-legend i.high {
    background: #f97316;
}

.stacked-bar > span.medium,
.stacked-bar__segment.medium,
.chart-legend i.medium {
    background: #f59e0b;
}

.stacked-bar > span.low,
.stacked-bar__segment.low,
.chart-legend i.low {
    background: #38bdf8;
}

.stacked-bar > span.informational,
.stacked-bar__segment.informational,
.chart-legend i.informational {
    background: #64748b;
}

.chart-legend i.fail {
    background: #ef4444;
}

.chart-legend i.needs-review {
    background: #f59e0b;
}

.chart-legend i.manual {
    background: #60a5fa;
}

.chart-legend i.pass {
    background: #22c55e;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    margin-top: 0.8rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chart-legend i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
}

.chart-legend--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-legend--grid span {
    justify-content: space-between;
}

.chart-legend--grid i {
    flex: 0 0 auto;
}

.radial-meter,
.status-donut {
    width: 144px;
    aspect-ratio: 1;
    justify-self: center;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--surface) 56%, transparent 57%),
        conic-gradient(#38bdf8 calc(var(--value) * 1%), var(--surface-muted) 0);
}

.status-donut {
    display: grid;
    background:
        radial-gradient(circle at center, var(--surface) 56%, transparent 57%),
        var(--donut);
}

.chartjs-enabled .status-donut,
.chartjs-enabled .trend-bars {
    display: none;
}

.radial-meter span,
.status-donut span {
    color: var(--text-strong);
    font-size: 2rem;
    font-weight: 800;
}

.radial-meter small,
.status-donut small {
    margin-top: 2.8rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    position: absolute;
}

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

.coverage-pair span {
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface-muted);
}

.coverage-pair strong {
    display: block;
    color: var(--text-strong);
    font-size: 1.3rem;
}

.trend-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 0.6rem;
    align-items: end;
    min-height: 160px;
}

.trend-bar {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    color: var(--muted);
    text-decoration: none;
}

.trend-bar__plot {
    display: flex;
    align-items: end;
    width: 100%;
    height: 108px;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
}

.trend-bar__plot i {
    display: block;
    width: 100%;
    min-height: 4px;
    border-radius: 5px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
}

.trend-bar strong {
    color: var(--text-strong);
}

.trend-bar small {
    font-size: 0.75rem;
}

.risk-ranking {
    display: grid;
    gap: 0.8rem;
}

.risk-rank-row {
    display: grid;
    gap: 0.45rem;
}

.risk-rank-row strong {
    color: var(--text-strong);
}

.risk-rank-row span {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.risk-rank-bar {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted);
}

.risk-rank-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #f97316, #ef4444);
}

.blocker-list {
    display: grid;
    gap: 0.65rem;
}

.blocker-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 0.7rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    background: var(--surface-muted);
}

.blocker-row:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.blocker-row strong {
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocker-row em {
    grid-column: 2;
    color: var(--muted);
    font-style: normal;
    font-size: 0.86rem;
}

.assessment-next-steps ol {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assessment-next-steps li {
    position: relative;
    padding: 0.8rem 0.8rem 0.8rem 2.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
}

.assessment-next-steps li::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 0.95rem;
    width: 0.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #22c55e;
}

.assessment-next-steps li.active::before {
    background: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16);
}

.assessment-next-steps strong,
.assessment-next-steps span {
    display: block;
}

.assessment-next-steps strong {
    color: var(--text-strong);
}

.assessment-next-steps span {
    margin-top: 0.2rem;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 1200px) {
    .assessment-command-grid,
    .assessment-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assessment-readiness-hero,
    .assessment-area-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .assessment-command-grid,
    .assessment-analytics-grid,
    .assessment-workbench {
        grid-template-columns: 1fr;
    }

    .assessment-readiness-hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .score-ring--large {
        width: 132px;
    }

    .assessment-chart-canvas,
    .assessment-chart-canvas--wide {
        min-height: 210px;
    }

    .assessment-chart-canvas--compact {
        min-height: 170px;
    }

    .chart-legend--grid,
    .coverage-pair {
        grid-template-columns: 1fr;
    }

    .blocker-row {
        grid-template-columns: 1fr;
    }

    .blocker-row em {
        grid-column: auto;
    }
}

.status-list,
.area-risk-chart {
    display: grid;
    gap: 0.7rem;
}

.status-row,
.area-risk-row {
    display: grid;
    align-items: center;
    gap: 0.75rem;
}

.status-row {
    grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem;
}

.mini-bar,
.area-risk-bar {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-muted);
}

.mini-bar span,
.area-risk-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #4d7c0f;
}

.area-risk-row {
    grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1fr) auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.area-risk-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.area-risk-row strong,
.area-risk-row span {
    display: block;
}

.area-risk-row span {
    color: var(--muted);
}

.area-risk-meta {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.data-table--users {
    min-width: 1120px;
}

@media (max-width: 1200px) {
    .migration-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .inventory-grid,
    .migration-grid,
    .assessment-run-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assessment-company-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .connection-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .section-head {
        flex-direction: column;
    }

    .inventory-metric,
    .signal-row,
    .migration-summary-grid,
    .inventory-grid,
    .migration-grid,
    .dashboard-split,
    .assessment-run-dashboard,
    .assessment-company-settings,
    .area-risk-row {
        grid-template-columns: 1fr;
    }

    .inventory-value,
    .signal-count,
    .area-risk-meta {
        min-width: 0;
        text-align: left;
        justify-content: flex-start;
    }

    .assessment-company-picker {
        display: grid;
    }

    .connection-form fieldset {
        grid-template-columns: 1fr;
    }
}