.kg-table-wrap {
    border-top: 1px solid var(--rule-strong);
}

/* Same !important reasoning as the spinner: the container carries Bootstrap
 * display utilities that would otherwise keep it visible while loading. */
#book-table.loading {
    display: none !important;
}

table.kg-index {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

/* Column heads are labels, not buttons pretending to be a toolbar. */
table.kg-index thead th {
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
    background: transparent;
    border-bottom: 1px solid var(--rule-strong);
    cursor: pointer;
}

table.kg-index thead th:hover {
    color: var(--accent);
}

table.kg-index tbody td {
    padding: 0.8rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
    border-top: 0;
}

table.kg-index tbody tr:hover {
    background: var(--accent-soft);
}

/* The title is the entry; it takes the serif and the weight. */
table.kg-index td.kg-title {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
}

table.kg-index td.kg-title a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

table.kg-index td.kg-title a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

table.kg-index td.kg-author {
    color: var(--ink);
    white-space: nowrap;
}

table.kg-index td.kg-num,
table.kg-index td.kg-year {
    color: var(--ink-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

table.kg-index td.kg-meta {
    color: var(--ink-muted);
}

/* Categories are marginalia — outlined in brass, never filled. */
.kg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.kg-tag {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--brass);
    white-space: nowrap;
    border: 1px solid var(--brass);
}

.kg-empty {
    padding: 3rem 1rem;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ink-muted);
    text-align: center;
}

/* Narrow screens: the row becomes a stacked record rather than a table that
 * scrolls sideways. Serbian runs longer than English, so a six-column table
 * cannot survive 360px. */
@media (max-width: 767px) {
    table.kg-index thead {
        display: none;
    }

    table.kg-index,
    table.kg-index tbody,
    table.kg-index tr,
    table.kg-index td {
        display: block;
        width: 100%;
    }

    table.kg-index tbody tr {
        padding: 1rem 0;
        border-bottom: 1px solid var(--rule);
    }

    table.kg-index tbody td {
        padding: 0.1rem 0;
        border-bottom: 0;
    }

    table.kg-index td.kg-title {
        font-size: 1.15rem;
    }

    table.kg-index td.kg-num {
        display: none;
    }
}

.kg-form .field-wrapper {
    margin-bottom: 1.25rem;
}

.kg-form .form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.kg-form .form-control,
.kg-form .form-select {
    width: 100%;
    max-width: 600px;
}

/* CheckboxSelectMultiple renders a wrapper <div> holding one <div> per option.
 * Let them wrap across the row like the select2 tags above them rather than
 * stacking one per line. The :not(.alert) keeps the error box out of it. */
.kg-form .field-wrapper > div:not(.alert) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    max-width: 600px;
}

.kg-form .field-wrapper > div:not(.alert) label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--ink);
}

.kg-form .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.kg-form .alert {
    max-width: 600px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    border-radius: 0;
}