:root {
    --nmk-brown: #906742;
    --nmk-brown-dark: #523b2b;
    --nmk-brown-light: #d2b18b;
    --nmk-brown-pale: #f2e9dc;
    --nmk-table-head: #654a35;
    --nmk-black: #202020;
    --nmk-white: #ffffff;
    --nmk-background: #f7f5f1;
    --nmk-border: #e3ded6;
    --nmk-muted: #68645f;
    --nmk-comment-blue: #1976d2;
    --nmk-success: #286044;
    --nmk-danger: #a3342b;
    --nmk-focus: #ad7748;
    --nmk-divider: #d8d3ca;
    --nmk-label-bg: #f4efe8;
    --nmk-hover-cool: #eef6f8;
    --nmk-icon-teal: #2f6f73;
    --nmk-icon-green: #2e6f4e;
    --nmk-icon-indigo: #5e548e;
    --nmk-icon-slate: #475569;
    --nmk-icon-amber: #b45309;
}

html {
    background: var(--nmk-background);
}

body {
    padding-top: var(--site-header-height, 164px);
    color: var(--nmk-black);
    background: var(--nmk-background);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--nmk-brown-dark);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.3;
}

.site-main {
    min-height: calc(100vh - 120px);
}

.site-main > .container-fluid {
    width: min(100% - 32px, 1440px);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

.auth-layout-compact {
    max-width: 560px;
}

.auth-layout-single {
    display: flex;
    justify-content: center;
}

.auth-layout-card {
    width: 100%;
}

.auth-layout-skull {
    width: min(112px, 34vw);
    max-height: 96px;
    object-fit: contain;
}

.auth-orcid-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-orcid-logo {
    flex: 0 0 auto;
    border-radius: 50%;
}

.review-ui-page {
    width: min(100% - 32px, 1560px);
    max-width: 1560px;
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 36px;
}

.review-page-header {
    margin: 0 0 18px;
    padding: 18px 20px !important;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 5px solid var(--nmk-brown);
    border-radius: 5px;
}

.review-page-header h1,
.review-page-title {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.8rem;
}

.review-page-header p {
    margin: 8px 0 0;
    color: var(--nmk-muted);
}

.review-panel {
    min-width: 0;
    background: var(--nmk-white) !important;
    border: 1px solid var(--nmk-border);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgb(32 32 32 / 5%);
}

.review-filter-panel {
    background: var(--nmk-brown-pale) !important;
    border-left: 4px solid var(--nmk-brown-light);
    box-shadow: none;
}

.review-ui-page .review-data-table {
    width: 100%;
}

.review-ui-page .review-data-table th,
.review-ui-page .review-data-table td {
    overflow-wrap: anywhere;
}

.review-ui-page .review-data-table pre {
    max-width: 36rem;
    max-height: 16rem;
    overflow: auto;
    padding: 10px;
    color: var(--nmk-black);
    background: #fbf8f3;
    border: 1px solid var(--nmk-border);
    border-radius: 4px;
    white-space: pre-wrap;
}

.specimen-page-review .review-workspace {
    min-width: 0;
}

.specimen-page-review .review-split {
    padding: 0 !important;
    overflow: hidden;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-radius: 5px;
}

.specimen-page-review .review-pane-inner {
    padding: 16px;
}

.specimen-page-review .review-pane-inner > header {
    margin: -16px -16px 12px;
    padding: 12px 16px;
    background: var(--nmk-brown-pale);
    border-bottom: 1px solid var(--nmk-border);
}

.specimen-page-review .review-pane-inner > header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
}

.specimen-page-review .review-divider {
    background: var(--nmk-brown-light);
}

.specimen-page-review .review-table thead th {
    color: var(--nmk-white);
    background: var(--nmk-table-head) !important;
}

.specimen-page-review .review-table td {
    vertical-align: top;
}

.media-qc-review-page .review-page-header {
    margin-bottom: 20px;
}

.media-qc-review-page .review-page-title {
    margin: 0;
    color: var(--nmk-brown-dark);
}

.media-qc-review-page .qc-media,
.media-qc-review-page .qc-form {
    min-width: 0;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgb(32 32 32 / 5%);
}

.media-qc-review-page .qc-media > header,
.media-qc-review-page .qc-section-heading {
    color: var(--nmk-brown-dark);
    border-color: var(--nmk-border) !important;
}

.media-qc-review-page .qc-card,
.media-qc-review-page .qc-row-card {
    border-color: var(--nmk-border);
    background: var(--nmk-white);
    box-shadow: 0 1px 3px rgb(32 32 32 / 6%);
}

.media-qc-review-page .qc-chip-zone,
.media-qc-review-page .qc-conflict-value {
    background: var(--nmk-brown-pale);
    border-color: var(--nmk-brown-light);
}

.media-qc-review-page .qc-chip-zone__header {
    color: var(--nmk-brown-dark);
}

.media-qc-review-page .qc-history-comment {
    border-left-color: var(--nmk-comment-blue);
}

.media-qc-history-page > section {
    margin-top: 16px;
}

.media-qc-history-page > section > .review-panel {
    padding: 16px;
}

.preparation-review-page .review-panel {
    padding: 18px;
}

.review-ui-page .w3-text-indigo,
.review-ui-page .w3-text-blue {
    color: var(--nmk-brown-dark) !important;
}

.review-ui-page .review-panel > header,
.review-ui-page .review-panel > .w3-container > header {
    color: var(--nmk-brown-dark);
}

.review-ui-page .review-panel .w3-border-bottom {
    border-color: var(--nmk-border) !important;
}

.review-ui-page .review-data-table {
    table-layout: auto;
}

.review-ui-page .review-data-table tbody tr:hover {
    background: var(--nmk-brown-pale);
}

.review-ui-page .review-shift-controls .w3-button,
.review-ui-page .review-cell-shift .w3-button {
    min-width: 30px;
    min-height: 30px;
    padding: 4px 7px;
    color: var(--nmk-brown-dark) !important;
    background: var(--nmk-brown-pale) !important;
    border: 1px solid var(--nmk-brown-light) !important;
}

.review-ui-page .review-pane-inner {
    min-width: 0;
}

.review-ui-page .review-image-panel img,
.specimen-page-review #page-image {
    display: block;
    margin-inline: auto;
    background: #fbf8f3;
}

.media-qc-review-page .qc-section {
    padding: 14px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 3px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.media-qc-review-page .qc-section + .qc-section {
    margin-top: 16px;
}

.media-qc-review-page .qc-section-heading h3,
.media-qc-review-page .qc-section-heading h4,
.media-qc-review-page .qc-subsection h4 {
    color: var(--nmk-brown-dark);
}

.media-qc-review-page .qc-row-card__drag {
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    border-color: var(--nmk-brown-light);
}

.media-qc-review-page .qc-chip-zone__header {
    color: var(--nmk-brown-dark);
}

.media-qc-review-page .qc-conflict-value {
    color: var(--nmk-black);
    background: var(--nmk-brown-pale);
}

@media screen and (max-width: 768px) {
    .review-ui-page {
        width: min(100% - 20px, 1560px);
        padding-top: 16px;
    }

    .review-page-header {
        padding: 14px !important;
    }

    .review-page-header h1,
    .review-page-title {
        font-size: 1.5rem;
    }

    .media-qc-review-page .qc-media,
    .media-qc-review-page .qc-form {
        flex-basis: 100%;
        max-width: 100%;
        position: static;
        max-height: none;
    }
}

/* Branding: keep the site logo sized for the navigation bar */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10500;
    isolation: isolate;
    overflow: visible;
    background-color: var(--nmk-white);
    box-shadow: 0 3px 10px rgb(32 32 32 / 10%);
}

.logo_image {
    display: block;
    max-width: 120px;
    height: auto;
}

/* Navigation: align desktop items on a single row while preserving mobile stacking */
.site-navigation {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow: visible;
    background-color: var(--nmk-white) !important;
    border-bottom: 3px solid var(--nmk-brown);
}

.site-navigation .nav-link,
.site-navigation .w3-button {
    min-height: 42px;
    color: var(--nmk-black);
    border-radius: 4px;
    font-weight: 600;
}

.site-navigation .nav-link:hover,
.site-navigation .nav-link:focus-visible,
.site-navigation .nav-link[aria-current="page"] {
    color: var(--nmk-brown-dark) !important;
    background: var(--nmk-brown-pale) !important;
    box-shadow: inset 0 -2px 0 var(--nmk-brown);
}

.site-navigation .nav-items {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    margin-left: auto;
    overflow: visible;
}

.site-navigation .nav-items .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Navigation: stretch dropdown to match W3.CSS button height for consistent bar alignment */
.site-navigation .nav-items .nav-dropdown {
    display: inline-flex;
    align-items: stretch;
    position: relative;
}

.site-navigation .nav-dropdown.is-open {
    z-index: 10700;
}

.site-navigation.has-open-dropdown {
    padding-bottom: var(--open-dropdown-space, 0);
}

.site-navigation .nav-dropdown .w3-dropdown-content {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 10701;
    width: max-content;
    min-width: 100%;
    max-width: min(88vw, 360px);
    max-height: min(60vh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--nmk-border);
    box-shadow: 0 10px 24px rgb(32 32 32 / 18%);
}

.site-navigation .nav-dropdown.is-open .w3-dropdown-content {
    display: block !important;
    visibility: visible;
}

.site-navigation .nav-dropdown .w3-dropdown-content .w3-bar-item {
    width: 100%;
    white-space: normal;
}

.site-navigation .nav-items .nav-user-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.site-navigation .nav-items .nav-auth {
    display: inline-flex;
    align-items: stretch;
}

.site-navigation #nav-toggle {
    margin-left: auto;
}

.site-navigation #primary-navigation {
    flex-basis: 100%;
    max-height: calc(100vh - var(--site-header-height, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Shared actions: keep W3.CSS markup and form behavior intact. */
.w3-button,
button,
input[type="submit"],
input[type="button"] {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.w3-button.w3-blue,
.w3-button.w3-indigo,
button.w3-blue,
input[type="submit"].w3-blue {
    color: var(--nmk-white) !important;
    background: var(--nmk-brown) !important;
    border-color: var(--nmk-brown) !important;
}

.w3-button.w3-blue:hover,
.w3-button.w3-indigo:hover,
button.w3-blue:hover,
input[type="submit"].w3-blue:hover {
    color: var(--nmk-white) !important;
    background: var(--nmk-brown-dark) !important;
    border-color: var(--nmk-brown-dark) !important;
}

.w3-button.w3-green,
button.w3-green {
    color: var(--nmk-white) !important;
    background: var(--nmk-brown) !important;
    border-color: var(--nmk-brown) !important;
}

.w3-button.w3-green:hover,
button.w3-green:hover {
    color: var(--nmk-white) !important;
    background: var(--nmk-brown-dark) !important;
    border-color: var(--nmk-brown-dark) !important;
}

.w3-button.w3-red,
button.w3-red {
    color: var(--nmk-white) !important;
    background: var(--nmk-danger) !important;
    border-color: var(--nmk-danger) !important;
}

.w3-button.w3-white,
.w3-button.w3-light-grey,
.w3-button.w3-light-gray {
    color: var(--nmk-brown-dark) !important;
    background: var(--nmk-white) !important;
    border-color: var(--nmk-border) !important;
}

.w3-button.w3-amber,
.w3-button.w3-yellow,
button.w3-amber,
button.w3-yellow {
    color: var(--nmk-brown-dark) !important;
    background: var(--nmk-brown-pale) !important;
    border-color: var(--nmk-brown-light) !important;
}

.w3-button:not(:disabled):not(.w3-disabled):hover,
button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover {
    filter: brightness(0.96);
}

.w3-button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid var(--nmk-focus);
    outline-offset: 2px;
}

.w3-button:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.w3-button.w3-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.w3-button i,
.w3-button .fa,
.w3-button .fas,
.w3-button .far {
    line-height: 1;
}

/* Detail pages use the same header, section, and metadata rhythm. */
main[role="main"].w3-container {
    padding-top: 24px;
    padding-bottom: 36px;
}

main[role="main"] > header[aria-labelledby] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px !important;
    background: var(--nmk-white) !important;
    border: 1px solid var(--nmk-border) !important;
    border-left: 5px solid var(--nmk-brown) !important;
    border-radius: 5px;
}

main[role="main"] > header[aria-labelledby] h1 {
    overflow-wrap: anywhere;
    font-size: 1.8rem;
}

main[role="main"] > section > .w3-card,
main[role="main"] > section > .w3-row-padding > article > .w3-card {
    height: 100%;
    background: var(--nmk-white) !important;
    border: 1px solid var(--nmk-border);
    border-radius: 5px;
    box-shadow: 0 2px 7px rgb(32 32 32 / 4%);
}

main[role="main"] section > header h2,
main[role="main"] article > h2 {
    color: var(--nmk-brown-dark);
    font-size: 1.3rem;
}

main[role="main"] dl > div {
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--nmk-border);
}

main[role="main"] dl > div:last-child {
    border-bottom: 0;
}

main[role="main"] dt {
    color: var(--nmk-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

main[role="main"] dd {
    overflow-wrap: anywhere;
}

/* Collection tables */
.w3-responsive {
    max-width: 100%;
    margin-block: 12px;
    border: 1px solid var(--nmk-border);
    border-radius: 5px;
    background: var(--nmk-white);
}

/* Accession details are presented as one ordered column of data sections. */
.accession-detail-page .accession-summary-panel,
.accession-detail-page .accession-detail-sections,
.accession-detail-page .accession-lower-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.accession-detail-page .accession-summary-panel,
.accession-detail-page .accession-lower-area {
    margin-top: 16px;
}

.accession-detail-page .accession-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.accession-detail-page .accession-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.accession-detail-page .accession-section-header > .w3-col,
.accession-detail-page .accession-section-header > div {
    float: none;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.accession-detail-page .accession-section-header h2,
.accession-detail-page .accession-section-header h3 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.accession-detail-page .accession-section-content {
    min-width: 0;
}

.accession-detail-page .accession-overview-table th[scope="row"] {
    width: min(28%, 240px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.accession-detail-page .accession-overview-table td {
    overflow-wrap: anywhere;
}

.accession-detail-page #accession-fieldslip-actions,
.accession-detail-page #accession-reference-merge-panel {
    position: relative;
    z-index: 0;
    padding: 14px;
    background: var(--nmk-brown-pale);
    border: 1px solid var(--nmk-border);
    border-radius: 4px;
}

.accession-detail-page #accession-fieldslip-actions .select2-container,
.accession-detail-page #accession-fieldslip-actions .select2-dropdown {
    z-index: 1 !important;
}

.accession-detail-page #accession-fieldslip-actions > .w3-col {
    padding-bottom: 12px;
}

.accession-detail-page .media-preview-trigger img {
    max-width: 180px;
    max-height: 110px;
    object-fit: contain;
}

/* Locality details follow the same ordered table layout as accession details. */
.locality-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.locality-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.locality-detail-page .locality-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.locality-detail-page .locality-section-header,
.locality-detail-page .locality-detail-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.locality-detail-page .locality-section-header h2,
.locality-detail-page .locality-detail-section > header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.locality-detail-page .locality-overview-table th[scope="row"] {
    width: min(28%, 240px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.locality-detail-page .locality-overview-table td {
    overflow-wrap: anywhere;
}

.place-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.place-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.place-detail-page .place-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.place-detail-page .place-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.place-detail-page .place-section-header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.place-detail-page .place-section-header p {
    margin-bottom: 0;
}

.place-detail-page .place-accessions-header > div {
    min-width: 0;
}

.place-detail-page .place-overview-table th[scope="row"] {
    width: min(28%, 240px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.place-detail-page .place-overview-table td {
    overflow-wrap: anywhere;
}

.accession-detail-page .accession-lower-area > header {
    align-items: center;
}

@media screen and (max-width: 768px) {
    .accession-detail-page .accession-detail-section {
        padding: 12px;
    }

    .accession-detail-page .accession-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .accession-detail-page .accession-overview-table th[scope="row"] {
        width: 38%;
    }

    .locality-detail-page .locality-detail-section {
        padding: 12px;
    }

    .locality-detail-page .locality-section-header,
    .locality-detail-page .locality-detail-section > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .locality-detail-page .locality-overview-table th[scope="row"] {
        width: 38%;
    }

    .place-detail-page .place-detail-section {
        padding: 12px;
    }

    .place-detail-page .place-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .place-detail-page .place-overview-table th[scope="row"] {
        width: 38%;
    }
}

table.w3-table-all,
table.w3-table {
    color: var(--nmk-black);
    border-collapse: separate;
    border-spacing: 0;
}

table.w3-table-all thead th,
table.w3-table thead th {
    padding: 12px 14px;
    color: var(--nmk-white);
    background: var(--nmk-table-head);
    border-color: var(--nmk-brown-dark);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
}

table.w3-table-all tbody td,
table.w3-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nmk-border);
    vertical-align: middle;
}

table.w3-table-all tbody tr:nth-child(even),
table.w3-table tbody tr:nth-child(even) {
    background: #fbf8f3;
}

table.w3-table-all tbody tr:hover,
table.w3-table tbody tr:hover {
    background: var(--nmk-brown-pale);
}

table a:not(.w3-button) {
    color: var(--nmk-brown-dark);
    text-decoration-color: var(--nmk-brown-light);
    text-underline-offset: 2px;
}

.reference-list-page table.w3-table-all thead th a,
.reference-list-page table.w3-table thead th a {
    color: var(--nmk-white) !important;
    text-decoration-color: rgb(255 255 255 / 65%);
}

.reference-list-page table.w3-table-all thead th a:hover,
.reference-list-page table.w3-table thead th a:hover {
    color: #f4dfbd !important;
}

.reference-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.reference-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.reference-detail-page .reference-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.reference-detail-page .reference-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.reference-detail-page .reference-section-header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.reference-detail-page .reference-metadata-table th[scope="row"] {
    width: min(28%, 240px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.reference-detail-page .reference-metadata-table td {
    overflow-wrap: anywhere;
}

.fieldslip-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.fieldslip-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.fieldslip-detail-page .fieldslip-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.fieldslip-detail-page .fieldslip-section-header,
.fieldslip-detail-page .fieldslip-detail-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.fieldslip-detail-page .fieldslip-section-header h2,
.fieldslip-detail-page .fieldslip-detail-section > header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.fieldslip-detail-page .fieldslip-data-table th[scope="row"] {
    width: min(32%, 280px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.fieldslip-detail-page .fieldslip-data-table td {
    overflow-wrap: anywhere;
}

.fieldslip-detail-page .fieldslip-data-table .fieldslip-group-row th {
    padding: 12px 14px 10px;
    color: var(--nmk-brown-dark);
    background: #f5f5f5;
    border-top: 2px solid var(--nmk-border);
    border-bottom: 1px solid var(--nmk-border);
    font-size: 0.95rem;
    text-align: left;
    text-transform: none;
}

.fieldslip-detail-page .fieldslip-data-table tbody .fieldslip-group-row:first-child th {
    border-top: 0;
}

.fieldslip-detail-page .fieldslip-value-list {
    margin: 0;
    padding-left: 20px;
}

.fieldslip-detail-page .fieldslip-value-list li + li {
    margin-top: 4px;
}

.drawer-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.drawer-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.drawer-detail-page .drawer-detail-section {
    min-width: 0;
    margin: 0 0 16px;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.drawer-detail-page .drawer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.drawer-detail-page .drawer-section-header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.drawer-detail-page .drawer-data-table th[scope="row"] {
    width: min(30%, 260px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.drawer-detail-page .drawer-data-table td {
    overflow-wrap: anywhere;
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > header {
    padding: 16px 18px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown);
    border-radius: 5px;
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > header h2 {
    color: var(--nmk-brown-dark);
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > .w3-bar {
    background: var(--nmk-brown-pale) !important;
    border-radius: 5px;
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > .w3-bar [role="tab"] {
    color: var(--nmk-brown-dark) !important;
    border-color: transparent !important;
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > .w3-bar [role="tab"][aria-selected="true"] {
    color: var(--nmk-brown-dark) !important;
    background: var(--nmk-white) !important;
    border-bottom: 3px solid var(--nmk-brown) !important;
}

.storage-detail-page > section[aria-labelledby="storage-tabs-heading"] > div.w3-white.w3-card {
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.storage-detail-page [role="tabpanel"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.storage-detail-page .storage-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.storage-detail-page .storage-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.storage-detail-page .storage-section-header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.storage-detail-page .storage-data-table th[scope="row"] {
    width: min(30%, 260px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.storage-detail-page .storage-data-table td {
    overflow-wrap: anywhere;
}

.preparation-list-page {
    display: flow-root;
}

.preparation-list-page .preparation-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px !important;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border) !important;
    border-left: 4px solid var(--nmk-brown) !important;
    border-radius: 5px;
}

.preparation-list-page .preparation-list-header h2 {
    color: var(--nmk-brown-dark);
    font-size: 1.55rem;
}

.preparation-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.preparation-detail-page > header[aria-labelledby] {
    margin-bottom: 0;
}

.preparation-detail-page .preparation-detail-section {
    min-width: 0;
    margin: 0 !important;
    padding: 16px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 5px;
}

.preparation-detail-page .preparation-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--nmk-border);
}

.preparation-detail-page .preparation-section-header h2 {
    margin: 0;
    color: var(--nmk-brown-dark);
    font-size: 1.25rem;
}

.preparation-detail-page .preparation-data-table th[scope="row"] {
    width: min(30%, 260px);
    color: var(--nmk-brown-dark);
    background: var(--nmk-brown-pale);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.preparation-detail-page .preparation-data-table td {
    overflow-wrap: anywhere;
}

.accession-detail-page .accession-overview-table tbody tr + tr th,
.accession-detail-page .accession-overview-table tbody tr + tr td,
.locality-detail-page .locality-overview-table tbody tr + tr th,
.locality-detail-page .locality-overview-table tbody tr + tr td,
.place-detail-page .place-overview-table tbody tr + tr th,
.place-detail-page .place-overview-table tbody tr + tr td,
.reference-detail-page .reference-metadata-table tbody tr + tr th,
.reference-detail-page .reference-metadata-table tbody tr + tr td,
.fieldslip-detail-page .fieldslip-data-table tbody tr + tr th,
.fieldslip-detail-page .fieldslip-data-table tbody tr + tr td,
.drawer-detail-page .drawer-data-table tbody tr + tr th,
.drawer-detail-page .drawer-data-table tbody tr + tr td,
.storage-detail-page .storage-data-table tbody tr + tr th,
.storage-detail-page .storage-data-table tbody tr + tr td,
.preparation-detail-page .preparation-data-table tbody tr + tr th,
.preparation-detail-page .preparation-data-table tbody tr + tr td {
    border-top: 1px solid var(--nmk-border);
}

.accession-detail-page .accession-overview-table th[scope="row"],
.locality-detail-page .locality-overview-table th[scope="row"],
.place-detail-page .place-overview-table th[scope="row"],
.reference-detail-page .reference-metadata-table th[scope="row"],
.fieldslip-detail-page .fieldslip-data-table th[scope="row"],
.drawer-detail-page .drawer-data-table th[scope="row"],
.storage-detail-page .storage-data-table th[scope="row"],
.preparation-detail-page .preparation-data-table th[scope="row"] {
    width: 168px;
}

.accession-detail-page .accession-overview-table tbody tr:hover td,
.locality-detail-page .locality-overview-table tbody tr:hover td,
.place-detail-page .place-overview-table tbody tr:hover td,
.reference-detail-page .reference-metadata-table tbody tr:hover td,
.fieldslip-detail-page .fieldslip-data-table tbody tr:hover td,
.drawer-detail-page .drawer-data-table tbody tr:hover td,
.storage-detail-page .storage-data-table tbody tr:hover td,
.preparation-detail-page .preparation-data-table tbody tr:hover td {
    background: #eef6f8;
}

.accession-detail-page .accession-overview-table tbody tr:hover th[scope="row"],
.locality-detail-page .locality-overview-table tbody tr:hover th[scope="row"],
.place-detail-page .place-overview-table tbody tr:hover th[scope="row"],
.reference-detail-page .reference-metadata-table tbody tr:hover th[scope="row"],
.fieldslip-detail-page .fieldslip-data-table tbody tr:hover th[scope="row"],
.drawer-detail-page .drawer-data-table tbody tr:hover th[scope="row"],
.storage-detail-page .storage-data-table tbody tr:hover th[scope="row"],
.preparation-detail-page .preparation-data-table tbody tr:hover th[scope="row"] {
    background: #dcecf3;
}

/* Detail page design system */
.accession-detail-page,
.accession-row-detail-page,
.locality-detail-page,
.place-detail-page,
.reference-detail-page,
.fieldslip-detail-page,
.drawer-detail-page,
.storage-detail-page,
.preparation-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1240px);
    margin-right: auto;
    margin-left: auto;
    padding: 18px;
    background: var(--nmk-white);
    border: 1px solid var(--nmk-border);
    border-radius: 10px;
    gap: 18px;
}

.accession-detail-page > header[aria-labelledby],
.accession-row-detail-page > header[aria-labelledby],
.locality-detail-page > header[aria-labelledby],
.place-detail-page > header[aria-labelledby],
.reference-detail-page > header[aria-labelledby],
.fieldslip-detail-page > header[aria-labelledby],
.drawer-detail-page > header[aria-labelledby],
.storage-detail-page > header[aria-labelledby],
.preparation-detail-page > header[aria-labelledby] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 18px !important;
    padding: 22px 24px !important;
    background: var(--nmk-white) !important;
    border: 1px solid var(--nmk-border) !important;
    border-left: 5px solid var(--nmk-brown) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgb(32 32 32 / 13%);
}

.accession-detail-page > header[aria-labelledby] > div,
.accession-row-detail-page > header[aria-labelledby] > div,
.locality-detail-page > header[aria-labelledby] > div,
.place-detail-page > header[aria-labelledby] > div,
.reference-detail-page > header[aria-labelledby] > div,
.fieldslip-detail-page > header[aria-labelledby] > div,
.drawer-detail-page > header[aria-labelledby] > div,
.storage-detail-page > header[aria-labelledby] > div,
.preparation-detail-page > header[aria-labelledby] > div {
    float: none;
}

.accession-detail-page > header h1,
.accession-row-detail-page > header h1,
.locality-detail-page > header h1,
.place-detail-page > header h1,
.reference-detail-page > header h1,
.fieldslip-detail-page > header h1,
.drawer-detail-page > header h1,
.storage-detail-page > header h1,
.preparation-detail-page > header h1 {
    color: #3f2a1d;
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    line-height: 1.18;
}

.accession-detail-page > header p,
.accession-row-detail-page > header p,
.locality-detail-page > header p,
.place-detail-page > header p,
.reference-detail-page > header p,
.fieldslip-detail-page > header p,
.drawer-detail-page > header p,
.preparation-detail-page > header p {
    margin: 8px 0 0;
    color: #6b7280 !important;
    font-size: 0.98rem;
}

.accession-detail-page .accession-detail-section,
.accession-row-detail-page .accession-row-detail-section,
.locality-detail-page .locality-detail-section,
.place-detail-page .place-detail-section,
.reference-detail-page .reference-detail-section,
.fieldslip-detail-page .fieldslip-detail-section,
.drawer-detail-page .drawer-detail-section,
.storage-detail-page .storage-detail-section,
.preparation-detail-page .preparation-detail-section {
    padding: 20px;
    border: 1px solid var(--nmk-border);
    border-left: 4px solid var(--nmk-brown-light);
    border-radius: 8px;
    background: var(--nmk-white);
    box-shadow: 0 10px 26px rgb(32 32 32 / 10%);
}

.accession-row-detail-page .accession-row-detail-section {
    margin-top: 0 !important;
}

.accession-detail-page .accession-section-header,
.accession-row-detail-page .accession-row-section-header,
.locality-detail-page .locality-section-header,
.locality-detail-page .locality-detail-section > header,
.place-detail-page .place-section-header,
.reference-detail-page .reference-section-header,
.fieldslip-detail-page .fieldslip-section-header,
.fieldslip-detail-page .fieldslip-detail-section > header,
.drawer-detail-page .drawer-section-header,
.storage-detail-page .storage-section-header,
.preparation-detail-page .preparation-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--nmk-divider);
}

.accession-detail-page .accession-section-header h2,
.accession-detail-page .accession-section-header h3,
.accession-row-detail-page .accession-row-section-header h2,
.locality-detail-page .locality-section-header h2,
.locality-detail-page .locality-detail-section > header h2,
.place-detail-page .place-section-header h2,
.reference-detail-page .reference-section-header h2,
.fieldslip-detail-page .fieldslip-section-header h2,
.fieldslip-detail-page .fieldslip-detail-section > header h2,
.drawer-detail-page .drawer-section-header h2,
.storage-detail-page .storage-section-header h2,
.preparation-detail-page .preparation-section-header h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #3f2a1d;
    font-size: 1.18rem;
    line-height: 1.25;
}

.accession-detail-page .accession-section-header h2 .w3-margin-left,
.accession-row-detail-page .accession-row-section-header h2 .w3-margin-left,
.locality-detail-page .locality-section-header h2 .w3-margin-left,
.locality-detail-page .locality-detail-section > header h2 .w3-margin-left,
.place-detail-page .place-section-header h2 .w3-margin-left,
.reference-detail-page .reference-section-header h2 .w3-margin-left,
.fieldslip-detail-page .fieldslip-section-header h2 .w3-margin-left,
.fieldslip-detail-page .fieldslip-detail-section > header h2 .w3-margin-left,
.drawer-detail-page .drawer-section-header h2 .w3-margin-left,
.storage-detail-page .storage-section-header h2 .w3-margin-left,
.preparation-detail-page .preparation-section-header h2 .w3-margin-left {
    margin-left: 0 !important;
}

.accession-detail-page .accession-section-header h2 > i,
.accession-row-detail-page .accession-row-section-header h2 > i,
.locality-detail-page .locality-section-header h2 > i,
.locality-detail-page .locality-detail-section > header h2 > i,
.place-detail-page .place-section-header h2 > i,
.reference-detail-page .reference-section-header h2 > i,
.fieldslip-detail-page .fieldslip-section-header h2 > i,
.fieldslip-detail-page .fieldslip-detail-section > header h2 > i,
.drawer-detail-page .drawer-section-header h2 > i,
.storage-detail-page .storage-section-header h2 > i,
.preparation-detail-page .preparation-section-header h2 > i {
    width: 18px;
    color: var(--nmk-brown-dark);
    font-size: 0.95rem;
    text-align: center;
}

.accession-row-detail-page .accession-row-section-header > .w3-col,
.accession-row-detail-page .accession-row-section-header > div,
.preparation-detail-page .preparation-section-header > .w3-col,
.preparation-detail-page .preparation-section-header > div {
    float: none;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.accession-row-detail-page .accession-row-section-header > .w3-right-align,
.preparation-detail-page .preparation-section-header > .w3-right-align {
    flex: 0 0 auto;
}

.accession-detail-page .fa-dna,
.accession-row-detail-page .fa-dna,
.drawer-detail-page .fa-leaf {
    color: var(--nmk-icon-teal) !important;
}

.accession-detail-page .fa-map-location-dot,
.locality-detail-page .fa-map-location-dot,
.place-detail-page .fa-map-location-dot,
.place-detail-page .fa-sitemap,
.fieldslip-detail-page .fa-map-location-dot {
    color: var(--nmk-icon-green) !important;
}

.accession-detail-page .fa-photo-film,
.accession-detail-page .fa-image,
.preparation-detail-page .fa-photo-film {
    color: var(--nmk-icon-indigo) !important;
}

.reference-detail-page .fa-book,
.reference-detail-page .fa-book-open,
.storage-detail-page .fa-warehouse,
.storage-detail-page .fa-box-archive,
.storage-detail-page .fa-boxes-stacked,
.drawer-detail-page .fa-box-archive,
.drawer-detail-page .fa-barcode,
.drawer-detail-page .fa-folder-open {
    color: var(--nmk-icon-slate) !important;
}

.accession-detail-page .fa-comments,
.preparation-detail-page .fa-clipboard-check,
.preparation-detail-page .fa-clock-rotate-left {
    color: #6b7280 !important;
}

.fieldslip-detail-page .fieldslip-data-table .fieldslip-group-row th {
    padding: 14px 16px 11px;
    color: #3f2a1d;
    background: #f6f6f6;
    border-top: 3px solid var(--nmk-divider);
    border-bottom: 1px solid var(--nmk-divider);
    font-size: 0.9rem;
    letter-spacing: 0;
}

.fieldslip-detail-page .fieldslip-data-table tbody .fieldslip-group-row:first-child th {
    border-top: 0;
}

.accession-detail-page .accession-overview-table,
.accession-row-detail-page .accession-row-overview-table,
.locality-detail-page .locality-overview-table,
.place-detail-page .place-overview-table,
.reference-detail-page .reference-metadata-table,
.fieldslip-detail-page .fieldslip-data-table,
.drawer-detail-page .drawer-data-table,
.storage-detail-page .storage-data-table,
.preparation-detail-page .preparation-data-table {
    width: min(100%, 1040px);
}

.accession-detail-page .w3-responsive,
.accession-row-detail-page .w3-responsive,
.locality-detail-page .w3-responsive,
.place-detail-page .w3-responsive,
.reference-detail-page .w3-responsive,
.fieldslip-detail-page .w3-responsive,
.drawer-detail-page .w3-responsive,
.storage-detail-page .w3-responsive,
.preparation-detail-page .w3-responsive {
    border-color: var(--nmk-divider);
    border-radius: 6px;
    box-shadow: none;
}

.accession-detail-page .accession-overview-table th[scope="row"],
.accession-row-detail-page .accession-row-overview-table th[scope="row"],
.locality-detail-page .locality-overview-table th[scope="row"],
.place-detail-page .place-overview-table th[scope="row"],
.reference-detail-page .reference-metadata-table th[scope="row"],
.fieldslip-detail-page .fieldslip-data-table th[scope="row"],
.drawer-detail-page .drawer-data-table th[scope="row"],
.storage-detail-page .storage-data-table th[scope="row"],
.preparation-detail-page .preparation-data-table th[scope="row"] {
    width: 180px;
    color: #3f2a1d;
    background: var(--nmk-label-bg);
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.accession-row-detail-page .accession-row-overview-table td,
.accession-row-detail-page .accession-row-overview-table th,
.accession-detail-page .accession-overview-table td,
.accession-detail-page .accession-overview-table th,
.locality-detail-page .locality-overview-table td,
.locality-detail-page .locality-overview-table th,
.place-detail-page .place-overview-table td,
.place-detail-page .place-overview-table th,
.reference-detail-page .reference-metadata-table td,
.reference-detail-page .reference-metadata-table th,
.fieldslip-detail-page .fieldslip-data-table td,
.fieldslip-detail-page .fieldslip-data-table th,
.drawer-detail-page .drawer-data-table td,
.drawer-detail-page .drawer-data-table th,
.storage-detail-page .storage-data-table td,
.storage-detail-page .storage-data-table th,
.preparation-detail-page .preparation-data-table td,
.preparation-detail-page .preparation-data-table th {
    min-height: 44px;
    border-color: var(--nmk-divider);
}

.accession-row-detail-page .accession-row-overview-table tbody tr + tr th,
.accession-row-detail-page .accession-row-overview-table tbody tr + tr td {
    border-top: 1px solid var(--nmk-divider);
}

.accession-row-detail-page .accession-row-overview-table tbody tr:hover td {
    background: var(--nmk-hover-cool);
}

.accession-row-detail-page .accession-row-overview-table tbody tr:hover th[scope="row"] {
    background: #dcecf3;
}

.accession-detail-page .accession-overview-table tbody tr:hover td,
.locality-detail-page .locality-overview-table tbody tr:hover td,
.place-detail-page .place-overview-table tbody tr:hover td,
.reference-detail-page .reference-metadata-table tbody tr:hover td,
.fieldslip-detail-page .fieldslip-data-table tbody tr:hover td,
.drawer-detail-page .drawer-data-table tbody tr:hover td,
.storage-detail-page .storage-data-table tbody tr:hover td,
.preparation-detail-page .preparation-data-table tbody tr:hover td {
    background: var(--nmk-hover-cool);
}

.accession-detail-page .accession-overview-table tbody tr:hover th[scope="row"],
.locality-detail-page .locality-overview-table tbody tr:hover th[scope="row"],
.place-detail-page .place-overview-table tbody tr:hover th[scope="row"],
.reference-detail-page .reference-metadata-table tbody tr:hover th[scope="row"],
.fieldslip-detail-page .fieldslip-data-table tbody tr:hover th[scope="row"],
.drawer-detail-page .drawer-data-table tbody tr:hover th[scope="row"],
.storage-detail-page .storage-data-table tbody tr:hover th[scope="row"],
.preparation-detail-page .preparation-data-table tbody tr:hover th[scope="row"] {
    background: #dcecf3;
}

.accession-detail-page .w3-button.w3-light-grey,
.accession-row-detail-page .w3-button.w3-light-grey,
.locality-detail-page .w3-button.w3-light-grey,
.place-detail-page .w3-button.w3-light-grey,
.reference-detail-page .w3-button.w3-light-grey,
.fieldslip-detail-page .w3-button.w3-light-grey,
.drawer-detail-page .w3-button.w3-light-grey,
.storage-detail-page .w3-button.w3-light-grey,
.preparation-detail-page .w3-button.w3-light-grey {
    color: #3f2a1d !important;
    background: var(--nmk-white) !important;
    border-color: var(--nmk-divider) !important;
}

.preparation-detail-page .preparation-history-table {
    width: 100%;
}

.preparation-list-page #prepFilterPanel {
    background: var(--nmk-white) !important;
    border: 1px solid var(--nmk-border);
    border-radius: 5px;
    box-shadow: none;
}

.preparation-list-page #prepFilterPanel form {
    padding: 8px 0;
}

.preparation-list-page .w3-responsive {
    margin-top: 16px;
}

/* Forms: preserve Django widgets and their existing validation behavior. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    max-width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    color: var(--nmk-black);
    background-color: var(--nmk-white);
    border: 1px solid #cfc7bc;
    border-radius: 4px;
    font: inherit;
}

textarea {
    min-height: 100px;
}

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

form label {
    font-weight: 600;
}

form .errorlist,
[role="alert"] {
    overflow-wrap: anywhere;
}

/* Comment markers are deliberately distinct from action and status colors. */
i.fa-comment,
i.fa-comments,
i.fa-comment-dots,
i.fa-comment-medical,
i.fa-message,
.comment-icon,
.comment-indicator,
.nmk-comment-marker {
    color: var(--nmk-comment-blue) !important;
}

footer[aria-label="Application version"] {
    color: var(--nmk-muted) !important;
    border-top: 1px solid var(--nmk-border);
}

/* Navigation: strip default margins so the logout form sits flush in the W3 bar */
.logout-form {
    margin: 0;
}

/* Accessibility: reusable screen-reader utility (W3.CSS does not provide one) */
.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

/* Third-party widgets: keep autocomplete menus below the fixed navigation bar. */
.django-select2,
.select2-container,
.select2-selection {
    width: 100% !important;
}

.select2-container,
.select2-container--open,
.select2-dropdown,
.ui-autocomplete,
.autocomplete-light-widget,
.tt-menu {
    z-index: 10400 !important;
}

/* Modal overlays: raise W3.CSS modal layers above elevated widgets */
.w3-modal {
    z-index: 11000;
}

.w3-modal .w3-modal-content {
    z-index: 11001;
}

/* Drag-and-drop: preserve grab affordance for drawer reorder handles */
.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

@media print {
    body {
        padding-top: 0;
    }

    .site-header {
        position: static;
    }
}

@media screen and (max-width: 1180px) {
    .site-navigation .nav-items.w3-hide-small {
        display: none !important;
    }

    .site-navigation #nav-toggle.w3-hide-large.w3-hide-medium {
        display: block !important;
    }

    .site-navigation #primary-navigation.w3-hide-large.w3-hide-medium.w3-show {
        display: block !important;
        position: relative;
        z-index: 10650;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - 72px);
    }

    .site-navigation #primary-navigation .nav-dropdown {
        display: block;
        width: 100%;
        overflow: visible;
    }

    .site-navigation #primary-navigation .nav-dropdown .w3-dropdown-content {
        position: static;
        z-index: 10660;
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow: visible;
        box-shadow: inset 0 1px 0 var(--nmk-border);
    }
}

@media screen and (max-width: 768px) {
    .site-main > .container-fluid {
        width: min(100% - 20px, 1440px);
    }

    .accession-detail-page,
    .accession-row-detail-page,
    .locality-detail-page,
    .place-detail-page,
    .reference-detail-page,
    .fieldslip-detail-page,
    .drawer-detail-page,
    .storage-detail-page,
    .preparation-detail-page {
        padding: 10px;
        border-radius: 8px;
    }

    main[role="main"] > header[aria-labelledby] {
        align-items: flex-start;
        flex-direction: column;
    }

    main[role="main"] > header[aria-labelledby] > div {
        width: 100%;
        text-align: left;
    }

    .w3-button {
        max-width: 100%;
        white-space: normal;
    }

    table.w3-table-all thead th,
    table.w3-table-all tbody td,
    table.w3-table thead th,
    table.w3-table tbody td {
        padding: 9px 10px;
    }

    .reference-detail-page .reference-detail-section {
        padding: 12px;
    }

    .reference-detail-page .reference-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-detail-page .reference-metadata-table th[scope="row"] {
        width: 38%;
    }

    .fieldslip-detail-page .fieldslip-detail-section {
        padding: 12px;
    }

    .fieldslip-detail-page .fieldslip-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fieldslip-detail-page .fieldslip-data-table th[scope="row"] {
        width: 42%;
    }

    .fieldslip-detail-page .fieldslip-data-table .fieldslip-group-row th {
        padding: 9px 10px;
    }

    .drawer-detail-page .drawer-detail-section {
        padding: 12px;
    }

    .drawer-detail-page .drawer-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .drawer-detail-page .drawer-data-table th[scope="row"] {
        width: 42%;
    }

    .storage-detail-page .storage-detail-section {
        padding: 12px;
    }

    .storage-detail-page .storage-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .storage-detail-page .storage-data-table th[scope="row"] {
        width: 42%;
    }

    .preparation-list-page .preparation-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .preparation-list-page .preparation-list-header > .w3-col {
        width: 100%;
        text-align: left;
    }

    .preparation-detail-page .preparation-detail-section {
        padding: 12px;
    }

    .preparation-detail-page .preparation-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .preparation-detail-page .preparation-data-table th[scope="row"] {
        width: 42%;
    }
}

/* Accession media preview: floating enlarged image for hover/focus interactions */
.accession-media-hover-preview {
    display: none;
    position: fixed;
    z-index: 1000;
    max-width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    pointer-events: none;
}

.accession-media-hover-preview.is-visible {
    display: block;
}

.accession-media-hover-preview.is-centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.accession-media-hover-preview img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 64px);
    object-fit: contain;
}

@media screen and (min-width: 993px) {
    .accession-media-hover-preview {
        max-width: 720px;
        max-width: min(720px, calc(100vw - 32px));
    }
}