:root {
    --cv-background: #f4f7f7;
    --cv-surface: #ffffff;
    --cv-surface-subtle: #edf3f4;
    --cv-primary: #286873;
    --cv-primary-hover: #205762;
    --cv-primary-soft: #e2eef0;
    --cv-text: #1f2b2d;
    --cv-muted: #647578;
    --cv-border: #d7e1e2;
    --cv-border-strong: #aebdc0;
    --cv-warning: #b27418;
    --cv-warning-soft: #fff3d8;
    --cv-success: #2e7d55;
    --cv-success-soft: #e2f0e8;
    --cv-danger: #a84636;
    --cv-danger-soft: #f8e7e3;
    --cv-focus: #83b6be;
}

html, body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: var(--cv-background);
    color: var(--cv-text);
}

a, .btn-link {
    color: var(--cv-primary);
}

.btn-primary {
    color: var(--cv-surface);
    background-color: var(--cv-primary);
    border-color: var(--cv-primary);
    border-radius: 6px;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
    color: var(--cv-surface);
    background-color: var(--cv-primary-hover);
    border-color: var(--cv-primary-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--cv-surface);
    background-color: var(--cv-primary);
    border-color: var(--cv-primary);
    opacity: 0.58;
}

.btn-outline-primary {
    color: var(--cv-primary);
    border-color: var(--cv-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
    color: var(--cv-surface);
    background-color: var(--cv-primary);
    border-color: var(--cv-primary);
}

.btn-outline-secondary {
    color: var(--cv-text);
    border-color: var(--cv-border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active {
    color: var(--cv-text);
    background-color: var(--cv-surface-subtle);
    border-color: var(--cv-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--cv-surface), 0 0 0 0.25rem var(--cv-focus);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cv-primary);
}

.content {
    width: min(1440px, 100%);
    padding-top: 2rem;
    padding-bottom: 3rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.heading-actions,
.document-toolbar-actions,
.document-toolbar-leading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.document-filter-bar {
    grid-template-columns: minmax(260px, 1.2fr) repeat(6, minmax(140px, 0.7fr));
}

.document-view-switch {
    display: inline-flex;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.3rem;
    border: 1px solid #d9e1e3;
    border-radius: 12px;
    background: #f3f6f7;
}

.document-view-switch button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #536166;
    font-weight: 700;
}

.document-view-switch button.active {
    background: #fff;
    color: #155d66;
    box-shadow: 0 1px 5px rgb(35 67 72 / 12%);
}

.document-view-switch button span {
    min-width: 1.7rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: #dfeaec;
    color: #245e68;
    font-size: 0.76rem;
    text-align: center;
}

.document-table {
    overflow-x: auto;
    border: 1px solid #d8dfe1;
    border-radius: 6px;
    background: #fff;
}

.document-table-header,
.document-row {
    display: grid;
    grid-template-columns: minmax(250px, 1.6fr) 70px minmax(150px, 0.9fr) minmax(170px, 1fr) 100px 80px 120px 110px minmax(110px, auto);
    gap: 1rem;
    align-items: center;
    min-width: 1300px;
}

.document-table-header {
    min-height: 46px;
    padding: 0.7rem 1rem;
    background: #e9eef0;
    color: #465458;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.document-row {
    min-height: 76px;
    padding: 0.85rem 1rem;
    border-top: 1px solid #e2e7e8;
}

.document-row:hover {
    background: #f8fafb;
}

.document-identity {
    min-width: 0;
}

.document-identity strong,
.document-identity small {
    display: block;
}

.document-identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-identity small {
    margin-top: 0.25rem;
    color: #6c787b;
}

.document-type-badge,
.document-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.document-type-badge {
    background: #e2eef0;
    color: #245e68;
}

.document-status.draft {
    background: #e8ecee;
    color: #536166;
}

.document-status.review {
    background: #fff0ce;
    color: #805b12;
}

.document-status.reviewed {
    background: #e3edf5;
    color: #315d7b;
}

.document-status.released {
    background: #dfeee5;
    color: #246b49;
}

.document-status.template {
    background: #e8e3f5;
    color: #5b4382;
}

.document-editor-toolbar {
    display: flex;
    position: sticky;
    z-index: 10;
    top: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.5rem 0 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #d8dfe1;
    background: #f4f6f7;
}

.document-toolbar-leading > div {
    display: grid;
    gap: 0.2rem;
}

.document-toolbar-leading strong {
    max-width: 260px;
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.document-editor-message,
.document-editor-notice {
    margin: 0 auto 1rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid;
    background: #fff;
    max-width: 1120px;
}

.document-editor-message.success {
    border-color: #2e8b5c;
    color: #246b49;
}

.document-editor-message.error {
    border-color: #b64d3b;
    color: #873527;
}

.document-editor-notice {
    border-color: #b67a17;
    color: #76500f;
}

.workflow-dialog-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(24, 34, 36, 0.52);
}

.workflow-dialog {
    width: min(560px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid #aebbc0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(24, 34, 36, 0.24);
}

.workflow-dialog > header,
.workflow-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.workflow-dialog h2 {
    margin: 0;
    font-size: 1.15rem;
}

.workflow-dialog > p {
    margin: 1rem 0;
    color: #59676a;
}

.workflow-dialog select {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #aebbc0;
    border-radius: 4px;
    background: #fff;
    color: #1f2b2d;
}

.workflow-reviewer-options {
    display: grid;
    gap: 0.4rem;
    max-height: 280px;
    margin: 0;
    padding: 0.75rem;
    overflow-y: auto;
    border: 1px solid #aebbc0;
    border-radius: 4px;
}

.workflow-reviewer-options legend {
    padding: 0 0.35rem;
    color: #455357;
    font-size: 0.8rem;
    font-weight: 700;
}

.workflow-reviewer-options label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding: 0.45rem;
}

.workflow-reviewer-options input {
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
}

.workflow-dialog > footer {
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.workflow-dialog-close {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #455357;
    font-size: 1.45rem;
    line-height: 1;
}

.workflow-dialog-close:hover,
.workflow-dialog-close:focus-visible {
    border-color: #aebbc0;
    background: #edf1f2;
}

.workflow-dialog-warning {
    padding: 0.75rem;
    border-left: 3px solid #b67a17;
    background: #fff8e8;
    color: #76500f !important;
}

.document-validation {
    max-width: 1120px;
    margin: 0 auto 1rem;
}

.document-sheet {
    width: min(1120px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #bcc6c9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(31, 43, 45, 0.08);
}

.document-sheet label {
    display: grid;
    gap: 0.35rem;
}

.document-sheet label > span,
.change-summary-field > span {
    color: #526064;
    font-size: 0.74rem;
    font-weight: 700;
}

.document-sheet input,
.document-sheet select,
.document-sheet textarea {
    width: 100%;
    min-height: 39px;
    padding: 0.5rem 0.65rem;
    border: 1px solid #aebbc0;
    border-radius: 3px;
    background: #fff;
    color: #1f2b2d;
}

.document-sheet input:focus,
.document-sheet select:focus,
.document-sheet textarea:focus {
    outline: 2px solid #83b6be;
    outline-offset: 1px;
    border-color: #286873;
}

.document-sheet input:disabled,
.document-sheet select:disabled,
.document-sheet textarea:disabled {
    opacity: 1;
    border-color: #d6dddf;
    background: #f5f7f7;
    color: #344145;
}

.system-managed-note {
    color: #667579;
    font-size: 0.7rem;
    line-height: 1.35;
}

.document-template-header {
    display: grid;
    grid-template-columns: 220px minmax(320px, 1fr) 250px;
    min-height: 190px;
    border-bottom: 2px solid #273538;
}

.document-template-header > div {
    padding: 1.1rem;
}

.document-template-header > div + div {
    border-left: 1px solid #bcc6c9;
}

.document-logo-cell {
    display: grid;
    place-items: center;
}

.document-logo-cell img {
    display: block;
    width: 100%;
    max-width: 185px;
    height: auto;
}

.document-title-cell {
    display: grid;
    align-content: center;
    gap: 1rem;
}

.document-title-cell input {
    min-height: 48px;
    font-size: 1.15rem;
    font-weight: 700;
}

.document-meta-cell {
    display: grid;
    align-content: center;
    gap: 0.7rem;
}

.document-general-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(160px, 0.8fr) minmax(250px, 1.2fr) 160px 160px;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #bcc6c9;
    background: #f6f8f8;
}

.document-device-links {
    padding: 1.1rem 1.25rem 1.25rem;
    border-bottom: 1px solid #bcc6c9;
    background: #fbfcfc;
}

.document-device-links > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.document-device-links h2 {
    margin: 0;
    font-size: 0.95rem;
}

.document-device-links header p {
    margin: 0.2rem 0 0;
    color: #697579;
    font-size: 0.78rem;
}

.document-device-links header > strong {
    white-space: nowrap;
    color: #286873;
    font-size: 0.82rem;
}

.document-device-search {
    margin-bottom: 0.75rem;
}

.document-device-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid #d6dddf;
    background: #f5f7f7;
}

.document-device-option {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem !important;
    min-height: 62px;
    padding: 0.65rem;
    border: 1px solid #d6dddf;
    border-radius: 3px;
    background: #fff;
}

.document-device-option:has(input:checked) {
    border-color: #55929c;
    background: #edf6f7;
}

.document-device-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0.1rem 0 0;
    accent-color: #286873;
}

.document-device-option > span,
.document-device-option strong,
.document-device-option small {
    display: block;
    min-width: 0;
}

.document-device-option strong {
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-device-option small {
    margin-top: 0.2rem;
    color: #6a767a;
    font-size: 0.72rem;
}

.document-numbered-section {
    padding: 1.35rem 1.5rem 1.5rem;
    border-top: 1px solid #d6dddf;
}

.document-general-grid + .document-numbered-section {
    border-top: 0;
}

.document-numbered-section > header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.85rem;
}

.document-numbered-section > header > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: #263b40;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.document-numbered-section h2 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.document-numbered-section header p {
    margin: 0.2rem 0 0;
    color: #6a767a;
    font-size: 0.8rem;
}

.document-section-content textarea {
    min-height: 125px;
    resize: vertical;
}

.list-text-editor {
    overflow: hidden;
    border: 1px solid #aebbc0;
    border-radius: 3px;
    background: #fff;
}

.list-text-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 42px;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #d6dddf;
    background: #f5f7f7;
}

.list-text-toolbar button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #344145;
}

.list-text-toolbar button:hover,
.list-text-toolbar button:focus-visible {
    border-color: #91a3a8;
    background: #e5ebed;
}

.list-text-toolbar button:focus-visible {
    outline: 2px solid #83b6be;
    outline-offset: 1px;
}

.list-tool-symbol {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
}

.list-tool-bullet {
    font-size: 1.35rem;
}

.list-toolbar-separator {
    width: 1px;
    height: 22px;
    margin: 0 0.2rem;
    background: #cbd4d7;
}

.list-text-editor textarea {
    display: block;
    border: 0;
    border-radius: 0;
}

.list-text-editor textarea:focus {
    outline: 0;
    border-color: transparent;
}

.list-text-editor:focus-within {
    outline: 2px solid #83b6be;
    outline-offset: 1px;
    border-color: #286873;
}

.list-text-editor:has(textarea:disabled) {
    border-color: #d6dddf;
    background: #f5f7f7;
}

.document-section-large .document-section-content textarea {
    min-height: 260px;
}

.abbreviation-table,
.document-history-table {
    overflow-x: auto;
    border: 1px solid #d6dddf;
}

.abbreviation-header,
.abbreviation-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.45fr) minmax(320px, 1fr) 105px;
    gap: 0.75rem;
    align-items: center;
    min-width: 650px;
    padding: 0.65rem;
}

.abbreviation-header,
.document-history-header {
    background: #e9eef0;
    color: #465458;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.abbreviation-row {
    border-top: 1px solid #e2e7e8;
}

.change-summary-field {
    margin: 0 0 1rem 2.75rem;
}

.change-summary-field textarea {
    min-height: 80px;
    resize: vertical;
}

.document-history-header,
.document-history-row {
    display: grid;
    grid-template-columns: 70px 135px 175px minmax(170px, 0.8fr) minmax(260px, 1.2fr);
    gap: 0.75rem;
    align-items: start;
    min-width: 900px;
    padding: 0.7rem;
}

.document-history-row {
    border-top: 1px solid #e2e7e8;
    font-size: 0.82rem;
}

.document-inline-empty {
    margin: 0;
    padding: 1rem;
    color: #6a767a;
}

.document-workflow-assignment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #bcc6c9;
    background: #f3f6f7;
}

.document-workflow-assignment > div {
    display: grid;
    gap: 0.35rem;
    min-height: 82px;
    padding: 1rem 1.25rem;
}

.document-workflow-assignment > div + div {
    border-left: 1px solid #bcc6c9;
}

.document-workflow-assignment span {
    color: #687579;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.document-workflow-assignment strong {
    display: grid;
    gap: 0.15rem;
    font-size: 0.9rem;
}

.document-workflow-assignment strong small {
    color: #687579;
    font-size: 0.72rem;
    font-weight: 400;
}

.document-approval-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid #273538;
}

.document-approval-grid > div {
    display: grid;
    align-content: start;
    min-height: 115px;
    padding: 1rem 1.25rem;
}

.document-approval-grid > div + div {
    border-left: 1px solid #bcc6c9;
}

.document-approval-grid span,
.document-approval-grid small {
    color: #687579;
}

.document-approval-grid span {
    margin-bottom: 0.75rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.document-approval-grid strong {
    font-size: 0.92rem;
}

.document-approval-grid small {
    margin-top: 0.3rem;
}

@media (max-width: 1000px) {
    .document-editor-toolbar {
        position: static;
        align-items: flex-start;
    }

    .document-template-header {
        grid-template-columns: 180px minmax(280px, 1fr);
    }

    .document-meta-cell {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid #bcc6c9;
        border-left: 0 !important;
    }

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

@media (max-width: 760px) {
    .document-page-heading,
    .document-editor-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .heading-actions,
    .document-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .heading-actions .btn,
    .document-toolbar-actions .btn {
        width: 100%;
    }

    .document-filter-bar {
        grid-template-columns: 1fr;
    }

    .document-template-header {
        grid-template-columns: 1fr;
    }

    .document-template-header > div + div {
        border-top: 1px solid #bcc6c9;
        border-left: 0;
    }

    .document-logo-cell img {
        max-width: 210px;
    }

    .document-meta-cell,
    .document-general-grid,
    .document-workflow-assignment,
    .document-approval-grid {
        grid-template-columns: 1fr;
    }

    .document-device-options {
        grid-template-columns: 1fr;
    }

    .document-device-links > header {
        align-items: stretch;
        flex-direction: column;
    }

    .document-meta-cell {
        grid-column: auto;
    }

    .document-approval-grid > div + div {
        border-top: 1px solid #bcc6c9;
        border-left: 0;
    }

    .document-workflow-assignment > div + div {
        border-top: 1px solid #bcc6c9;
        border-left: 0;
    }

    .document-numbered-section {
        padding: 1.1rem 1rem 1.25rem;
    }

    .document-numbered-section > header {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .document-numbered-section > header .btn {
        grid-column: 2;
        justify-self: start;
    }

    .change-summary-field {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .heading-actions,
    .document-toolbar-actions {
        grid-template-columns: 1fr;
    }
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.page-heading h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.page-heading p {
    margin: 0.35rem 0 0;
    color: #667377;
}

.page-heading-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.eyebrow {
    margin-bottom: 0.35rem !important;
    color: #286873 !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.summary-card {
    min-height: 118px;
    padding: 1.25rem;
    border: 1px solid #d8dfe1;
    border-left: 4px solid #286873;
    border-radius: 6px;
    background: #fff;
}

.summary-card-warning {
    border-left-color: #b67a17;
}

.summary-card strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 2rem;
    line-height: 1;
}

.summary-label {
    color: #667377;
    font-size: 0.88rem;
}

.workspace-section {
    padding: 1.5rem 0;
    border-top: 1px solid #d8dfe1;
    border-bottom: 1px solid #d8dfe1;
}

.personal-inbox-section {
    margin-top: 1.5rem;
    padding-bottom: 0;
}

.training-entry-section {
    padding: 1.5rem 0;
}

.training-code-form {
    display: grid;
    grid-template-columns: minmax(240px, 360px) auto;
    align-items: end;
    justify-content: start;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.training-code-field {
    display: grid;
    gap: 0.4rem;
    color: var(--cv-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.training-code-field input {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cv-border-strong);
    border-radius: 5px;
    background: var(--cv-surface);
    color: var(--cv-text);
    font-size: 1rem;
    letter-spacing: 0;
}

.training-code-field input:focus {
    border-color: var(--cv-primary);
    outline: 2px solid var(--cv-focus);
    outline-offset: 1px;
}

.training-code-note {
    display: block;
    margin-top: 0.55rem;
    color: var(--cv-muted);
}

.training-entry-section .form-status {
    max-width: 620px;
}

.notification-count {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    background: #e8ecee;
    color: #536166;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.notification-count.has-items {
    background: #fff0ce;
    color: #805b12;
}

.notification-list {
    margin-top: 1.25rem;
    border-top: 1px solid #d8dfe1;
}

.notification-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 24px;
    gap: 0.85rem;
    align-items: center;
    min-height: 82px;
    padding: 0.85rem 0;
    border-bottom: 1px solid #d8dfe1;
    color: #263437;
    text-decoration: none;
}

.notification-item:hover {
    background: #f8fafb;
    color: #263437;
}

.notification-item.unread {
    box-shadow: inset 3px 0 #b67a17;
}

.notification-item-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: #e3edf0;
    color: #286873;
    font-size: 0.8rem;
    font-weight: 800;
}

.notification-item-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.notification-item-copy span,
.notification-item-copy small {
    color: #657276;
}

.notification-item-copy span {
    overflow-wrap: anywhere;
}

.notification-unread-label {
    color: #805b12;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.notification-open-icon {
    color: #687579;
    font-size: 1.5rem;
}

.personal-inbox-empty {
    margin: 1.25rem 0 0;
    padding: 1rem 0;
    border-top: 1px solid #d8dfe1;
    color: #667377;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.section-heading h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.section-heading p {
    margin: 0;
    color: #667377;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: #246b49;
    font-weight: 600;
}

.status-indicator span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #2e8b5c;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px);
    gap: 1rem;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid #d8dfe1;
}

.filter-bar label {
    display: grid;
    gap: 0.4rem;
    color: #4f5d61;
    font-size: 0.82rem;
    font-weight: 600;
}

.filter-bar input,
.filter-bar select {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #b9c4c7;
    border-radius: 5px;
    background: #fff;
    color: #1f2b2d;
}

.device-table {
    overflow-x: auto;
    border: 1px solid #d8dfe1;
    border-radius: 6px;
    background: #fff;
}

.device-table-header,
.device-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(150px, 0.9fr) minmax(170px, 1fr) minmax(150px, 0.9fr) minmax(170px, 1fr) 105px 80px;
    gap: 1rem;
    align-items: center;
    min-width: 1200px;
}

.device-filter-bar {
    grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(170px, 0.7fr));
}

.device-assignment-panel {
    padding: 1.4rem 0;
    border-top: 1px solid #c9d2d4;
    border-bottom: 1px solid #c9d2d4;
}

.device-assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 420px));
    gap: 1rem;
    margin-top: 1rem;
}

.device-description-field {
    display: grid;
    margin-top: 1.25rem;
}

.device-description-field textarea {
    min-height: 10rem;
    resize: vertical;
}

.device-resource-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.device-resource-heading h3,
.device-resource-heading p {
    margin: 0;
}

.device-resource-heading p {
    color: #687678;
    margin-top: 0.25rem;
}

.device-resource-editor-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.device-resource-editor {
    align-items: end;
    border-top: 1px solid #d9e1e2;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 9rem minmax(12rem, 1fr) minmax(16rem, 1.4fr) minmax(12rem, 1fr) auto;
    padding-top: 0.9rem;
}

.device-resource-editor .form-field {
    min-width: 0;
}

.device-resource-remove,
.device-resource-open {
    margin-bottom: 0.1rem;
}

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

.training-report-own-filter {
    align-items: center;
    align-self: end;
    display: flex;
    gap: 0.55rem;
    min-height: 2.6rem;
}

.training-report-own-filter input {
    height: 1.15rem;
    width: 1.15rem;
}

@media (max-width: 1100px) {
    .device-resource-editor {
        grid-template-columns: 9rem minmax(12rem, 1fr) minmax(15rem, 1fr) auto;
    }

    .device-resource-description {
        grid-column: 1 / -2;
    }
}

@media (max-width: 720px) {
    .device-resource-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    .device-resource-editor {
        grid-template-columns: 1fr;
    }

    .device-resource-description {
        grid-column: auto;
    }
}

.device-assignment-grid input,
.device-assignment-grid select {
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #b9c4c7;
    border-radius: 5px;
    background: #fff;
}

.device-assignment-panel .form-actions {
    margin-top: 1rem;
}

.device-profile-details {
    max-width: 860px;
}

.audit-metadata,
.audit-workflow {
    display: grid;
    margin-bottom: 1.5rem;
    border: 1px solid #d8dfe1;
    background: #fff;
}

.audit-metadata {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.audit-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.audit-metadata > div,
.audit-workflow > article {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    min-height: 92px;
    padding: 1rem;
}

.audit-metadata > div + div,
.audit-workflow > article + article {
    border-left: 1px solid #d8dfe1;
}

.audit-metadata span,
.audit-workflow span {
    color: #667377;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.audit-workflow small {
    color: #667377;
}

.audit-history-section {
    padding-top: 0.25rem;
}

.audit-table,
.training-report-table {
    overflow-x: auto;
    border: 1px solid #d8dfe1;
    border-radius: 6px;
    background: #fff;
}

.audit-table-header,
.audit-row {
    display: grid;
    grid-template-columns: 90px 145px minmax(180px, 0.8fr) minmax(190px, 0.9fr) minmax(300px, 1.6fr);
    gap: 1rem;
    align-items: start;
    min-width: 1000px;
    padding: 0.8rem 1rem;
}

.audit-table-header,
.training-report-table-header {
    background: #e9eef0;
    color: #465458;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.audit-row {
    min-height: 64px;
    border-top: 1px solid #e2e7e8;
    font-size: 0.84rem;
}

.training-report-filter {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) repeat(5, minmax(150px, 0.75fr)) auto;
    gap: 0.8rem;
    align-items: end;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid #d8dfe1;
}

.training-report-filter label {
    display: grid;
    gap: 0.4rem;
    color: #4f5d61;
    font-size: 0.8rem;
    font-weight: 600;
}

.training-report-filter input,
.training-report-filter select {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    border: 1px solid #b9c4c7;
    border-radius: 5px;
    background: #fff;
}

.report-privacy-note {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border-left: 3px solid #286873;
    background: #edf4f5;
    color: #435357;
    font-size: 0.84rem;
}

.training-report-table-header,
.training-report-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 130px minmax(220px, 1.2fr) 160px 150px minmax(190px, 1fr) 140px 110px;
    gap: 1rem;
    align-items: start;
    min-width: 1420px;
    padding: 0.8rem 1rem;
}

.training-report-row {
    min-height: 68px;
    border-top: 1px solid #e2e7e8;
    font-size: 0.82rem;
}

.device-table-header {
    min-height: 46px;
    padding: 0.7rem 1rem;
    background: #e9eef0;
    color: #465458;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.device-row {
    min-height: 78px;
    padding: 0.85rem 1rem;
    border-top: 1px solid #e2e7e8;
}

.device-row:hover {
    background: #f8fafb;
}

.device-name {
    min-width: 0;
}

.device-name strong,
.device-name small {
    display: block;
}

.device-name small {
    margin-top: 0.25rem;
    overflow: hidden;
    color: #6c787b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.requirement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
}

.requirement-badge.required {
    background: #f8e7df;
    color: #8c3f25;
}

.requirement-badge.optional {
    background: #e5eaec;
    color: #566367;
}

.empty-state {
    margin: 0;
    padding: 2rem;
    color: #667377;
    text-align: center;
}

.user-editor {
    margin-bottom: 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid #c9d2d4;
    border-bottom: 1px solid #c9d2d4;
}

.user-editor .section-heading {
    margin-bottom: 1.25rem;
}

.user-form-grid {
    display: grid;
    grid-template-columns: 160px repeat(2, minmax(220px, 1fr));
    gap: 1rem;
}

.form-field {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    color: #4f5d61;
    font-size: 0.82rem;
    font-weight: 600;
}

.form-field:first-child,
.form-field:nth-child(2) {
    grid-column: span 1;
}

.form-field:first-child {
    grid-column: span 2;
}

.form-field input {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #b9c4c7;
    border-radius: 5px;
    background: #fff;
    color: #1f2b2d;
    font-size: 0.95rem;
    font-weight: 400;
}

.permission-fieldset {
    margin: 1.25rem 0 0;
    padding: 0;
    border: 0;
}

.permission-fieldset legend {
    margin-bottom: 0.6rem;
    color: #4f5d61;
    font-size: 0.82rem;
    font-weight: 700;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 0.55rem 1rem;
}

.permission-note {
    display: block;
    margin-top: 0.6rem;
    color: #667377;
}

.permission-option,
.active-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    color: #263437;
}

.permission-option input,
.active-option input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #286873;
}

.active-option {
    margin-top: 1rem;
    font-weight: 600;
}

.initial-password-notice,
.password-reset-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border-left: 3px solid #c58a22;
    background: #fff8e8;
}

.initial-password-notice span,
.password-reset-panel > div:first-child,
.password-reset-panel > div:first-child span {
    display: block;
}

.initial-password-notice code,
.password-reset-panel code {
    color: #6f4b0c;
    font-size: 0.95em;
}

.password-reset-panel > div:first-child span,
.password-reset-panel small {
    margin-top: 0.2rem;
    color: #675d4b;
    font-size: 0.82rem;
}

.password-reset-confirmation {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.form-status {
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid;
    background: #fff;
}

.form-status.error {
    border-left-color: #b64332;
    color: #8c3024;
}

.form-status.success {
    border-left-color: #2e8b5c;
    color: #246b49;
}

.user-filter-bar {
    grid-template-columns: minmax(300px, 1fr) minmax(180px, 240px);
}

.user-table {
    overflow-x: auto;
    border: 1px solid #d8dfe1;
    border-radius: 6px;
    background: #fff;
}

.user-table-header,
.user-row {
    display: grid;
    min-width: 890px;
    grid-template-columns:
        minmax(190px, 1fr)
        165px
        165px
        minmax(190px, 1.2fr)
        65px
        92px;
    gap: 0.65rem;
    align-items: center;
}

.user-table-header > *,
.user-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.user-table-header {
    min-height: 46px;
    padding: 0.7rem 0.75rem;
    background: #e9eef0;
    color: #465458;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-row {
    min-height: 72px;
    padding: 0.8rem 0.75rem;
    border-top: 1px solid #e2e7e8;
    font-size: 0.88rem;
}

.user-row:hover {
    background: #f8fafb;
}

.role-list {
    color: #59676a;
}

.user-identity strong,
.user-identity small {
    display: block;
}

.user-identity small {
    margin-top: 0.2rem;
    color: #657276;
    font-size: 0.78rem;
}

.account-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 700;
}

.account-status.active {
    background: #e3f1e9;
    color: #246b49;
}

.account-status.inactive {
    background: #eceff0;
    color: #647175;
}

.account-status.initial {
    background: #fff0ce;
    color: #805b12;
}

.row-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    text-align: right;
}

.profile-details {
    display: grid;
    grid-template-columns: minmax(140px, 190px) minmax(220px, 520px);
    margin-top: 1.25rem;
    border-top: 1px solid #d8dfe1;
}

.profile-details dt,
.profile-details dd {
    margin: 0;
    padding: 0.85rem 0;
    border-bottom: 1px solid #d8dfe1;
}

.profile-details dt {
    color: #59676a;
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .page-heading,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        width: 100%;
    }

    .summary-grid,
    .filter-bar,
    .device-filter-bar,
    .training-report-filter,
    .device-assignment-grid,
    .audit-metadata,
    .audit-workflow,
    .user-form-grid,
    .permission-grid {
        grid-template-columns: 1fr;
    }

    .audit-metadata > div + div,
    .audit-workflow > article + article {
        border-top: 1px solid #d8dfe1;
        border-left: 0;
    }

    .form-field:first-child,
    .form-field:nth-child(2) {
        grid-column: auto;
    }

    .device-table-header,
    .user-table-header {
        display: none;
    }

    .device-row,
    .user-row {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .row-action {
        justify-content: flex-start;
        text-align: left;
    }

    .notification-item {
        grid-template-columns: 34px minmax(0, 1fr) 20px;
    }

    .notification-unread-label {
        display: none;
    }

    .training-code-form {
        grid-template-columns: 1fr;
    }

    .training-code-form .btn {
        width: 100%;
    }
}

/* Shared CliniVeris color system. Component layout stays defined above. */
::selection {
    background: var(--cv-primary-soft);
    color: var(--cv-text);
}

a:hover {
    color: var(--cv-primary-hover);
}

.form-control,
.form-select,
.filter-bar input,
.filter-bar select,
.training-report-filter input,
.training-report-filter select,
.device-assignment-grid input,
.device-assignment-grid select,
.form-field input,
.document-sheet input,
.document-sheet select,
.document-sheet textarea,
.workflow-dialog select {
    border-color: var(--cv-border-strong);
    background-color: var(--cv-surface);
    color: var(--cv-text);
}

.form-control:focus,
.form-select:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.training-report-filter input:focus,
.training-report-filter select:focus,
.device-assignment-grid input:focus,
.device-assignment-grid select:focus,
.form-field input:focus,
.workflow-dialog select:focus {
    border-color: var(--cv-primary);
    outline: 2px solid var(--cv-focus);
    outline-offset: 1px;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--cv-primary);
    border-color: var(--cv-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--cv-primary);
}

.summary-card,
.document-table,
.device-table,
.user-table,
.audit-table,
.training-report-table,
.audit-metadata,
.audit-workflow,
.document-sheet,
.workflow-dialog,
.document-editor-message,
.document-editor-notice,
.form-status {
    border-color: var(--cv-border);
    background-color: var(--cv-surface);
}

.document-table-header,
.device-table-header,
.user-table-header,
.audit-table-header,
.training-report-table-header,
.abbreviation-header,
.document-history-header {
    background: var(--cv-surface-subtle);
    color: #46585b;
}

.document-row,
.device-row,
.user-row,
.audit-row,
.training-report-row,
.abbreviation-row,
.document-history-row,
.notification-item,
.profile-details,
.profile-details dt,
.profile-details dd,
.workspace-section,
.filter-bar,
.training-report-filter {
    border-color: var(--cv-border);
}

.document-row:hover,
.device-row:hover,
.user-row:hover,
.notification-item:hover {
    background: #f8fbfb;
}

.eyebrow,
.document-device-links header > strong {
    color: var(--cv-primary) !important;
}

.page-heading p,
.section-heading p,
.summary-label,
.personal-inbox-empty,
.empty-state,
.document-identity small,
.device-name small,
.role-list,
.profile-details dt,
.form-field,
.filter-bar label,
.training-report-filter label {
    color: var(--cv-muted);
}

.summary-card {
    border-left-color: var(--cv-primary);
}

.summary-card-warning,
.notification-item.unread {
    border-left-color: var(--cv-warning);
}

.notification-count.has-items,
.document-status.review,
.account-status.initial {
    background: var(--cv-warning-soft);
    color: #76500f;
}

.document-status.released,
.account-status.active {
    background: var(--cv-success-soft);
    color: #246b49;
}

.requirement-badge.required {
    background: var(--cv-danger-soft);
    color: #873527;
}

.document-type-badge,
.notification-item-icon,
.report-privacy-note,
.document-device-option:has(input:checked) {
    background: var(--cv-primary-soft);
    color: var(--cv-primary);
}

.report-privacy-note,
.document-device-option:has(input:checked),
.list-text-editor:focus-within {
    border-color: var(--cv-primary);
}

.document-numbered-section > header > span {
    background: var(--cv-primary);
}

.document-editor-toolbar {
    border-color: var(--cv-border);
    background: var(--cv-background);
}

.device-edit-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--cv-border);
}
.device-edit-section h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.device-edit-section h3 { font-size: 1rem; margin: 0; }
.device-edit-section .form-field { min-width: 0; }
.device-edit-section input:not([type=checkbox]), .device-edit-section textarea { max-width: 100%; width: 100%; }
.device-edit-section input[type=file] { font-size: 0.875rem; }
.device-edit-section textarea { font: inherit; padding: 0.75rem; border: 1px solid var(--cv-border); border-radius: 6px; color: var(--cv-text); }
.device-photo { width: 56px; height: 56px; flex: 0 0 56px; background: #f3f6f6; border: 1px solid var(--cv-border); border-radius: 6px; overflow: hidden; }
.device-photo img { width: 100%; height: 100%; object-fit: contain; background: white; }
.device-photo-large { width: 200px; height: 200px; flex-basis: 200px; max-width: 100%; }
.device-photo-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.5rem; color: var(--cv-muted); }
.device-photo-editor, .device-profile-overview { display: flex; gap: 1.5rem; align-items: center; margin: 1rem 0 1.5rem; }
.device-photo-editor > div:last-child { min-width: 0; flex: 1; }
.device-name-with-photo { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.device-name-with-photo > div:last-child { min-width: 0; }
.device-checkbox { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0; color: var(--cv-text); }
.device-checkbox input { width: 20px !important; height: 20px; flex-shrink: 0; accent-color: var(--cv-primary); }
.device-department-row { display: flex; gap: 0.75rem; align-items: end; max-width: 560px; margin: 0.75rem 0; }
.device-department-row label { flex: 1; }
.device-department-row button { width: 38px; height: 38px; flex: 0 0 38px; }
.device-save-actions { padding: 1.5rem 0; }
.device-profile-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.device-media-link { padding: 0.75rem 0; border-bottom: 1px solid var(--cv-border); }
.device-media-link p { color: var(--cv-muted); margin: 0.25rem 0 0; }
.device-management-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.device-management-filters > label { min-width: 0; width: 100%; }
.device-management-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(130px, 1.2fr) minmax(120px, 1fr) 70px 160px; min-width: 0; align-items: center; gap: 1rem; padding: 1rem 0.5rem; border-bottom: 1px solid var(--cv-border); overflow-wrap: anywhere; }
.device-management-row > * { min-width: 0; }
.device-management-row small { display: block; color: var(--cv-muted); font-size: 0.8rem; margin-top: 0.25rem; }
.device-management-row .form-actions { margin: 0; flex-wrap: wrap; }
.device-management-row:hover { background: #f8fbfb; }
.device-management-row .requirement-badge.required { background: var(--cv-success-soft); color: #246b49; }
@media (max-width: 1100px) {
    .device-management-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .device-management-row.device-table-header { display: none; }
    .device-management-row > :first-child { grid-column: 1 / -1; }
    .device-management-row > :last-child { grid-column: 1 / -1; }
    .device-management-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .device-photo-editor, .device-profile-overview { flex-direction: column; align-items: flex-start; }
    .device-photo-editor > div:last-child { width: 100%; }
    .device-profile-overview .profile-details { width: 100%; }
    .device-management-filters { grid-template-columns: minmax(0, 1fr); }
    .device-management-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.selection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.selection-actions > strong { margin-right: auto; }
.personal-pending-trainings summary { cursor: pointer; color: var(--cv-primary); padding: 0.5rem 0; }
.training-selection-list { border-top: 1px solid var(--cv-border); }
.training-selection-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--cv-border);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.training-selection-row:has(input:checked) { background: var(--cv-primary-soft); }
.training-selection-row input { width: 20px; height: 20px; accent-color: var(--cv-primary); }
.training-selection-row small, .training-needs-person small { display: block; color: var(--cv-muted); margin-top: 0.25rem; }
.training-authorization-result {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
    gap: 2rem;
    border-top: 1px solid var(--cv-border);
    padding-top: 1.5rem;
}
.training-authorization-result h2 { font-size: 1.25rem; }
.training-code-display { display: flex; flex-direction: column; align-items: center; text-align: center; }
.training-qr { width: 296px; height: auto; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; background: white; }
.manual-authorization-code { font-size: 2rem; font-variant-numeric: tabular-nums; margin: 0.4rem 0; letter-spacing: 0; }
.training-code-display .form-actions { justify-content: center; flex-wrap: wrap; }
.pending-device-list { list-style: none; padding: 0; margin: 0; }
.pending-device-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--cv-border); overflow-wrap: anywhere; }
.pending-device-list li > span { display: block; color: var(--cv-muted); font-size: 0.875rem; }
.pending-device-list li > strong { font-size: 0.875rem; }
.training-needs-person { border-bottom: 1px solid var(--cv-border); }
.staff-group-heading { font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }
.staff-group-heading span { color: var(--cv-muted); font-weight: normal; }
.staff-leadership-label { display: block; color: var(--cv-muted); margin-top: 0.25rem; overflow-wrap: anywhere; }
.training-needs-person summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.training-needs-person summary > span:first-child::before { content: "+ "; color: var(--cv-primary); }
.training-needs-person[open] summary > span:first-child::before { content: "- "; }
.training-needs-person .pending-device-list { margin: 0 0 1.5rem 1rem; }
.training-needs-person summary:focus-visible { outline: 2px solid var(--cv-primary); outline-offset: 2px; }
@media (max-width: 760px) {
    .training-authorization-result { grid-template-columns: minmax(0, 1fr); }
    .training-selection-row { grid-template-columns: 24px minmax(0, 1fr); gap: 0.75rem; }
    .training-selection-row > span:last-child { grid-column: 2; }
    .training-needs-person summary { grid-template-columns: minmax(0, 1fr) auto; }
    .training-needs-person summary > span:first-child { grid-column: 1 / -1; }
    .selection-actions > strong { flex-basis: 100%; }
}