.document-types-board {
    --document-types-surface: #ffffff;
    --document-types-surface-alt: #f6f4ef;
    --document-types-surface-hover: #f2eee6;
    --document-types-surface-head: #ece5d8;
    --document-types-border: #ddd3c2;
    --document-types-border-strong: #c9b99d;
    --document-types-text: #21303d;
    --document-types-muted: #667487;
    --document-types-selected: #e5f0ff;
    color: var(--document-types-text);
}

.document-types-board__table-toolbar,
.document-types-board__table-actions,
.document-types-board__footer-actions,
.document-types-board__editor-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.document-types-board__table-toolbar,
.document-types-board__editor-footer {
    justify-content: space-between;
}

.document-types-board__table-actions,
.document-types-board__footer-actions {
    justify-content: flex-end;
}

.document-types-board__create-btn,
.document-types-board__table-actions .btn,
.document-types-board__footer-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 1.1rem;
}

.document-types-board__editor {
    background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
    border: 1px solid var(--document-types-border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.document-types-board__table-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
    border: 1px solid var(--document-types-border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.document-types-board__table-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.document-types-board__editor + .document-types-board__table-card,
.document-types-board__table-card + .document-types-board__editor,
.document-types-board__table-toolbar + .document-types-board__editor {
    margin-top: 1rem;
}

.document-types-board__toolbar-status {
    min-height: 1rem;
}

.document-types-board__table-wrapper {
    background: var(--document-types-surface);
    border: 1px solid var(--document-types-border);
    overflow: auto;
}

.document-types-board__footer-actions {
    border-top: 1px solid var(--document-types-border);
    padding-top: 1rem;
}

.document-types-board__table {
    border-collapse: separate;
    border-spacing: 0;
}

.document-types-board__col--shortname {
    width: 18rem;
}

.document-types-board__col--description {
    min-width: 24rem;
}

.document-types-board__col--actions {
    width: 6rem;
}

.document-types-board__table thead th {
    background: var(--document-types-surface-head);
    border-bottom: 0;
    color: var(--document-types-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.document-types-board__table tbody td {
    border-color: var(--document-types-border);
    padding: 0.95rem 1rem;
    vertical-align: middle;
}

.document-types-board__table thead th + th,
.document-types-board__table tbody td + td {
    border-left: 1px solid var(--document-types-border);
}

.document-types-board__table tbody tr:nth-child(odd) td {
    background: var(--document-types-surface);
}

.document-types-board__table tbody tr:nth-child(even) td {
    background: var(--document-types-surface-alt);
}

.document-types-board__table tbody tr:hover td,
.document-types-board__table tbody tr:focus-within td {
    background: var(--document-types-surface-hover);
}

.document-types-board__table tbody tr.is-selected td {
    background: var(--document-types-selected);
}

.document-types-board__cell-value {
    color: var(--document-types-text);
    display: inline-flex;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
}

.document-types-board__cell-value--shortname {
    font-size: 0.98rem;
    font-weight: 700;
}

.document-types-board__cell-value--description {
    color: var(--document-types-muted);
}

.document-types-board__row-actions {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.document-types-board__row-action {
    align-items: center;
    border-radius: 999px;
    color: var(--document-types-muted);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
}

.document-types-board__row-action:hover,
.document-types-board__row-action:focus-visible {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: rgb(var(--bs-primary-rgb));
}

.document-types-board__row-action svg {
    height: 0.9rem;
    width: 0.9rem;
}

.document-types-board .form-label {
    color: var(--document-types-text);
    font-weight: 600;
}

html[data-theme='dark'] .document-types-board {
    --document-types-surface: var(--app-surface);
    --document-types-surface-alt: var(--app-surface-soft);
    --document-types-surface-hover: color-mix(in srgb, var(--app-surface-strong) 74%, white 26%);
    --document-types-surface-head: var(--app-surface-strong);
    --document-types-border: var(--app-border);
    --document-types-border-strong: var(--app-border);
    --document-types-text: var(--app-text);
    --document-types-muted: var(--app-muted);
    --document-types-selected: color-mix(in srgb, var(--app-surface-strong) 78%, rgb(var(--bs-primary-rgb)) 22%);
}

html[data-theme='dark'] .document-types-board__table-card {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-surface) 88%, white 12%) 0%,
        color-mix(in srgb, var(--app-surface-soft) 92%, white 8%) 100%
    );
}

@media (max-width: 991.98px) {
    .document-types-board__table-toolbar,
    .document-types-board__table-actions,
    .document-types-board__footer-actions,
    .document-types-board__editor-footer {
        align-items: stretch;
        justify-content: flex-start;
    }

    .document-types-board__toolbar-status {
        width: 100%;
    }

    .document-types-board__table-card-body {
        padding: 0.875rem;
    }
}