/* Admin page */

/* Alleen voor screenreaders (gebruikt in tabellen o.a. Bronnen) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Subtiele scrollbars in lijn met donker thema */
.admin-page ::-webkit-scrollbar,
.admin-content-inner ::-webkit-scrollbar,
.admin-section ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.admin-page ::-webkit-scrollbar-track,
.admin-content-inner ::-webkit-scrollbar-track,
.admin-section ::-webkit-scrollbar-track {
    background: var(--bg-secondary, #252a28);
    border-radius: 3px;
}
.admin-page ::-webkit-scrollbar-thumb,
.admin-content-inner ::-webkit-scrollbar-thumb,
.admin-section ::-webkit-scrollbar-thumb {
    background: var(--border, #555);
    border-radius: 3px;
}
.admin-page ::-webkit-scrollbar-thumb:hover,
.admin-content-inner ::-webkit-scrollbar-thumb:hover,
.admin-section ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #888);
}
.admin-page,
.admin-content-inner,
.admin-section {
    scrollbar-color: var(--border, #555) var(--bg-secondary, #252a28);
    scrollbar-width: thin;
}

/* Geen pijltjes (spinners) bij number-inputs – handmatig invullen */
.admin-page input[type="number"]::-webkit-inner-spin-button,
.admin-page input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.admin-page input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.admin-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Minimale marge; sticky header gelijk uitgelijnd met inhoud */
    --admin-inline-pad: 4px;
    --admin-section-pad: 4px;
    --admin-toolbar-gap: 14px;
    --admin-toolbar-py: 0.55rem;
    --admin-toolbar-min-h: 44px;
    /* Description- en Image-kolommen: zelfde maat als Items → Armour */
    --admin-desc-col-min: 13rem;
    --admin-desc-col-width: 13rem;
    --admin-desc-col-max: 18rem;
    --admin-image-col-min: 15rem;
    --admin-image-col-width: 15rem;
    --admin-image-col-max: 22rem;
    --admin-image-select-min: 12rem;
}

/* Mobiel: zichtbaar via admin-mobile.css (≤900px) */
.admin-nav-toggle,
.admin-sidebar-backdrop {
    display: none;
}

.admin-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    width: 100%;
}

.admin-sidebar {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    background: var(--bg-secondary, #252a28);
    border-right: 1px solid var(--border, #444);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-nav-vertical {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-nav-group {
    padding: 0.6rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #888);
}
.admin-nav-dropdown {
    margin: 0;
}
.admin-nav-dropdown > .admin-nav-group {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-nav-dropdown > .admin-nav-group::-webkit-details-marker {
    display: none;
}
.admin-nav-dropdown > .admin-nav-group::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5rem;
    transition: transform 0.18s ease;
}
.admin-nav-dropdown[open] > .admin-nav-group::before {
    transform: rotate(90deg);
}
.admin-nav-dropdown-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 0.15rem;
}

.admin-nav-vertical button {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
}
.admin-nav-vertical button:hover {
    background: rgba(255,255,255,0.06);
}
.admin-nav-vertical button.active {
    background: rgba(201, 162, 39, 0.15);
    border-left-color: var(--accent);
    color: var(--accent);
}

.admin-nav-vertical button.admin-nav-sub {
    padding-left: 1.5rem;
    font-size: 0.95rem;
}

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Eén kopregel over volle vensterbreedte: titel Admin + assets/submap (boven sidebar + inhoud) */
.admin-app-header {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
    padding: 0.35rem 0.65rem 0.35rem var(--admin-inline-pad);
    border-bottom: 1px solid rgba(0, 0, 0, 0.72);
    background: #030504;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 40;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}
.admin-app-header__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    line-height: 1.25;
}

/* Submap-keuze binnen de app-header (geen dubbele rand/achtergrond) */
.admin-assets-subdir-bar {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    font-size: inherit;
}
.admin-assets-subdir-bar--in-app-header {
    flex: 1 1 240px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    position: static;
    z-index: auto;
}
.admin-assets-subdir-bar__prefix {
    font-family: ui-monospace, monospace;
    color: var(--accent, #c9a227);
    font-weight: 600;
    user-select: none;
}
.admin-assets-subdir-bar__select {
    min-width: 160px;
    max-width: min(320px, 42vw);
}
.admin-assets-subdir-bar__input {
    flex: 1;
    min-width: 140px;
    max-width: 280px;
}
.admin-assets-subdir-bar__add {
    flex-shrink: 0;
}
.admin-assets-subdir-bar__remove {
    flex-shrink: 0;
    opacity: 0.85;
    font-size: 0.82rem;
}

.admin-content-inner {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--admin-inline-pad);
    background: var(--bg-tertiary);
    scroll-padding-top: 52px;
}
/* Bronnen: één scrollgebied (horizontaal + verticaal) voor hele inhoud, geen afgeknipte kolommen */
.admin-content-inner:has(.admin-resources-section) {
    overflow: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.admin-content-inner:has(.admin-resources-section) > .admin-section.admin-resources-section {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
}

/* Items (incl. Armour/Wapen-deelmenu’s): één scroll in het hoofdgebied — geen vaste kolom waar de tabel zelf verticaal scrollt */
.admin-content-inner:has(.admin-items-section) {
    overflow: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.admin-content-inner:has(.admin-items-section) > .admin-section.admin-items-section {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
}
.admin-content-inner:has(.admin-items-section) > .admin-section.admin-items-section > .admin-items-layout {
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
}
.admin-content-inner:has(.admin-items-section) .admin-items-list,
.admin-content-inner:has(.admin-items-section) .admin-items-list .admin-items-groups {
    overflow-x: hidden;
    overflow-y: visible;
}
.admin-content-inner:has(.admin-items-section) .admin-items-editor {
    overflow-x: auto;
    overflow-y: visible;
}

/* Image Library (gameconfig-shell): pagina scrollt, geen eigen .gameconfig-main-balk bij lange tabellen */
.admin-content-inner:has(.admin-media-library-section) {
    overflow: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.admin-content-inner:has(.admin-media-library-section) > .admin-section.admin-media-library-section {
    flex: 0 0 auto;
    overflow: visible;
    min-height: 0;
}
.admin-content-inner:has(.admin-media-library-section) > .admin-section.admin-media-library-section > .gameconfig-page.admin-system-shell {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}
.admin-content-inner:has(.admin-media-library-section) > .admin-section.admin-media-library-section .gameconfig-main {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
}

.admin-content-inner > .admin-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-content-inner > .admin-section > h3 {
    flex-shrink: 0;
}
.admin-content-inner > .admin-section > .admin-items-layout,
.admin-content-inner > .admin-section > .admin-panel-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.admin-content-inner > .admin-section > .admin-gameconfig-inner {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.admin-content-inner > .admin-section > .gameconfig-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-content-inner > .admin-section.admin-section-skills > .gameconfig-page {
    width: 100%;
    min-width: 0;
}
/* Users-module (Gebruikers, IP, Bans, Roles) + Donaties: zelfde page-shell als Gameconfig */
.admin-content-inner > .admin-section.admin-users-section > .gameconfig-page,
.admin-content-inner > .admin-section.admin-donations-view > .gameconfig-page,
.admin-content-inner > .admin-section > .gameconfig-page.admin-system-shell {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}
.admin-system-shell > .gameconfig-main {
    min-height: 0;
}
.admin-chat-mod-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}
/* Scroll op .gameconfig-main (zelfde als Gameconfig-rechterpaneel) */
.admin-users-tab-content {
    min-height: 0;
}
.admin-users-gebruikers-surface {
    padding-bottom: 0.35rem;
}
.admin-users-ip-blocked-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-users-ip-blocked-list li {
    margin-bottom: 0.35rem;
}
/* IP-tab: één surface, 2 kolommen (tabel | geblokkeerde lijst) — zelfde grid als Spelmodules */
.admin-users-ipcheck-grid {
    gap: 0.65rem 0.85rem;
    align-items: start;
}
.admin-users-ipcheck-chunk {
    min-width: 0;
}
.admin-users-ipcheck-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-users-ipcheck-chunk .gameconfig-subsection-title {
    margin-top: 0;
    padding-top: 0;
}
.admin-users-role-emoji-table {
    max-width: 20rem;
}
.admin-donations-view .gameconfig-main {
    min-height: 0;
}
/* Surface + grid op één element (geen extra wrapper) */
.admin-donations-one-surface.gameconfig-feature-grid {
    gap: 0.65rem 0.85rem;
}
.admin-donations-msg--full {
    grid-column: 1 / -1;
}
.admin-donations-chunk {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0;
    box-sizing: border-box;
    align-self: stretch;
    background: transparent;
    border: none;
}
.admin-donations-chunk .gameconfig-subsection-title {
    margin: 0 0 0.35rem;
    padding: 0;
}
.admin-donations-chunk--full {
    grid-column: 1 / -1;
}
.admin-donations-view .gameconfig-block-surface .admin-form-row {
    margin-bottom: 0.35rem;
}
.admin-donations-view .gameconfig-block-surface .admin-form-row:last-child {
    margin-bottom: 0;
}
.admin-donations-view .admin-donations-item-select,
.admin-donations-view #don-item {
    width: auto;
    max-width: min(100%, 22rem);
    min-width: 12rem;
    box-sizing: border-box;
}
.admin-donations-view #don-role {
    max-width: min(100%, 16rem);
}
.admin-donations-view .gameconfig-page-head .gameconfig-main-title {
    align-items: center;
}
/* Users: tabel-acties + accountdetail-tabs in Gameconfig-stijl */
.admin-user-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}
.admin-user-actions-cell {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}
.admin-users-section .admin-user-detail-tabs-wrap {
    margin: 0 0 0.65rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-users-section .admin-user-detail-tabs {
    margin: 0;
    gap: 0.45rem;
}
.admin-users-section .admin-user-detail-tab {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.86rem;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.admin-users-section .admin-user-detail-body {
    padding-top: 0.1rem;
    line-height: 1.45;
}
.admin-users-section .admin-user-meta-grid strong {
    color: var(--muted, #9aa39a);
    font-weight: 600;
    font-size: 0.88em;
}
.admin-users-section .admin-users-detail-surface {
    min-height: 8rem;
}
.admin-users-section .admin-users-table-wrap {
    min-height: 0;
}
/* Uniforme sectie-header: zelfde patroon als Bronnen (titel links, acties rechts, donkere sticky balk) */
.admin-section-header-toolbar,
.admin-resources-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    margin: 0 0 var(--admin-toolbar-gap) 0;
}
.admin-section-main-title,
.admin-resources-main-title {
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    border-radius: 0;
    line-height: 1.2;
    flex: 0 1 auto;
    min-width: 0;
}
.admin-section-title-badge {
    font-size: 0.65em;
    font-weight: normal;
    color: var(--muted, #888);
    margin-left: 0.35rem;
}
.admin-section-toolbar-actions,
.admin-resources-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}
.admin-section-toolbar-label,
.admin-resources-toolbar-label {
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--text-secondary, #aaa);
}
/* Sticky donkere balk: volle breedte binnen main, ruimte tot content eronder */
.admin-content-inner > .admin-section:not(.admin-terrain-editor):not(.admin-object-editor):not(.admin-resource-map-editor) > .admin-section-header-toolbar:first-child,
.admin-content-inner > .admin-section:not(.admin-terrain-editor):not(.admin-object-editor):not(.admin-resource-map-editor) > .admin-resources-header-toolbar:first-child {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: calc(-1 * var(--admin-bleed)) calc(-1 * var(--admin-bleed)) var(--admin-toolbar-gap) calc(-1 * var(--admin-bleed));
    padding: var(--admin-toolbar-py) var(--admin-bleed);
    min-height: var(--admin-toolbar-min-h);
    box-sizing: border-box;
    background: #060908;
    border-bottom: 1px solid rgba(0, 0, 0, 0.65);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.admin-content-inner > .admin-section.admin-terrain-editor > .admin-section-header-toolbar:first-child,
.admin-content-inner > .admin-section.admin-object-editor > .admin-section-header-toolbar:first-child,
.admin-content-inner > .admin-section.admin-resource-map-editor > .admin-section-header-toolbar:first-child {
    position: sticky;
    top: 0;
    z-index: 28;
    margin: calc(-1 * var(--admin-bleed)) calc(-1 * var(--admin-bleed)) var(--admin-toolbar-gap) calc(-1 * var(--admin-bleed));
    padding: var(--admin-toolbar-py) var(--admin-bleed);
    min-height: var(--admin-toolbar-min-h);
    box-sizing: border-box;
    background: #060908;
    border-bottom: 1px solid rgba(0, 0, 0, 0.65);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Items-sectie: compacte acties in sticky header (geen bulk export/import) */
.admin-items-toolbar-actions {
    gap: 0.28rem 0.45rem;
}
.admin-items-toolbar-actions .admin-btn--compact-toolbar {
    font-size: 0.76rem;
    padding: 0.22rem 0.52rem;
    line-height: 1.25;
}
.admin-items-toolbar-actions .admin-btn--primary.admin-btn--compact-toolbar {
    padding: 0.22rem 0.58rem;
}
.admin-items-toolbar-actions .admin-btn--danger.admin-btn--compact-toolbar {
    padding: 0.22rem 0.52rem;
}
.admin-items-toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.admin-items-type-filter {
    min-width: 8.5rem !important;
    max-width: 11rem;
    font-size: 0.8rem;
    padding: 0.18rem 0.35rem;
}
.admin-import-status {
    font-size: 0.85rem;
    color: var(--text-secondary, #aaa);
    min-width: 0;
}
.admin-import-status--loading .admin-import-progress-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--bg-secondary, #252a28);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 4px;
}
.admin-import-status--loading .admin-import-progress-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: 40%;
    background: var(--accent, #7cb342);
    border-radius: 2px;
    animation: admin-import-pulse 0.8s ease-in-out infinite;
}
@keyframes admin-import-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.8; }
    50% { transform: translateX(90px); opacity: 1; }
}
.admin-import-done {
    color: var(--accent, #7cb342);
}
.admin-content-inner > .admin-section:not(.admin-items-section):not(.admin-media-library-section):not(:has(.admin-items-layout)):not(:has(.admin-panel-layout)):not(:has(.admin-map-view)):not(.admin-terrain-editor):not(.admin-object-editor):not(.admin-resource-map-editor):not(.admin-resources-section) {
    overflow-y: auto;
    scroll-padding-top: 52px;
}

.admin-content-inner:has(.admin-terrain-editor),
.admin-content-inner:has(.admin-object-editor),
.admin-content-inner:has(.admin-resource-map-editor) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Terrain editor: geen geneste verticale scrolls; gebruik alleen de algemene pagina-scroll */
.admin-content-inner:has(.admin-terrain-editor) {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Terrain / Object editor: vul viewport, één scroll alleen in het raster */
.admin-section.admin-terrain-editor,
.admin-section.admin-object-editor,
.admin-section.admin-resource-map-editor {
    --admin-section-pad: 6px;
    max-width: none;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--admin-section-pad);
}

.admin-section.admin-terrain-editor {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}
.admin-terrain-editor .admin-editor-tab-panel,
.admin-object-editor .admin-editor-tab-panel,
.admin-resource-map-editor .admin-editor-tab-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-terrain-editor .admin-editor-tab-panel {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}
.admin-terrain-editor .admin-editor-tab-panel.hidden,
.admin-object-editor .admin-editor-tab-panel.hidden,
.admin-resource-map-editor .admin-editor-tab-panel.hidden {
    display: none;
}

/* Object editor: lange lijsten (Objecten beheren / Interactables) moeten scrollen; kaart-tab blijft alleen raster scrollen */
.admin-object-editor #object-tab-manage,
.admin-object-editor #object-tab-interactables {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes interactable-sync-spin {
    to { transform: rotate(360deg); }
}
.admin-object-editor .interactable-sync-status--busy {
    color: var(--accent, #d4af37);
    font-weight: 600;
}
.admin-object-editor .interactable-sync-status--busy::before {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.4em;
    border: 2px solid var(--border, #555);
    border-top-color: var(--accent, #d4af37);
    border-radius: 50%;
    animation: interactable-sync-spin 0.65s linear infinite;
    vertical-align: -0.1em;
}

.admin-terrain-editor #terrain-grid-wrap,
.admin-object-editor #object-grid-wrap,
.admin-resource-map-editor #resource-grid-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    max-height: none;
}
.admin-terrain-editor .admin-map-toolbar-row,
.admin-object-editor .admin-map-toolbar-row,
.admin-resource-map-editor .admin-map-toolbar-row {
    flex-shrink: 0;
}
.admin-terrain-editor .admin-terrain-palette-rail,
.admin-terrain-editor #terrain-palette,
.admin-object-editor .admin-terrain-palette-rail,
.admin-object-editor #object-palette,
.admin-object-editor .admin-object-palette-block {
    flex-shrink: 0;
}
/* Kaart-tab: startpunt/doorgangen links, grote tegelvoorbeelden rechts */
.admin-terrain-editor .admin-terrain-palette-map-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.65rem 1.25rem;
    margin-bottom: 0.65rem;
    width: 100%;
    box-sizing: border-box;
}
.admin-terrain-editor .admin-terrain-map-status-col {
    flex: 0 1 19rem;
    min-width: min(100%, 10rem);
    max-width: 100%;
}
.admin-terrain-editor .admin-terrain-palette-col {
    flex: 1 1 14rem;
    min-width: min(100%, 200px);
    min-height: 0;
}
.admin-terrain-editor .admin-terrain-palette-rail,
.admin-object-editor .admin-terrain-palette-rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-terrain-editor .admin-terrain-palette-nav,
.admin-object-editor .admin-terrain-palette-nav {
    flex: 0 0 auto;
    min-width: 1.9rem;
    max-width: 2.1rem;
    min-height: 2.5rem;
    height: 56px;
    padding: 0 0.1rem;
    line-height: 1;
    font-size: 0.85rem;
    border: 1px solid var(--border, #555);
    border-radius: 4px;
    background: var(--bg-primary, #1a1c1a);
    color: var(--text-secondary, #c8d0c4);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}
.admin-terrain-editor .admin-terrain-palette-nav:hover:not(:disabled),
.admin-object-editor .admin-terrain-palette-nav:hover:not(:disabled) {
    border-color: var(--accent, #c9a227);
    color: var(--text, #e8e8e8);
}
.admin-terrain-editor .admin-terrain-palette-nav:disabled,
.admin-object-editor .admin-terrain-palette-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.admin-terrain-editor .admin-terrain-palette-viewport,
.admin-object-editor .admin-terrain-palette-viewport {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    /* dunne scrollbar; pijl-knoppen zijn primair */
    scrollbar-width: thin;
}
.admin-terrain-editor .admin-terrain-palette-viewport:focus,
.admin-object-editor .admin-terrain-palette-viewport:focus {
    outline: 1px solid rgba(201, 162, 39, 0.4);
    outline-offset: 2px;
}
/* Eén horizontale rij tegels, scrollen met pijlen of touch */
.admin-terrain-editor .admin-terrain-palette-viewport .admin-terrain-palette--large,
.admin-object-editor .admin-terrain-palette-viewport .admin-terrain-palette--large {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0.15rem 0;
    box-sizing: border-box;
    gap: 0.4rem 0.55rem;
}
.admin-terrain-editor .admin-terrain-palette--large .admin-terrain-swatch,
.admin-object-editor .admin-terrain-palette--large .admin-terrain-swatch {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 100%;
    border-radius: 4px;
    border-width: 2px;
    box-sizing: border-box;
}
@media (max-width: 520px) {
    .admin-terrain-editor .admin-terrain-palette--large .admin-terrain-swatch,
    .admin-object-editor .admin-terrain-palette--large .admin-terrain-swatch {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
}
/* Objectpalet (kaart): geen browser-standaard lichte knop-achtergrond — PNG-transparantie leest tegen donkere admin */
.admin-object-editor #object-palette .admin-terrain-swatch {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
}
.admin-object-editor #object-palette .admin-terrain-swatch img {
    background: transparent;
}

/* Kaart-tab fullscreen (terrain/object/resources): raster scrollt, pagina niet */
.admin-editor-tab-panel:fullscreen,
.admin-editor-tab-panel:-webkit-full-screen {
    background: var(--bg-primary, #1f2420);
    padding: 0.75rem;
    box-sizing: border-box;
}
.admin-editor-tab-panel:fullscreen .admin-map-layout,
.admin-editor-tab-panel:-webkit-full-screen .admin-map-layout {
    height: calc(100vh - 1.5rem);
}

.admin-terrain-editor #terrain-grid,
.admin-object-editor #object-grid,
.admin-resource-map-editor #resource-grid {
    user-select: none;
    -webkit-user-select: none;
}

/* Object editor: voorlopige plaatsing vóór Toepassen */
.admin-object-editor .admin-editor-cell.object-editor-pending {
    box-shadow: inset 0 0 0 3px rgba(255, 193, 7, 0.95);
    z-index: 2;
    position: relative;
}

/* Object editor: gemarkeerde plaatsingen om bulkgewijs te verwijderen */
.admin-object-editor .admin-editor-cell.object-editor-placement-selected {
    outline: 2px solid rgba(100, 200, 255, 0.95);
    outline-offset: -2px;
    z-index: 3;
}

/* Objecten beheren: verticale lijst (één object per rij, volle breedte) */
.admin-object-editor .admin-object-defs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    min-width: 0;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-card.terrain-type-card {
    padding: 0.28rem 0.4rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--bg-primary, #1e1e1c);
}
/* Id zit in data-obj-id (spel / opslaan) — bewust niet getoond in de UI */
.admin-object-editor .object-manage-card__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
    margin: 0;
    color: var(--text-secondary, #b8c2b2);
}
.admin-object-editor .object-manage-select-wrap input[type='checkbox'] {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
}
.admin-object-editor .object-manage-card__row .object-manage-card__swatch {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid var(--border, #555);
    background: transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
    box-sizing: border-box;
    align-self: center;
}
.admin-object-editor .object-manage-card__row .object-def-name {
    flex: 1 1 8rem;
    min-width: 5rem;
    max-width: none;
    width: auto;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
}
.admin-object-editor .object-manage-card__row .object-def-category {
    flex: 0 1 7rem;
    min-width: 3.5rem;
    max-width: 12rem;
    width: auto;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 0.1rem 0.22rem;
}
.admin-object-editor .object-manage-card__row .object-def-desc {
    flex: 2 1 12rem;
    min-width: 6rem;
    max-width: none;
    width: auto;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
}
.admin-object-editor .object-manage-card__upload {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 28rem;
    width: auto;
}
/* Pad verborgen (admin-page): knop blijft compact, niet over volle breedte */
.admin-object-editor .object-manage-card__upload .admin-image-field-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.admin-object-editor .object-manage-card__upload .object-def-image {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 100%;
}
.admin-object-editor .object-manage-card__upload .object-manage-card__upload-btn,
.admin-object-editor .object-manage-card__upload .item-table-image-upload {
    flex: 0 0 auto;
    min-width: 2.1em;
    max-width: 3.5em;
    padding: 0.16rem 0.32rem;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: nowrap;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-card__wh {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem 0.25rem;
    font-size: 0.7rem;
}
.admin-object-editor .object-manage-card__wh .object-def-w,
.admin-object-editor .object-manage-card__wh .object-def-h {
    width: 2.15em;
    min-width: 0;
    font-size: 0.72rem;
    padding: 0.08rem 0.15rem;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-card__visual .object-def-visual-width-frac {
    width: 2.15em;
    min-width: 0;
    max-width: 3rem;
    font-size: 0.72rem;
    padding: 0.08rem 0.15rem;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-card__visual .object-def-visual-align-h {
    font-size: 0.72rem;
    padding: 0.06rem 0.22rem;
    max-width: 5.2rem;
    min-width: 0;
}
.admin-object-editor .interactable-def-visual-width-cell {
    width: 2.6rem;
    max-width: 2.8rem;
    padding: 0.2rem 0.15rem !important;
    box-sizing: border-box;
}
.admin-object-editor .interactable-def-visual-width-frac {
    width: 100%;
    max-width: 2.5rem;
    min-width: 0;
    font-size: 0.72rem;
    padding: 0.08rem 0.12rem;
    box-sizing: border-box;
}
.admin-object-editor #interactable-def-visual-width-frac-new {
    width: 2.15em;
    max-width: 2.75rem;
    font-size: 0.72rem;
    padding: 0.08rem 0.15rem;
    box-sizing: border-box;
}
.admin-object-editor .object-manage-card__remove {
    font-size: 0.6rem;
    padding: 0.12rem 0.32rem;
    line-height: 1.2;
    flex: 0 0 auto;
    margin-left: auto;
}
/* Zeer smalle viewports: toch toegankelijk, mag doorbreken */
@media (max-width: 480px) {
    .admin-object-editor .object-manage-card__row {
        flex-wrap: wrap;
    }
    .admin-object-editor .object-manage-card__remove {
        margin-left: 0;
    }
}

.admin-resource-map-editor .admin-editor-cell.resource-editor-pending {
    box-shadow: inset 0 0 0 3px rgba(255, 193, 7, 0.85);
    z-index: 2;
    position: relative;
}

/* Terreintypes-tab: boven toevoegen, lijst scrollt binnen vak */
.admin-terrain-editor #terrain-tab-types .admin-terrain-types-panel {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}
.admin-terrain-editor .terrain-types-table-scroll {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}
.admin-terrain-editor #terrain-tab-types {
    overflow: visible !important;
}
.admin-terrain-editor #terrain-tab-types .admin-terrain-types-panel,
.admin-terrain-editor #terrain-tab-types .terrain-types-table-scroll,
.admin-terrain-editor #terrain-tab-types #terrain-types-grid {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
.admin-terrain-editor .terrain-types-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-secondary, #252825);
    box-shadow: 0 1px 0 var(--border, #444);
}
.admin-terrain-editor .admin-terrain-usage--in {
    font-weight: 600;
    color: var(--accent, #c9a227);
}
.admin-terrain-editor .terrain-types-list-toolbar {
    align-items: center;
}
.admin-terrain-editor .admin-terrain-types-table .terrain-type-visual-td,
.admin-terrain-editor .admin-terrain-types-table .item-image-field-inner {
    min-width: 0;
    overflow: hidden;
}
.admin-terrain-editor .admin-terrain-types-table .item-image-field-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}
.admin-terrain-editor .admin-terrain-types-table .item-image-field-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.admin-terrain-editor .admin-terrain-types-table .terrain-in-row-type-upload {
    align-self: flex-start;
    padding: 0.15rem 0.45rem;
    font-size: 0.8rem;
}
.admin-terrain-editor .admin-terrain-new-type-wrap .item-table-image-upload {
    align-self: flex-start;
    padding: 0.15rem 0.45rem;
    font-size: 0.8rem;
}
.admin-terrain-editor .admin-terrain-new-type-wrap .item-image-field-inner {
    min-width: 0;
}
/* Volledig woord "Upload" zichtbaar, niet afsnijden in flex-balken */
.admin-terrain-editor .admin-terrain-upload-btn,
.admin-terrain-editor #terrain-type-new-image-upload {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 4.75em;
    box-sizing: border-box;
}

/* Terreintypes: 3-koloms kaarten + sorteertabbladen */
.admin-terrain-editor .admin-terrain-types-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.45rem;
    align-content: start;
}
/* Smalle of middelbrede admin: 1 kolom = genoeg breedte voor de één-rij tegel-kaart */
@media (max-width: 1200px) {
    .admin-terrain-editor .admin-terrain-types-grid {
        grid-template-columns: 1fr;
    }
}
.admin-terrain-editor .admin-terrain-sort-tab {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border, #444);
    background: var(--bg-primary, #1a1c1a);
    color: var(--text-secondary, #aaa);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
}
.admin-terrain-editor .admin-terrain-sort-tab:hover {
    border-color: var(--accent, #c9a227);
    color: var(--text, #e8e8e8);
}
.admin-terrain-editor .admin-terrain-sort-tab.active {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent, #c9a227);
    color: var(--text, #e8e8e8);
    font-weight: 600;
}
.admin-terrain-editor .terrain-type-card {
    border: 1px solid var(--border, #444);
    border-radius: 5px;
    padding: 0.28rem 0.4rem;
    background: var(--bg-primary, #1e1e1c);
    min-width: 0;
}
/* Eén horizontale rij: vink, id, gebruik, preview, velden, upload, loop */
.admin-terrain-editor .terrain-type-card-line {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.4rem;
    min-width: 0;
    width: 100%;
    overflow: visible;
}
.admin-terrain-editor .terrain-type-select-label {
    margin: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}
.admin-terrain-editor .terrain-type-id-pill {
    font-size: 0.75rem;
    color: var(--accent, #c9a227);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.admin-terrain-editor .terrain-type-use-pill {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-right: 0.1rem;
}
.admin-terrain-editor .terrain-type-card .terrain-type-name {
    flex: 1 1 3rem;
    min-width: 2.5rem;
    max-width: 10rem;
    box-sizing: border-box;
}
.admin-terrain-editor .terrain-type-card .terrain-type-category {
    flex: 0 0 auto;
    box-sizing: border-box;
}
/* Pad + upload op dezelfde lijn: één flex-rij (geen kolom-layout) */
.admin-terrain-editor .admin-image-field-row.terrain-type-image-inline.item-image-field-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 4rem;
    min-width: 0;
    max-width: 15rem;
    align-content: center;
    position: static;
}
/* Tegen algemene .admin-page regel die pad-velden verbergen (upload-only) */
.admin-terrain-editor .terrain-type-image-inline input.admin-image-ref-input {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 1.1em !important;
    padding: 0.1rem 0.2rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    border: 1px solid var(--border, #555) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    box-sizing: border-box;
}
.admin-terrain-editor .terrain-type-image-inline .admin-image-source-badge {
    display: inline-block !important;
    flex-shrink: 0;
    font-size: 0.58rem;
    padding: 1px 4px;
    max-width: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-terrain-editor .terrain-type-image-line {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 0.2rem;
}
.admin-terrain-editor .terrain-type-walk-inline {
    margin: 0;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-secondary, #bbb);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-width: max-content;
}
.admin-terrain-editor .terrain-type-walk-txt {
    display: inline;
}
/* Kaart-Upload: niet krimpen (andere regel had min-width:0; vaste breedte t.o.v. “Upload”) */
.admin-terrain-editor .terrain-type-card .admin-terrain-upload-btn {
    flex-shrink: 0;
    min-width: 4.75em;
    box-sizing: border-box;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
}
.admin-terrain-editor .admin-terrain-bulk,
.admin-terrain-editor .admin-terrain-types-topbar,
.admin-terrain-editor .admin-terrain-types-toolbar-row {
    min-width: 0;
}
.admin-terrain-editor .admin-terrain-types-toolbar-row {
    -webkit-overflow-scrolling: touch;
}

/* Map editor vult de hoogte; geen paginascroll, alleen slepen (pan) */
.admin-content-inner:has(.admin-map-view) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.75rem;
}
.admin-content-inner:has(.admin-map-view) .admin-map-view {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-content-inner:has(.admin-map-view) .admin-map-view .admin-map-layout {
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 1fr;
}

.admin-section {
    --admin-bleed: calc(var(--admin-inline-pad) + var(--admin-section-pad));
    background: var(--bg-tertiary);
    padding: var(--admin-section-pad);
    border-radius: 4px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.admin-section.admin-items-section,
.admin-section.admin-resources-section {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* Sectie-header (bijv. "Skills") – duidelijke visuele scheiding */
.admin-section > h3 {
    margin: 0 0 0.65rem 0;
    padding: 0.45rem 0.6rem 0.4rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
}

.admin-section.admin-map-view {
    padding-top: 0.5rem;
}

/* Gameconfig: paginatitel bovenaan (.gameconfig-page-head), daarna zijnav + inhoud */
.gameconfig-summary-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--bg-primary, #1a1f1c);
    background: var(--accent, #c9a227);
    border-radius: 4px;
}

.gameconfig-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gameconfig-page.gameconfig-page--split {
    gap: 0.5rem;
}
.gameconfig-page--split > .gameconfig-page-head {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}
.gameconfig-page--split > .gameconfig-split {
    flex: 1 1 0;
    min-height: 0;
}
/* Zonder zijnav (Users, Donaties, Skills): zelfde hoofdvlak als .gameconfig-split > .gameconfig-main */
.gameconfig-page.gameconfig-page--split > .gameconfig-main {
    flex: 1 1 0;
    min-height: 0;
}
.gameconfig-section-divider {
    border: none;
    border-top: 1px solid var(--border, #444);
    margin: 1rem 0 0.75rem;
}
/* Onderkoppen binnen een paneel: zelfde goudtint, kleiner + sans (hoofdtitel = serif in .gameconfig-main-title) */
.gameconfig-subsection-title {
    margin: 0 0 0.4rem;
    padding: 0.15rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.04em;
    color: var(--accent, #c9a227);
}
.gameconfig-pane-stack > div + div .gameconfig-subsection-title {
    margin-top: 0.35rem;
}
/* Combat-balans: subgroepen onder Damage / Accuracy / Enemy scaling */
.gameconfig-combat-group .gameconfig-combat-nested-block {
    margin: 0.55rem 0 0.75rem;
    padding: 0.45rem 0.55rem 0.55rem;
    border-left: 3px solid rgba(201, 162, 39, 0.42);
    background: rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    box-sizing: border-box;
}
.gameconfig-combat-group .gameconfig-combat-nested-block:last-child {
    margin-bottom: 0.15rem;
}
.gameconfig-combat-nested-title {
    margin: 0 0 0.22rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--accent, #c9a227) 88%, var(--text-primary, #e8eae6));
}
.gameconfig-combat-group code {
    font-size: 0.76em;
}
.gameconfig-xp-stat {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--text-primary, #e8eae6);
}
.gameconfig-field-label {
    margin: 0.5rem 0 0.2rem;
    font-size: 0.9rem;
}
/* Spelmodules: twee kolommen op breed scherm; label links, schakelaar rechts in elke kaart */
.gameconfig-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.65rem;
    align-items: stretch;
}
@media (max-width: 720px) {
    .gameconfig-feature-grid {
        grid-template-columns: 1fr;
    }
}
.gameconfig-feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    gap: 0.65rem 0.75rem;
    padding: 0.65rem 0.85rem;
    min-height: 3rem;
    box-sizing: border-box;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border, #3a403c);
    font-size: 0.88rem;
}
.gameconfig-feature-name {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--text-primary, #e8eae6);
    line-height: 1.35;
}
.gameconfig-feature-toggle {
    flex-shrink: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
    white-space: nowrap;
}
/* Zelfde rij als module-kaarten: tweede kolom voor invoer (niet alleen toggle) */
.gameconfig-feature-row .gameconfig-field-ctrl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}
.gameconfig-feature-row .gameconfig-field-ctrl > .admin-input,
.gameconfig-feature-row .gameconfig-field-ctrl > select.admin-input {
    max-width: min(100%, 320px);
}
.gameconfig-feature-grid .gameconfig-feature-row--span-full {
    grid-column: 1 / -1;
}
/* Spelmodules: één kader + grid op hetzelfde element */
.gameconfig-block-surface--features.gameconfig-feature-grid {
    gap: 0.35rem 0.65rem;
}
.gameconfig-block-surface--features.gameconfig-feature-grid > .gameconfig-feature-section-head {
    grid-column: 1 / -1;
    margin: 0.55rem 0 0.2rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border, #3a403c);
}
.gameconfig-block-surface--features.gameconfig-feature-grid > .gameconfig-feature-section-head:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.gameconfig-features-intro {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    max-width: 52rem;
}
.gameconfig-features-intro strong {
    font-weight: 600;
}
.gameconfig-block-surface--features .gameconfig-feature-row {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.45rem 0.85rem;
    min-height: unset;
}
.gameconfig-feature-row--span-full .gameconfig-field-ctrl[style*='flex:1'],
.gameconfig-feature-row--span-full .gameconfig-field-ctrl--grow {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}
/* Verticale stapeling tussen blokken in een paneel (geen dubbele wrapper met .gameconfig-details-inner nodig) */
.gameconfig-pane-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0 0 0.35rem;
    box-sizing: border-box;
}
/* Omlijst blok (tabellen, brede invoer) — zelfde rand/fill als Spelmodules-paneel */
.gameconfig-block-surface {
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border, #3a403c);
    padding: 0.85rem 1.2rem;
    box-sizing: border-box;
    min-width: 0;
}
.gameconfig-block-surface > .gameconfig-subsection-title {
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
}
.gameconfig-block-surface > .gameconfig-subsection-title:first-child {
    margin-top: 0;
    padding-top: 0;
}
.gameconfig-block-surface > .gameconfig-block-surface--table {
    margin-top: 0.25rem;
}
.gameconfig-block-surface > .gameconfig-subsection-title + .gameconfig-block-surface--table {
    margin-top: 0.35rem;
}
.gameconfig-save-row--in-surface {
    margin-top: 0.65rem;
}
.gameconfig-xp-stat--in-surface {
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.gameconfig-actions-below {
    margin: 0.65rem 0 0;
}
.gameconfig-actions-below .gameconfig-btn-add-item {
    font-size: 0.85em;
    padding: 6px 12px;
}
.gameconfig-block-surface--flush {
    padding: 0;
    overflow: hidden;
}
/* XP-voorbeeld: wel binnenrand (flush alleen voor interne scrollrand) */
.gameconfig-block-surface.gameconfig-xp-preview.gameconfig-block-surface--flush {
    padding: 0.5rem 1.2rem 0.85rem;
}
.gameconfig-block-surface--table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.gameconfig-block-surface .admin-table {
    margin-top: 0;
}
.gameconfig-block-surface .admin-table th,
.gameconfig-block-surface .admin-table td {
    padding: 10px 12px;
}
.gameconfig-block-surface thead th {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent, #c9a227);
}
/* Gameconfig-tabellen: cellen verticaal gecentreerd; invoer altijd in een kader */
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table td {
    vertical-align: middle;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table input[type="number"],
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table input[type="text"],
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table select {
    padding: 7px 10px;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--bg-secondary, #252a28);
    color: var(--text-primary, #e8eae6);
    font-size: 0.9em;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 36px;
    max-width: 100%;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table .muted {
    display: inline-block;
    margin-left: 0.35rem;
    vertical-align: middle;
}
/* Label | waarde (2 kolommen): geen enorme lege ruimte tussen kolommen */
.gameconfig-kv-table {
    table-layout: fixed;
    width: 100%;
    max-width: 560px;
}
.gameconfig-kv-table tbody tr td:first-child {
    width: 44%;
    max-width: 260px;
    padding: 8px 12px 8px 4px;
}
.gameconfig-kv-table tbody tr td:nth-child(2) {
    padding: 8px 4px 8px 0;
}
.gameconfig-kv-table tbody tr td[colspan] {
    width: auto;
    max-width: none;
    padding: 8px 0;
}
/* In één blok: mag breder dan oude 560px-cap */
.gameconfig-block-surface > .admin-table.gameconfig-kv-table {
    max-width: 100%;
}
/* Per-skill startlevel: strakke rijen, kleine inputs, meer skills zonder scrollen */
#gc-sect-character .gameconfig-block-surface--start-skills .admin-table.gc-start-skills-table {
    max-width: 420px;
    font-size: 0.8em;
}
#gc-sect-character .admin-table.gc-start-skills-table th,
#gc-sect-character .admin-table.gc-start-skills-table td {
    padding: 0.15rem 0.4rem 0.15rem 0;
    line-height: 1.15;
    vertical-align: middle;
}
#gc-sect-character .admin-table.gc-start-skills-table thead th {
    padding: 0.2rem 0.4rem 0.2rem 0;
    font-size: 0.8rem;
    font-weight: 600;
}
#gc-sect-character .admin-table.gc-start-skills-table .gc-start-skill-level {
    width: 3.1rem;
    min-height: 0;
    height: 1.55rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.85rem;
    line-height: 1.1;
    box-sizing: border-box;
}
#gc-sect-character .admin-table.gc-start-skills-table .gc-start-skill-name .muted {
    font-size: 0.7em;
}
.gameconfig-block-surface .gameconfig-tileset-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.9em;
}
.gameconfig-block-surface .gameconfig-tileset-table td {
    vertical-align: middle;
    font-size: 0.95em;
}
/* Geen width:1% — dat laat de labelkolom met table-layout:fixed op ~0 px krimpen (alleen 1 letter zichtbaar). */
.gameconfig-block-surface .gameconfig-tileset-table td:first-child {
    width: 38%;
    min-width: 10rem;
    max-width: 16rem;
    white-space: nowrap;
    overflow: visible;
    color: var(--text-primary, #e8eae6);
}
.gameconfig-block-surface .gameconfig-tileset-table td:last-child {
    min-width: 0;
    width: 62%;
}
.gameconfig-block-surface .gameconfig-tileset-table .admin-input,
.gameconfig-block-surface .gameconfig-tileset-table select.admin-input {
    max-width: 100%;
    box-sizing: border-box;
}
/* Onderbalk: primaire opslag altijd bereikbaar */
.gameconfig-sticky-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem 0.5rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--border, #444);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
}
.gameconfig-sticky-bar .admin-btn--primary {
    min-width: 9rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
}
.gameconfig-split {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    flex: 1 1 0;
    min-height: 140px;
    min-width: 0;
}
.gameconfig-side-nav {
    flex: 0 0 200px;
    width: 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.5rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
}
.gameconfig-side-nav__btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    color: var(--text-primary, #e8eae6);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gameconfig-side-nav__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent, #c9a227);
}
.gameconfig-side-nav__btn--active {
    background: rgba(201, 162, 39, 0.12);
    border-color: rgba(201, 162, 39, 0.4);
    color: var(--accent, #c9a227);
    font-weight: 600;
}
.gameconfig-main {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.4rem 1rem 1rem;
    background: var(--bg-primary, #1a1f1c);
    border: 1px solid var(--border, #3a4038);
    border-radius: 8px;
    box-sizing: border-box;
}
/* Eén buitenrand (.gameconfig-main): geen tweede volle kaart erin; geneste .gameconfig-block-surface wél (tabel/preview) */
.gameconfig-main > .gameconfig-block-surface,
.gameconfig-main > .gameconfig-pane > .gameconfig-block-surface {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.gameconfig-main .gameconfig-pane-stack > .gameconfig-block-surface {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.gameconfig-main .gameconfig-pane-stack > .gameconfig-block-surface .gameconfig-block-surface {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border, #3a403c);
    box-sizing: border-box;
}
.gameconfig-main.admin-skills-page-body > .gameconfig-block-surface {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.gameconfig-page-head {
    margin: 0;
    padding: 0.65rem 1.15rem 0.75rem;
    background: var(--bg-primary, #1a1f1c);
    border: 1px solid var(--border, #3a4038);
    border-radius: 8px;
    box-sizing: border-box;
}
.gameconfig-main-eyebrow {
    margin: 0 0 0.28rem;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted, #9aa39a);
}
.gameconfig-main-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.65rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    font-family: 'Quintessential', 'Cinzel', Georgia, 'Times New Roman', serif;
    color: var(--accent, #c9a227);
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.gameconfig-main-title #gameconfig-active-section-title {
    min-width: 0;
}
.gameconfig-main-title .gameconfig-summary-badge {
    margin-left: 0;
    vertical-align: baseline;
}
/* Kopregel met acties rechts (o.a. Users bulk reset) — zelfde idee als Gameconfig-breedte */
.gameconfig-page-head--with-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.gameconfig-page-head__titles {
    flex: 1 1 200px;
    min-width: 0;
}
.gameconfig-page-head__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}
.gameconfig-pane[hidden] {
    display: none !important;
}
@media (max-width: 900px) {
    .gameconfig-split {
        flex-direction: column;
        gap: 0.75rem;
    }
    .gameconfig-side-nav {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.45rem;
    }
    .gameconfig-side-nav__btn {
        width: auto;
        flex: 1 1 auto;
        min-width: calc(50% - 0.35rem);
        text-align: center;
        font-size: 0.8rem;
        padding: 0.45rem 0.5rem;
    }
}
/* Kaart binnen uitklapblok: geen dubbele kader */
.gameconfig-card.gameconfig-card--nested {
    background: transparent;
    border: none;
    padding: 0.5rem 0 0;
    margin: 0;
    box-shadow: none;
}
.gameconfig-details-inner > .gameconfig-card--nested.gameconfig-card--xp-table {
    padding-top: 0.35rem;
}
/* (legacy grid — alleen nog bruikbaar als ergens anders gebruikt) */
.gameconfig-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    gap: 1.25rem;
    align-items: start;
}
.gameconfig-grid-2x2 > .gameconfig-card {
    min-width: 0;
    width: 100%;
}
.gameconfig-xp-bottom {
    margin-top: 0.25rem;
    min-width: 0;
}
.gameconfig-card--tileset .gameconfig-card-inner {
    min-width: 0;
    overflow: hidden;
}
.gameconfig-card--tileset .gameconfig-tileset-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.9em;
}
.gameconfig-card--tileset .gameconfig-tileset-table td {
    padding: 6px 8px;
    vertical-align: middle;
    font-size: 0.95em;
}
.gameconfig-card--tileset .gameconfig-tileset-table td:first-child {
    width: 38%;
    min-width: 10rem;
    max-width: 16rem;
    white-space: nowrap;
    overflow: visible;
    color: var(--text-primary, #eee);
}
.gameconfig-card--tileset .gameconfig-tileset-table td:last-child {
    min-width: 0;
    width: 62%;
}
.gameconfig-card--tileset .gameconfig-tileset-table .admin-input,
.gameconfig-card--tileset .gameconfig-tileset-table select {
    max-width: 100%;
    box-sizing: border-box;
}
.gameconfig-card--tileset .gameconfig-save-row {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border, #444);
}
.gameconfig-xp-table-wrap {
    min-height: 0;
}
.gameconfig-card {
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gameconfig-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border, #444);
}
.gameconfig-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.gameconfig-xp-table-wrap {
    border: 1px solid var(--border, #444);
    border-radius: 6px;
}
.gameconfig-xp-table-wrap table {
    margin: 0;
}
.gameconfig-save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.gameconfig-card .admin-btn,
.gameconfig-card button:not([class]) {
    padding: 8px 16px;
    font-size: 0.95em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
.gameconfig-card .admin-btn:hover,
.gameconfig-card button:not([class]):hover {
    background: rgba(255,255,255,0.08);
}
.gameconfig-card .admin-btn--primary,
.gameconfig-card button.admin-btn--primary {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.gameconfig-card .admin-btn--primary:hover,
.gameconfig-card button.admin-btn--primary:hover {
    filter: brightness(1.1);
}
.gameconfig-card .remove-start-item {
    padding: 4px 10px;
    font-size: 0.85em;
}
/* XP-tabel: niet 99 rijen de hele pagina laten vullen — intern scrollen */
.gameconfig-card--xp-table .gameconfig-xp-table-wrap,
.gameconfig-xp-preview .gameconfig-xp-table-wrap {
    max-height: min(52vh, 520px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.gameconfig-card--xp-table .gameconfig-xp-table-wrap thead th,
.gameconfig-xp-preview .gameconfig-xp-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-secondary, #252a28);
    box-shadow: 0 1px 0 var(--border, #444);
}

.gameconfig-details-inner {
    padding: 0 0 0.35rem;
    box-sizing: border-box;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .gameconfig-save-row {
    margin-top: 0.65rem;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-table {
    margin-top: 0.25rem;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-btn {
    padding: 8px 16px;
    font-size: 0.95em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
:where(.gameconfig-details-inner, .gameconfig-pane-stack) .admin-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Daily settings: twee kolommen (Algemeen+Streak | Beloning), Skills volle breedte */
.gameconfig-daily-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    align-items: start;
}
.gameconfig-daily-kv-col {
    min-width: 0;
}
.gameconfig-daily-kv-col .gameconfig-subsection-title {
    margin-top: 0.75rem;
    margin-bottom: 0.35rem;
}
.gameconfig-daily-kv-col > .gameconfig-subsection-title:first-child {
    margin-top: 0;
    padding-top: 0;
}
.gameconfig-daily-kv-col .gameconfig-kv-table {
    max-width: 100%;
}
.gameconfig-daily-kv-col--span-full {
    grid-column: 1 / -1;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.gameconfig-daily-kv-col--span-full > .gameconfig-subsection-title:first-child {
    margin-top: 0;
}
.gameconfig-block-surface--daily-settings .gameconfig-kv-table--daily-exclude {
    max-width: 100%;
}
@media (max-width: 720px) {
    .gameconfig-daily-kv-grid {
        grid-template-columns: 1fr;
    }
    .gameconfig-daily-kv-col--span-full {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

.daily-mt-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.35rem;
    max-width: none;
}
.daily-mt-card .daily-mt-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.daily-mt-card .daily-mt-card-title {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--accent, #c9a227);
}
.daily-mt-card .daily-mt-fields td:first-child {
    white-space: nowrap;
    width: 1%;
    padding-right: 0.5rem;
    vertical-align: top;
    font-size: 0.88em;
}
.daily-mt-card .daily-mt-fields td:last-child {
    width: 99%;
}
.daily-mt-card .daily-mt-types-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}
.daily-mt-card .daily-mt-skill-cb {
    font-size: 0.85em;
}

/* Game config — scheduled actions (events / tickets) */
.gc-actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin: 0.35rem 0 0.65rem;
}
.gc-actions-toolbar .gc-actions-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    flex: 1 1 auto;
    justify-content: center;
    min-width: min(100%, 220px);
}
.gc-actions-toolbar .gc-actions-add-btn {
    flex: 0 0 auto;
    font-weight: 600;
}
/* Filters: rustiger dan de gouden Add-knop */
.gc-actions-toolbar .gc-action-filter-btn {
    border-color: rgba(201, 162, 39, 0.28);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-primary, #e8e4d4);
}
.gc-actions-toolbar .gc-action-filter-btn:hover {
    border-color: rgba(201, 162, 39, 0.5);
    background: rgba(255, 255, 255, 0.06);
}
.gc-actions-toolbar .gc-action-filter-btn.gc-action-filter-btn--active {
    outline: 2px solid rgba(201, 162, 39, 0.65);
    border-color: rgba(201, 162, 39, 0.5);
    background: rgba(201, 162, 39, 0.14);
}
.gc-actions-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}
.gc-action-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: rgba(0, 0, 0, 0.2);
}
.gc-action-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.gc-action-card__toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.35rem;
    margin: 0;
    border: 1px solid rgba(201, 162, 39, 0.4);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--accent, #c9a227);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}
.gc-action-card__toggle:hover {
    background: rgba(201, 162, 39, 0.12);
}
.gc-actions-events-list--filter-all .gc-action-card__toggle {
    display: inline-flex;
}
.gc-action-card__details {
    margin-top: 0.35rem;
}
.gc-action-phase {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.gc-action-phase--upcoming {
    background: rgba(100, 160, 220, 0.25);
    color: #a8d4ff;
}
.gc-action-phase--active {
    background: rgba(60, 180, 120, 0.28);
    color: #b8f0d0;
}
.gc-action-phase--archived {
    background: rgba(130, 130, 130, 0.28);
    color: #bbb;
}
.gc-action-meta input[type='datetime-local'] {
    min-height: 34px;
    font-size: 0.88rem;
}

.gameconfig-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.15rem;
}
.gameconfig-start-actions .gameconfig-btn-add-item {
    font-size: 0.85em;
    padding: 6px 12px;
}

/* Skills admin – compact, volle breedte */
.admin-skills-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}
.admin-skills-list-panel {
    /* Vaste breedte: niet laten krimpen wanneer de editor rechts openklapt */
    flex: 0 0 400px;
    width: 400px;
    min-width: 360px;
    max-width: min(440px, 100%);
    box-sizing: border-box;
    padding: 6px 8px;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
}
.admin-skills-hint {
    margin: 0 0 1rem 0;
    font-size: 0.9em;
    line-height: 1.35;
}
.admin-skills-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-skills-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.35rem;
    border-radius: 6px;
    background: var(--bg-primary, #1a2520);
    transition: background 0.15s;
    cursor: pointer;
}
.admin-skills-list-item:hover {
    background: rgba(255,255,255,0.05);
}
.admin-skills-list-icon,
.admin-skills-list-emoji {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
    font-size: 1.1em;
    text-align: center;
}
.admin-skills-name-id {
    display: flex;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.admin-skills-list-name {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    font-size: 0.95em;
    line-height: 1.3;
}
.admin-skills-list-cat {
    flex-shrink: 0;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.admin-skills-active-cell {
    flex-shrink: 0;
    font-size: 0.85em;
}
.admin-skills-active-label {
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-skills-active-label input {
    margin: 0;
}
.admin-skills-list-id {
    flex-shrink: 0;
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Admin Achievements –zelfde opbouw als Items/Bronnen: tabel per categorie */
.admin-achievements-section .admin-resources-tables {
    width: 100%;
}
.admin-achievements-table th,
.admin-achievements-table td {
    padding: 0.1rem 0.08rem;
}
.admin-achievements-table .ach-criteria-level {
    width: 4.2em;
    min-width: 4.2em;
    padding: 0.15rem 0.25rem;
    box-sizing: border-box;
}
.admin-achievements-table .ach-cell-checkbox {
    width: 1%;
    white-space: nowrap;
    padding: 0.1rem 0.08rem !important;
    vertical-align: middle;
}
/* ID-kolom smal houden (achievements gebruiken .ach-id-input / .admin-res-input-id) */
.admin-achievements-table th:nth-child(2),
.admin-achievements-table td:nth-child(2) {
    width: 1%;
    max-width: 4.5rem;
    white-space: nowrap;
}
.admin-achievements-table .ach-id-input,
.admin-achievements-table .admin-res-input-id {
    width: 4rem;
    min-width: 4rem;
    max-width: 4.5rem;
    box-sizing: border-box;
    padding: 0.15rem 0.25rem;
    font-size: 0.82rem;
}
.admin-achievements-table .ach-row-select {
    margin: 0;
    cursor: pointer;
}
.admin-achievements-table .ach-data-row:hover {
    background: rgba(201, 176, 55, 0.08);
}
.admin-achievements-table .admin-res-image-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.admin-achievements-table thead tr > th:nth-child(4),
.admin-achievements-table tbody tr.ach-data-row > td:nth-child(4) {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    box-sizing: border-box;
    vertical-align: middle;
}
.admin-achievements-table thead tr > th:nth-child(6),
.admin-achievements-table tbody tr.ach-data-row > td:nth-child(6) {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    box-sizing: border-box;
    vertical-align: middle;
}
.admin-achievements-table .ach-desc-input {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}
.admin-achievements-table .admin-res-image-cell .ach-image-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.admin-interactable-defs-table thead tr > th:nth-child(6),
.admin-interactable-defs-table tbody tr.interactable-def-row > td:nth-child(6) {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    box-sizing: border-box;
    vertical-align: middle;
}
.admin-interactable-defs-table thead tr > th:nth-child(7),
.admin-interactable-defs-table tbody tr.interactable-def-row > td:nth-child(7) {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    box-sizing: border-box;
    vertical-align: top;
}
.admin-interactable-defs-table tbody tr.interactable-def-row > td:nth-child(7) .item-image-field-inner {
    min-width: 0 !important;
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
}
.admin-interactable-defs-table .interactable-def-image-select {
    min-width: var(--admin-image-select-min) !important;
    box-sizing: border-box;
}
.admin-ach-row-preview {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}
.admin-achievements-bulk-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.admin-achievements-bulk-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-achievements-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.admin-skills-edit-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 0.85em;
    background: var(--border, #444);
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
}
.admin-skills-edit-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
}

.admin-skills-editor {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
}
.admin-skills-editor-title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: var(--accent);
}
.admin-skills-editor-subtitle {
    margin: 0 0 1.25rem 0;
    font-size: 0.95em;
}
.admin-skills-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.admin-skills-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.admin-skills-label {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-primary);
}
.admin-skills-input {
    padding: 8px 10px;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95em;
    max-width: 100%;
}
.admin-skills-input--short {
    width: 120px;
}
.admin-skills-input--category {
    width: 100%;
    max-width: 13rem;
    min-width: 9rem;
    align-self: flex-start;
    box-sizing: border-box;
}
.admin-skills-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.admin-skills-name-row .admin-skills-input {
    flex: 1;
    min-width: 140px;
    max-width: 20rem;
}
.admin-skills-id-hint {
    font-size: 0.88em;
    white-space: nowrap;
}
.admin-skills-image-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.admin-skills-image-fields .admin-skills-input {
    flex: 1;
    min-width: 180px;
}
.admin-skills-embed-btn {
    padding: 6px 12px;
    font-size: 0.9em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
.admin-skills-embed-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-skills-or {
    font-size: 0.9em;
    color: var(--text-secondary);
}
/* Bestand kiezen: styled als andere knoppen */
.admin-skills-file-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.9em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-skills-file-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-skills-file-btn input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}
.admin-skills-file-input {
    font-size: 0.85em;
}
.admin-skills-file-name {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}
.admin-skills-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #444);
    display: flex;
    gap: 0.75rem;
}
.admin-skills-btn {
    padding: 8px 16px;
    font-size: 0.95em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
.admin-skills-btn:hover {
    background: rgba(255,255,255,0.08);
}
.admin-skills-btn--primary {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-skills-btn--primary:hover {
    filter: brightness(1.1);
}
.admin-skills-placeholder {
    flex: 1 1 0;
    min-width: 0;
    min-height: 120px;
    padding: 8px;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Skills-pagina: zelfde schaal als Gameconfig (page-head + surfaces + plakkerige opslaan) */
.admin-section-skills .gameconfig-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.admin-section-skills .gameconfig-main.admin-skills-page-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    min-height: 0;
    gap: 1rem;
    align-items: stretch;
    overflow: hidden;
}
.admin-section-skills .admin-skills-list-surface {
    flex: 0 0 min(400px, 100%);
    max-width: min(440px, 100%);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-section-skills .admin-skills-list-surface .admin-skills-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.admin-section-skills .admin-skills-editor-col {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.admin-section-skills .admin-skills-editor.gameconfig-block-surface {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.2rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border, #3a403c);
}
.admin-section-skills .admin-skills-placeholder.gameconfig-block-surface {
    flex: 1;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1.5rem;
    font-size: 0.92rem;
    line-height: 1.4;
}
.admin-section-skills .admin-skills-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    justify-content: flex-end;
}
.admin-section-skills .gameconfig-sticky-bar {
    margin-top: 0.25rem;
}
@media (max-width: 900px) {
    .admin-section-skills .gameconfig-main.admin-skills-page-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .admin-section-skills .admin-skills-list-surface {
        flex: 0 0 auto;
        max-width: none;
        max-height: min(45vh, 22rem);
    }
}

/* ========== Generieke admin layout (zelfde stijl als Skills) ========== */
.admin-panel-layout {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}

.admin-backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    width: 100%;
}
.admin-backup-panel {
    display: flex;
    flex-direction: column;
}

.admin-panel {
    padding: 1.25rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    min-width: 0;
}
.admin-panel--list {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-panel--list .admin-list,
.admin-panel--list .admin-monsters-ul,
.admin-panel--list .admin-list-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.admin-panel--editor {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.admin-panel-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--accent);
}

/* Monster editor: dropdowns over volledige breedte */
.admin-monster-editor-dropdowns {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.admin-monster-dropdown {
    width: 100%;
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    background: var(--bg-secondary, #252a28);
}
.admin-monster-dropdown-summary {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent);
    list-style: none;
    user-select: none;
}
.admin-monster-dropdown-summary::-webkit-details-marker {
    display: none;
}
.admin-monster-dropdown-summary::before {
    content: '▾ ';
    display: inline-block;
    transition: transform 0.2s ease;
}
.admin-monster-dropdown:not([open]) .admin-monster-dropdown-summary::before {
    transform: rotate(-90deg);
}
.admin-monster-dropdown-inner {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border, #444);
}
.admin-monster-dropdown-inner .admin-form-row,
.admin-monster-dropdown-inner .admin-table {
    max-width: 100%;
}
.admin-monster-dropdown-inner select.admin-input {
    min-width: 140px;
    max-width: 100%;
}

.admin-panel-hint {
    margin: 0 0 1rem 0;
    font-size: 0.9em;
    line-height: 1.35;
    color: var(--text-secondary);
}
.admin-form-block {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.admin-form-block:last-child {
    margin-bottom: 0;
}
.admin-form-block h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--accent);
}
.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.admin-form-row:last-child {
    margin-bottom: 0;
}
.admin-label {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-primary);
}
.admin-input,
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form select,
.admin-form textarea {
    padding: 8px 10px;
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95em;
    max-width: 100%;
}
.admin-form input[type="number"] { width: auto; min-width: 60px; }
.admin-actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #444);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.admin-btn {
    padding: 8px 16px;
    font-size: 0.95em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}
.admin-btn:hover {
    background: rgba(255,255,255,0.08);
}
.admin-btn--primary {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-btn--primary:hover {
    filter: brightness(1.1);
}
.admin-placeholder {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    color: var(--text-secondary);
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.admin-file-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.9em;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-file-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-file-btn input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}
.admin-page label.admin-file-btn.admin-file-btn--image-ok,
.admin-page label.admin-skills-file-btn.admin-file-btn--image-ok {
    background: #2d6a4f;
    color: #fff;
    border-color: #3d8a6a;
}
.admin-page label.admin-file-btn.admin-file-btn--image-ok:hover,
.admin-page label.admin-skills-file-btn.admin-file-btn--image-ok:hover {
    background: #347a5a;
    color: #fff;
}
.admin-page label.admin-file-btn.admin-file-btn--image-missing,
.admin-page label.admin-skills-file-btn.admin-file-btn--image-missing {
    background: #6b2a2a;
    color: #fff;
    border-color: #8a3a3a;
}
.admin-page label.admin-file-btn.admin-file-btn--image-missing:hover,
.admin-page label.admin-skills-file-btn.admin-file-btn--image-missing:hover {
    background: #7d3333;
    color: #fff;
}
.admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.35rem;
    border-radius: 6px;
    background: var(--bg-primary, #1a2520);
    transition: background 0.15s;
}
.admin-list-item:hover {
    background: rgba(255,255,255,0.05);
}
.admin-list-item.selected {
    background: var(--bg-secondary);
}
.admin-list-name {
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    font-size: 0.95em;
}
.admin-image-or {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.admin-users-tab {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border, #444);
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 6px;
}
.admin-users-tab:hover {
    background: var(--bg-primary);
}
.admin-users-tab.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-users-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
#admin-users-content .admin-form-block {
    margin-bottom: 1rem;
}
#admin-users-content .admin-form-block:last-child {
    margin-bottom: 0;
}
.admin-users-roles-table .admin-role-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding: 4px 6px;
}
.admin-role-cb-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 2px;
}
.admin-role-cb-wrap input {
    margin: 0;
}
.admin-role-perm-section td {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #d4b84a);
    background: rgba(0, 0, 0, 0.22);
    padding: 8px 10px !important;
    border-top: 1px solid rgba(201, 162, 39, 0.25);
}
.admin-user-ban,
.admin-user-unban,
.admin-user-reset {
    padding: 4px 10px;
    font-size: 0.9em;
    border-radius: 4px;
    border: 1px solid var(--border, #444);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.admin-user-ban:hover,
.admin-user-reset:hover { background: rgba(200,80,80,0.3); }
.admin-user-unban:hover { background: rgba(80,200,80,0.2); }
.admin-user-open {
    border: 1px solid var(--border, #444);
    background: var(--bg-primary, #1a2520);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.admin-user-open:hover {
    border-color: var(--accent, #c9a227);
}
.admin-user-open.active {
    background: rgba(201, 162, 39, 0.15);
    border-color: var(--accent, #c9a227);
    color: var(--accent, #c9a227);
}
.admin-user-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0 0.7rem;
}
.admin-user-detail-tab {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, #444);
    background: var(--bg-primary, #1a2520);
    color: var(--text-primary);
    cursor: pointer;
}
.admin-user-detail-tab.active {
    background: rgba(201, 162, 39, 0.18);
    border-color: var(--accent, #c9a227);
    color: var(--accent, #c9a227);
}
.admin-user-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.45rem 1rem;
}
.admin-user-role-badge {
    display: inline-block;
    border: 1px solid var(--border, #444);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 0.25rem;
    font-size: 0.85em;
}
.admin-user-detail-body code {
    font-family: ui-monospace, monospace;
}
/* Reset-modal: zelfde taal als in-game Account (donkergroen, goud, kaarten) */
.admin-reset-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.58);
    padding: 20px 16px;
    box-sizing: border-box;
}
.admin-reset-modal--mythronia {
    width: min(520px, calc(100vw - 32px));
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(201, 162, 39, 0.38);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(19, 44, 35, 0.98), rgba(12, 32, 25, 0.99));
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
.admin-reset-modal__head {
    flex-shrink: 0;
    padding: 1rem 1.15rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.1) 0%, transparent 100%);
}
.admin-reset-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.02em;
    color: rgba(212, 185, 95, 0.98);
    line-height: 1.25;
}
.admin-reset-modal__banner {
    flex-shrink: 0;
    margin: 0;
    padding: 0.65rem 1.1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(232, 236, 233, 0.9);
    background: rgba(201, 162, 39, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-reset-modal__banner strong {
    color: rgba(232, 200, 110, 0.98);
    font-weight: 600;
}
.admin-reset-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.45) rgba(0, 0, 0, 0.2);
}
.admin-reset-modal__body::-webkit-scrollbar {
    width: 6px;
}
.admin-reset-modal__body::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.4);
    border-radius: 6px;
}
.admin-reset-modal__card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.14);
    padding: 0.55rem 0.65rem 0.6rem;
}
.admin-reset-modal__card-title {
    margin: 0 0 0.45rem 0;
    padding: 0 0 0.35rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(201, 162, 39, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-reset-modal__row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.45rem 0.4rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    border: 1px solid transparent;
}
.admin-reset-modal__row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 162, 39, 0.15);
}
.admin-reset-modal__row:focus-within {
    outline: 2px solid rgba(201, 162, 39, 0.45);
    outline-offset: 2px;
}
.admin-reset-modal__row input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    max-width: 11px;
    max-height: 11px;
    margin: 0.38rem 0 0 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.5);
    background: rgba(8, 18, 14, 0.9);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}
.admin-reset-modal__row input[type="radio"]:hover {
    border-color: rgba(201, 162, 39, 0.88);
}
.admin-reset-modal__row input[type="radio"]:checked {
    border-color: rgba(212, 185, 95, 0.95);
    background-color: rgba(10, 22, 17, 0.98);
    background-image: radial-gradient(
        circle at center,
        rgba(212, 185, 95, 0.98) 0,
        rgba(212, 185, 95, 0.98) 22%,
        transparent 24%
    );
}
.admin-reset-modal__row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.admin-reset-modal__row-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(240, 244, 241, 0.96);
    line-height: 1.3;
}
.admin-reset-modal__row-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(174, 183, 176, 0.92);
}
.admin-reset-modal__quest-panel {
    margin: 0.35rem 0 0.15rem 0;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.admin-reset-modal__quest-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(201, 162, 39, 0.88);
}
.admin-reset-modal__select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(240, 244, 241, 0.96);
    font-size: 0.86rem;
    cursor: pointer;
}
.admin-reset-modal__select:hover,
.admin-reset-modal__select:focus {
    border-color: rgba(201, 162, 39, 0.45);
    outline: none;
}
.admin-reset-modal__footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 18, 14, 0.45);
}
.admin-reset-modal--mythronia .admin-reset-modal__cancel {
    padding: 0.45rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.2);
    color: rgba(232, 236, 233, 0.92);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.admin-reset-modal--mythronia .admin-reset-modal__cancel:hover {
    border-color: rgba(201, 162, 39, 0.45);
    color: rgba(212, 185, 95, 0.98);
}
.admin-reset-modal--mythronia .admin-btn--primary.admin-reset-modal__ok {
    padding: 0.45rem 1.15rem;
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.65);
    background: linear-gradient(180deg, rgba(212, 185, 95, 0.95), rgba(168, 134, 40, 0.92));
    color: rgba(18, 22, 20, 0.95);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: filter 0.12s ease, border-color 0.12s ease;
}
.admin-reset-modal--mythronia .admin-btn--primary.admin-reset-modal__ok:hover {
    filter: brightness(1.06);
    border-color: rgba(232, 210, 130, 0.9);
}
.admin-users-section .admin-bulk-reset-btn {
    flex-shrink: 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--bg-secondary);
}

.admin-system-log-toolbar {
    margin-bottom: 0.5rem;
}
.admin-system-log-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9em;
    color: var(--text-secondary, #999);
}
.admin-system-log-category {
    min-width: 140px;
}
.admin-system-log-wrap {
    max-height: 70vh;
    overflow: auto;
    margin-top: 0.5rem;
}
.admin-system-log-table { font-size: 0.9em; }
.admin-system-log-time { white-space: nowrap; }
.admin-system-log-action { font-weight: 600; }
.admin-system-log-by { color: var(--text-secondary, #999); }
.admin-system-log-row {
    cursor: pointer;
}
.admin-system-log-row:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
}
.admin-system-log-detail-row.hidden {
    display: none;
}
.admin-system-log-detail-cell {
    padding: 0.5rem 1rem !important;
    background: var(--bg-secondary, #252a28);
    border-left: 3px solid var(--accent);
    font-size: 0.85em;
    color: var(--text-secondary, #aaa);
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-system-log-detail-content {
    margin-bottom: 0.75rem;
}
.admin-system-log-detail-actions {
    margin-top: 0.5rem;
}
.admin-system-log-detail-actions .admin-btn {
    margin-right: 0.5rem;
}
.admin-system-log-no-undo {
    margin: 0.5rem 0 0;
    font-size: 0.9em;
}

.skill-icon-preview {
    font-size: 1.2em;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 0;
}
.admin-form--two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.admin-form--two-cols .admin-form-row--full {
    grid-column: 1 / -1;
}
.tile-library-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.tile-library-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary, rgba(255,255,255,0.03));
}
.tile-library-card-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.tile-library-card-name { font-weight: 500; min-width: 80px; }
.tile-library-card-meta { font-size: 0.9em; }
.tile-library-card-actions { display: flex; gap: 0.35rem; margin-left: auto; }
.admin-form .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.admin-form .form-row:last-child {
    margin-bottom: 0;
}

/* Map Editor */
.admin-map-view {
    min-height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-map-view--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg-tertiary);
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.admin-map-view--fullscreen .admin-map-header {
    flex-shrink: 0;
}

.admin-map-view--fullscreen .admin-map-layout {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 1fr;
}

.admin-map-view--fullscreen .admin-map-canvas-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.admin-map-view--fullscreen.admin-section {
    max-width: none;
    padding: 0.5rem;
}

.admin-map-top-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid var(--border, #444);
    flex-shrink: 0;
    color: var(--text, #e8e8e8);
}

/* Tweede menubalk: Kaartdeel, Modus, Doorgang, Wissen – compact */
.admin-map-toolbar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.4rem;
    background: var(--bg-secondary, #252a28);
    border-radius: 6px;
    border: 1px solid var(--border, #444);
    flex-shrink: 0;
}
.admin-map-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.admin-map-toolbar-label {
    color: var(--text, #e8e8e8);
}
.admin-map-toolbar-group .admin-map-toolbar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent, #c9a227);
    margin-right: 0.15rem;
}
.admin-map-toolbar-select {
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--bg-primary, #1a2520);
    color: var(--text, #e0e0e0);
    border: 1px solid var(--border, #444);
    font-size: 0.82rem;
    min-width: 0;
    max-width: 10rem;
}
.admin-map-toolbar-select.admin-map-toolbar-select--narrow {
    max-width: 7rem;
}
.admin-map-toolbar-status {
    font-size: 0.8rem;
    color: var(--text-muted, #999);
    max-width: 12rem;
}
.admin-map-toolbar-btn {
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-primary, #1a2520);
    color: var(--text, #e0e0e0);
    border: 1px solid var(--border, #444);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}
.admin-map-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.admin-map-toolbar-btn.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}
.admin-map-toolbar-row .admin-map-toolbar-btn.hidden {
    display: none !important;
}
.admin-map-toolbar-passage .admin-map-toolbar-select {
    max-width: 9rem;
}
.admin-map-toolbar-apply-btn {
    background: var(--accent, #c9a227);
    color: var(--bg-primary, #1a2520);
    border-color: var(--accent);
    font-weight: 600;
}
.admin-map-toolbar-apply-btn:hover {
    filter: brightness(1.1);
}
.admin-map-toolbar-editing,
.admin-map-toolbar-selection {
    display: none !important;
}

.admin-map-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.admin-map-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-map-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent);
}

.admin-map-header-place {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid var(--border, #444);
}

.admin-map-header-cat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: var(--bg-secondary, #333);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
}

.admin-map-header-place .admin-map-header-select {
    max-width: 160px;
}

#place-subcategory-wrap .admin-map-header-select {
    max-width: 140px;
}

.admin-map-header-select {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-secondary, #252a28);
    color: var(--text, #e8e8e8);
    border: 1px solid var(--border, #444);
    font-size: 0.9em;
    min-width: 0;
}

.admin-map-header-subwrap.hidden {
    display: none !important;
}

.admin-map-header-subwrap {
    display: flex;
    align-items: center;
}

.admin-map-header-tile-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}

.admin-map-header-thumb {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--bg-secondary, #252a28);
    color: var(--text, #e8e8e8);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-map-header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-map-header-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--border, #444);
    border-radius: 2px;
}

.admin-map-header-thumb:hover {
    border-color: var(--text-secondary, #888);
}

.admin-map-header-thumb--selected {
    border-color: var(--accent, #c9a227);
    background: rgba(201, 162, 39, 0.15);
}

.admin-map-header-thumb--resource {
    min-width: 4em;
    font-size: 0.8rem;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text, #e8e8e8);
}
.admin-map-header-thumb--resource:not(:last-child) {
    margin-right: 4px;
}

.admin-map-header-thumb--tile {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
}
.admin-map-header-thumb--tile .admin-map-tile-swatch {
    border-radius: 2px;
}

.admin-map-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-map-part-label {
    font-size: 0.9em;
    color: var(--text-secondary, #aaa);
}
.admin-map-part-select {
    min-width: 180px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-secondary, #252a28);
    color: var(--text, #e0e0e0);
    border: 1px solid var(--border, #444);
}
.admin-map-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-map-dev-hint {
    margin: 0 0 0.75rem 0;
}

.admin-map-preview-link {
    padding: 6px 12px;
    background: var(--accent, #c9a227);
    color: #1a2e24;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9em;
}
.admin-map-preview-link:hover {
    filter: brightness(1.1);
}

.admin-map-fullscreen-btn {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border, #444);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
}
.admin-map-fullscreen-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.admin-map-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.admin-map-sidebar {
    grid-column: 1;
    min-width: 0;
}

.admin-map-right {
    grid-column: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-map-dropdown {
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    background: var(--bg-primary, #1a2520);
    margin-bottom: 0.25rem;
}
.admin-map-dropdown-summary {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
    list-style: none;
    user-select: none;
}
.admin-map-dropdown-summary::-webkit-details-marker {
    display: none;
}
.admin-map-dropdown-summary::before {
    content: '▾ ';
    display: inline-block;
    transition: transform 0.2s;
}
.admin-map-dropdown:not([open]) .admin-map-dropdown-summary::before {
    transform: rotate(-90deg);
}
.admin-map-dropdown-inner {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px solid var(--border, #444);
}
.admin-map-dropdown-inner .admin-map-sidebar-block {
    border-bottom: none;
    padding-top: 0.5rem;
    padding-bottom: 0;
}
.admin-map-dropdown-inner .admin-map-sidebar-block:not(:last-child) {
    border-bottom: 1px solid var(--border, #444);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}

.admin-map-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-map-sidebar-intro {
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border, #444);
}

.admin-map-sidebar-row-blocks {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #444);
}
.admin-map-sidebar-row-blocks .admin-map-sidebar-block {
    flex: 1;
    min-width: 0;
    border-bottom: none;
    padding: 0;
}

.admin-map-sidebar-block {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border, #444);
}
.admin-map-sidebar-block:last-child {
    border-bottom: none;
}

.admin-map-sidebar-title {
    margin: 0 0 0.4rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}

.admin-map-sidebar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.admin-map-sidebar-row--inputs {
    margin-bottom: 0.5rem;
}

.admin-map-status-line {
    margin: 0.15rem 0;
    font-size: 0.9em;
}

.admin-map-btn-block {
    width: 100%;
    padding: 6px 10px;
    margin-top: 0.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.admin-map-btn-block:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.admin-map-btn-small {
    padding: 4px 8px;
    margin-left: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    white-space: nowrap;
}
.admin-map-btn-small:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.admin-map-label {
    display: block;
    margin: 0.35rem 0 0.15rem;
    font-size: 0.85em;
    font-weight: 500;
}

.admin-map-editor-panel,
.admin-map-toolbar-panel,
.admin-map-structure-panel {
    margin-top: 0.5rem;
}
.admin-map-editor-panel .admin-map-type-select,
.admin-map-toolbar-panel .admin-map-type-select,
.admin-map-structure-panel .admin-map-structure-select {
    width: 100%;
    max-width: 100%;
}

.admin-map-zones-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.admin-map-zones-create {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.admin-map-zones-create .admin-zone-input {
    width: 100%;
    min-width: 90px;
    box-sizing: border-box;
}
.admin-map-zones-existing {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.admin-map-zones-select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9em;
}
.admin-map-zone-delete-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border, #444);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
}
.admin-map-zone-delete-btn:hover {
    background: #8b2a2a;
    border-color: #a33;
    color: #fff;
}

.admin-zones-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    max-height: 120px;
    overflow-y: auto;
}

.admin-map-right .admin-map-canvas-wrap {
    flex: 1;
    min-height: 0;
}

.admin-map-canvas-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--bg-primary, #1a2520);
    border-radius: 8px;
    padding: 0.25rem;
    border: 1px solid var(--border, #444);
    /* Geen zichtbare scrollbalk: bewegen alleen door slepen (pan-modus) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.admin-map-canvas-wrap::-webkit-scrollbar {
    display: none;
}

.admin-map-canvas-hint {
    margin: 0 0 0.5rem 0;
    font-size: 0.9em;
}

.admin-map-toolbar-sep {
    color: var(--text-muted, #888);
    margin: 0 0.25rem;
}

.admin-zone-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 2px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 0.9em;
}

.admin-map-toolbar-tiles.hidden,
.admin-map-toolbar-panel.hidden,
.admin-map-structure-panel.hidden,
.admin-map-editor-panel.hidden {
    display: none !important;
}

.admin-map-sidebar .admin-map-category-select,
.admin-map-sidebar .admin-zone-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-map-grid-wrap {
    cursor: default;
}

.admin-map-canvas {
    display: block;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 4px;
    border: 2px solid var(--border, #333);
}

.admin-map-block {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bg-secondary);
    border-radius: 6px;
}

.admin-map-editor .form-row {
    margin: 6px 0;
}

.admin-map-category-block {
    margin-bottom: 0.75rem;
}

.admin-map-category-select,
.admin-map-structure-select {
    min-width: 200px;
    max-width: 100%;
}

.admin-map-structure-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bg-secondary);
}

.admin-map-structure-panel.hidden {
    display: none !important;
}

.admin-map-editor.hidden {
    display: none !important;
}

.admin-map-type-select {
    min-width: 220px;
    max-width: 100%;
}

.admin-map-type-select optgroup {
    font-weight: 600;
    color: var(--accent, #6b9);
    background: var(--bg-primary, #1a2520);
}

.admin-map-size {
    width: 64px;
}

.admin-map-num {
    width: 52px;
}

.admin-map-hint {
    margin: 0 0 0.5rem 0;
    font-size: 0.9em;
}

.admin-map-status {
    margin: 0 0 0.25rem 0;
    font-size: 0.95em;
}

.admin-map-apply {
    margin-top: 0.5rem;
}

.admin-zone-input {
    min-width: 140px;
}

.admin-zones-ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    max-height: 200px;
    overflow-y: auto;
}

.admin-zone-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: var(--bg-primary, #1a2520);
    border-radius: 4px;
}

.admin-zone-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-zone-li .zone-delete {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 0.85em;
}

#map-grid.admin-map-grid {
    display: grid;
    gap: 0;
    margin-top: 6px;
}

#map-grid > div {
    width: 28px;
    height: 28px;
    cursor: pointer;
    border: 2px solid #333;
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

#map-grid > div:hover {
    border-color: #555;
}

#map-grid > div.admin-map-cell--passage {
    box-shadow: inset 0 0 0 2px var(--accent, #c9a227);
}

#map-grid > div.admin-map-cell--entry {
    box-shadow: inset 0 0 0 2px #e6c200;
    border-color: #e6c200;
}

.admin-map-btn-remove {
    background: var(--danger, #b33);
    color: #fff;
}
.admin-map-btn-remove:hover {
    background: var(--danger-hover, #c44);
}

.admin-map-custom-deco-list {
    margin: 0.5rem 0;
    max-height: 120px;
    overflow-y: auto;
}
.admin-map-custom-deco-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 4px;
    background: var(--bg-primary, #1a2520);
    border-radius: 4px;
}
.admin-map-custom-deco-item--selected {
    border-color: var(--accent, #c9a227);
    border-width: 1px;
    border-style: solid;
    background: rgba(255, 255, 255, 0.08);
}
.admin-map-custom-deco-item .custom-deco-del {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 1em;
}
.admin-map-file-input {
    margin: 0.25rem 0;
    font-size: 0.9em;
}

.passage-level-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.passage-level-row .passage-skill-select {
    flex: 1;
    min-width: 0;
}
.passage-min-levels-list {
    margin-bottom: 6px;
}

.admin-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.hidden {
    display: none !important;
}

.admin-editor-tabs .admin-editor-tab {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--text-secondary);
}
.admin-editor-tabs .admin-editor-tab:hover {
    color: var(--text-primary);
}
.admin-editor-tabs .admin-editor-tab.active {
    background: var(--accent, #c9a227);
    color: var(--bg-primary, #1a2520);
    border-color: var(--accent);
}

/* Kaarteditor: zichtbaar raster per vak, hover en selectie */
.admin-editor-cell {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.35);
    cursor: crosshair;
    position: relative;
    flex-shrink: 0;
}
.admin-editor-cell:hover {
    filter: brightness(1.15);
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: -2px;
    z-index: 1;
}
.admin-object-editor .admin-editor-cell {
    cursor: pointer;
}
.admin-terrain-editor .terrain-selected,
.admin-editor-cell.terrain-selected {
    outline: 2px solid var(--accent, #c9a227);
    outline-offset: -2px;
    z-index: 1;
}

.muted {
    color: var(--text-secondary, #888);
    font-style: italic;
}

.form-row {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.form-row label {
    min-width: 100px;
}

.admin-image-or {
    color: var(--text-secondary, #888);
    font-size: 0.9em;
    margin: 0 4px;
}

.form-row input[type="file"] {
    max-width: 180px;
}

/* Unified Items tab – linker kolom smaller, rechter vult; scroll in divs, geen paginascroll */
.admin-items-layout {
    display: flex;
    gap: 1.25rem;
    width: 100%;
    min-height: 0;
    align-items: stretch;
}
.admin-items-list {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
    padding: 1rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.admin-items-list .admin-items-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.admin-items-editor {
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-items-groups {
    margin-top: 8px;
}

.admin-items-skill-group {
    margin-bottom: 4px;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    overflow: hidden;
}

.admin-items-skill-group summary.admin-items-skill-header {
    cursor: pointer;
    padding: 8px 10px;
    background: var(--bg-secondary);
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.admin-items-skill-group summary.admin-items-skill-header::-webkit-details-marker {
    display: none;
}

.admin-items-skill-group summary.admin-items-skill-header::before {
    content: '▸';
    display: inline-block;
    transition: transform 0.15s;
    width: 1em;
}

.admin-items-skill-group[open] summary.admin-items-skill-header::before {
    transform: rotate(90deg);
}

.admin-items-skill-group .admin-items-ul {
    padding: 4px 0 4px 4px;
    border-top: 1px solid var(--border, #333);
}

.admin-items-skill-count {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--text-muted, #666);
}

.admin-items-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-items-li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 4px;
    user-select: none;
    -webkit-user-select: none;
}

.admin-items-li:hover {
    background: var(--bg-secondary);
}

.admin-items-li.selected {
    background: var(--accent);
    color: var(--bg-primary, #1a2e24);
}

.admin-items-id {
    font-family: monospace;
    font-size: 0.85em;
    min-width: 36px;
    color: var(--text-secondary, #888);
}

.admin-items-li.selected .admin-items-id {
    color: inherit;
}

.admin-items-thumb {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.admin-items-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-items-lvl {
    font-size: 0.75em;
    color: var(--text-muted, #666);
    min-width: 1.5em;
    text-align: right;
}
.admin-items-li.selected .admin-items-lvl {
    color: inherit;
    opacity: 0.9;
}

.admin-items-editor {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    background: var(--bg-secondary, #252a28);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    overflow: auto;
}
.admin-items-editor .admin-form h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--accent);
}
.admin-items-editor .admin-actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #444);
    gap: 0.75rem;
}
.item-type-panel {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-primary, #1a2520);
    border: 1px solid var(--border, #444);
    border-radius: 8px;
}
.item-type-panel h5 {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--accent);
}

.material-input-row {
    margin: 4px 0;
}

.material-input-row select {
    min-width: 180px;
}

/* NPC sprite picker: thumbnails in plaats van alleen ID's */
.npc-sprite-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.npc-sprite-picker-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-secondary, #2a3030);
    border: 2px solid var(--border, #444);
    border-radius: 8px;
    color: var(--text-primary, #eee);
    cursor: pointer;
    font-size: 0.95rem;
    min-width: 160px;
    text-align: left;
}
.npc-sprite-picker-current:hover {
    border-color: var(--accent, #6b9);
    background: var(--bg-tertiary, #353d3a);
}
.npc-sprite-picker-thumb {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary, #333);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.npc-sprite-picker-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.npc-sprite-picker-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.npc-sprite-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-primary, #1e2524);
    border: 2px solid var(--border, #444);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    padding: 4px;
}
.npc-sprite-picker-dropdown[hidden] {
    display: none !important;
}
.npc-sprite-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary, #eee);
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
}
.npc-sprite-option:hover {
    background: var(--bg-secondary, #2a3030);
}
.npc-sprite-option img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg-tertiary, #333);
}
.npc-sprite-option--none .npc-sprite-option-thumb {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: var(--bg-tertiary, #333);
    border-radius: 4px;
}
.npc-sprite-option span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nieuwsberichten (admin) */
.admin-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-news-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary, #252a28);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.admin-news-item-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.admin-news-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.admin-news-label--nieuws { background: rgba(201, 162, 39, 0.2); color: var(--accent); }
.admin-news-label--updates { background: rgba(100, 180, 255, 0.15); color: #8ec8ff; }
.admin-news-label--bugfixes { background: rgba(120, 200, 120, 0.15); color: #7acc7a; }
.admin-news-label--onderhoud { background: rgba(255, 180, 80, 0.2); color: #ffb050; }
.admin-news-label--evenement { background: rgba(200, 120, 255, 0.15); color: #c878ff; }
.admin-news-item-head strong {
    flex: 1;
    min-width: 0;
}
.admin-news-item-body {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-news-delete {
    flex-shrink: 0;
    font-size: 0.85rem;
}
.admin-news-body-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: 500px;
}
.admin-news-format-toolbar {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.admin-news-format-btn {
    padding: 4px 10px;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
}
.admin-news-format-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent);
}
.admin-news-format-hint {
    margin: 0;
    font-size: 0.8rem;
}
.admin-news-format-hint code {
    background: rgba(255,255,255,0.1);
    padding: 1px 4px;
    border-radius: 2px;
}

/* Nieuws: completed work-items naast elkaar — Updates vs Bug-fixes */
.admin-news-completed-work-wrap {
    width: 100%;
    max-width: 720px;
}
.admin-news-completed-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    align-items: stretch;
    margin-top: 0.35rem;
}
@media (max-width: 700px) {
    .admin-news-completed-split {
        grid-template-columns: 1fr;
    }
}
.admin-news-completed-col-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-secondary, #b0b8b0);
}
.admin-news-completed-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 9rem;
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 2.5rem;
}
.admin-news-completed-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    font-style: italic;
}
/* Admin toast (korte bevestiging na opslaan) */
.admin-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--success, #7cb559);
    color: var(--bg-primary, #1a2e24);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10000;
    pointer-events: none;
}
.admin-toast[data-visible] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Bronnen: tabel per categorie + alles opslaan */
.admin-resources-bulk-actions {
    margin-bottom: 1rem;
}

.admin-resources-category-select {
    min-width: 140px;
    max-width: min(320px, 55vw);
}

.admin-resources-tables {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 200px;
    /* Geen eigen x-scroll: parent .admin-content-inner scrollt alles tegelijk */
    overflow: visible;
}
.admin-resources-table-block {
    margin-bottom: 0.5rem;
}

.admin-section-header-toolbar--items-partial {
    justify-content: flex-end;
}

/* Items → Armour / Wapens: compact filterkaart (dropdowns + telling rechts) */
.admin-items-subtype-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin: 0 0 0.65rem 0;
    padding: 0.65rem 0.85rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.admin-items-subtype-filters__controls {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem 1rem;
    min-width: 0;
}
.admin-items-subtype-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.admin-items-subtype-filters__field label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #9aa39a);
}
.admin-items-subtype-filters__select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 0.9rem;
    padding: 0.38rem 0.55rem;
}
.admin-items-subtype-filters__summary {
    margin: 0;
    flex: 0 0 auto;
    align-self: center;
    font-size: 0.82rem;
    color: var(--text-secondary, #a8aea8);
    white-space: nowrap;
    padding-bottom: 0.15rem;
}
.admin-items-subtype-filters__summary strong {
    color: var(--accent, #d4c06a);
    font-weight: 700;
}
.admin-armour-slot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0 0 0.65rem 0;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color, #3a4038);
}
.admin-armour-slot-tab {
    margin: 0;
    padding: 0.35rem 0.65rem;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-secondary, #b8c4b8);
    background: var(--bg-primary, #1a1d1b);
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.admin-armour-slot-tab:hover {
    color: var(--text-primary, #e8e4dc);
    border-color: rgba(201, 162, 39, 0.45);
}
.admin-armour-slot-tab--active {
    color: var(--accent, #d4c06a);
    border-color: rgba(201, 162, 39, 0.65);
    background: rgba(201, 162, 39, 0.1);
}
.admin-armour-slot-tab-count {
    opacity: 0.85;
    font-weight: 600;
}

.admin-resources-category-title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--accent, #c9b037);
}
.admin-resources-table-wrap {
    border: 1px solid var(--border-color, #444);
    border-radius: 6px;
    background: var(--bg-secondary, #252825);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}
/* Items (material/tools/armour): brede tabellen mogen horizontaal scrollen i.p.v. kolommen te pletten */
.admin-items-tables .admin-resources-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.admin-resources-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
/* Bronnen-tabel: compact sneloverzicht, weinig padding, kleiner lettertype */
.admin-resources-table {
    font-size: 0.82rem;
}
.admin-resources-table th,
.admin-resources-table td {
    padding: 0.12rem 0.2rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #333);
    vertical-align: middle;
}
.admin-resources-table th {
    background: var(--bg-primary, #1a1d1b);
    color: var(--muted, #888);
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.8rem;
}
.admin-resources-table tbody tr.res-data-row:hover {
    background: rgba(201, 176, 55, 0.08);
}
.admin-resources-table tr.res-add-row td {
    border-bottom: none;
    padding: 0.2rem 0.35rem;
    background: rgba(0,0,0,0.2);
}
.admin-resources-table .res-drops-cell {
    min-width: 160px;
}
.admin-resources-section .admin-resources-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.admin-resources-section .admin-resources-table--land {
    --admin-desc-col-min: 8.75rem;
    --admin-desc-col-width: 9.25rem;
    --admin-desc-col-max: 14rem;
    --admin-image-col-min: 10rem;
    --admin-image-col-width: 11rem;
    --admin-image-col-max: 17rem;
}
.admin-resources-section .admin-resources-table--land .res-drops-cell {
    min-width: 11rem;
    vertical-align: top;
}
.admin-resources-section .admin-resources-table--land td.res-col-draw {
    width: 4.6rem;
    min-width: 4.6rem;
    max-width: 5.5rem;
    text-align: center;
    vertical-align: top;
    padding-top: 0.28rem;
}
.admin-resources-section .admin-resources-table--land .res-draw-size-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    flex-wrap: nowrap;
}
.admin-resources-section .admin-resources-table--land .res-draw-x {
    opacity: 0.55;
    font-size: 0.72rem;
    line-height: 1;
    flex-shrink: 0;
}
.admin-resources-section .admin-resources-table--land .res-mask-cell {
    vertical-align: top;
    max-width: 7rem;
}
.admin-resources-section .admin-resources-table--land .res-mask-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.admin-resources-section .admin-resources-table--land .res-mask-actions .admin-btn {
    padding: 0.12rem 0.38rem;
    font-size: 0.75rem;
}
.admin-resources-section .admin-resources-table--land .res-mask-hint {
    font-size: 0.7rem;
    margin-top: 0.22rem;
    line-height: 1.25;
    word-break: break-word;
}
.admin-resources-section .admin-resources-table--land .res-drop-line-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.18rem 0.35rem;
    width: 100%;
}
.admin-resources-section .admin-resources-table--land .res-table-drop-row {
    margin-bottom: 0.06rem;
}
.admin-resources-section .admin-resources-table--land .res-drop-line-main .res-drop-item {
    min-width: 7.5rem;
    flex: 1 1 7.5rem;
    max-width: 100%;
}
.admin-resources-section .admin-resources-table--land .res-image-cell-inner--compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.admin-resources-section .admin-resources-table--land .res-image-lib-filter-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.admin-resources-section .admin-resources-table--land .res-image-select-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.admin-resources-section .admin-resources-table--land .res-image-cell .res-source-image-select {
    min-width: 9rem !important;
    font-size: 0.78rem !important;
    flex: 1 1 9rem;
}
.admin-resources-table .res-drop-chance-lbl {
    font-size: 0.72rem;
    opacity: 0.85;
    flex-shrink: 0;
}
.admin-resources-table .res-drop-chance--locked {
    opacity: 0.72;
    width: 2.85em;
    min-width: 2.85em;
    padding-left: 0.12rem;
    padding-right: 0.12rem;
}
/* Eerste kolom alleen bij owner = checkbox — smal; zonder owner is eerste kolom ID (breder) */
.admin-resources-table.admin-resources-table--owner-del th:first-child,
.admin-resources-table.admin-resources-table--owner-del td:first-child {
    width: 1%;
    white-space: nowrap;
    max-width: 2.6rem;
    min-width: 2.2rem;
}
.admin-resources-table:not(.admin-resources-table--owner-del) th:first-child,
.admin-resources-table:not(.admin-resources-table--owner-del) td:first-child {
    width: 1%;
    white-space: nowrap;
}
/* Bronnen: géén sticky-kolommen — alleen vaste breedtes; aparte achtergrond verwijderd (leek op “plakpanelen”) */
.admin-resources-section .admin-resources-table {
    width: 100%;
    min-width: max(100%, max-content);
    --res-col-del-w: 2rem;
    --res-col-id-w: 4rem;
}
.admin-resources-section .admin-resources-table th.res-col-id,
.admin-resources-section .admin-resources-table td.res-col-id {
    width: var(--res-col-id-w);
    min-width: var(--res-col-id-w);
    max-width: 4.35rem;
    box-sizing: border-box;
    padding: 0.12rem 0.25rem;
    overflow: visible;
    vertical-align: middle;
}
.admin-resources-section .admin-resources-table.admin-resources-table--owner-del th.res-col-del,
.admin-resources-section .admin-resources-table.admin-resources-table--owner-del td.res-col-del {
    position: relative;
    width: var(--res-col-del-w);
    min-width: var(--res-col-del-w);
    max-width: var(--res-col-del-w);
    box-sizing: border-box;
    padding: 0.1rem 0.05rem;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}
.admin-resources-section .admin-resources-table .res-col-name {
    min-width: 9rem;
    max-width: min(20rem, 42vw);
    box-sizing: border-box;
    vertical-align: middle;
}
.admin-resources-section .admin-resources-table .res-col-name .res-input-name {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
}
.admin-resources-table .res-image-cell .res-source-image-select {
    min-width: var(--admin-image-select-min) !important;
    box-sizing: border-box;
}
.admin-resources-table .res-input-id {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: var(--bg-primary, #333);
    padding: 0.06rem 0.06rem;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.admin-resources-section .admin-resources-table .res-input-id {
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Beschrijving: gebruikt resterende celbreedte op brede schermen (tabel is 100% breed) */
.admin-resources-table input.res-desc-input {
    min-width: 6rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-resources-table th.res-col-desc,
.admin-resources-table td.res-desc-cell:has(.res-desc-input) {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    box-sizing: border-box;
}
.admin-resources-table .res-skill-select {
    min-width: 95px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-resources-table .res-input-num {
    width: 2.8em;
    min-width: 2.8em;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
    box-sizing: content-box;
}
.admin-resources-table .res-input-draw {
    width: 2em;
    min-width: 2em;
    padding: 0.1rem 0.15rem;
    font-size: 0.82rem;
}
.admin-resources-table th.res-col-image,
.admin-resources-table .res-image-cell {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    box-sizing: border-box;
    vertical-align: top;
}
.admin-resources-table .res-image-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
}
.admin-resources-table .res-table-image-upload {
    flex-shrink: 0;
    padding: 0.12rem 0.45rem;
    font-size: 0.75rem;
    border-width: 1px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-resources-table .res-table-image-upload.res-table-image-upload--has {
    background: rgba(34, 110, 58, 0.45);
    border-color: #3d9a5a;
    color: #c8f5d4;
}
.admin-resources-table .res-table-image-upload.res-table-image-upload--has:hover {
    background: rgba(44, 130, 72, 0.55);
    border-color: #4caf6a;
}
.admin-resources-table .res-table-image-upload.res-table-image-upload--empty {
    background: rgba(130, 44, 44, 0.35);
    border-color: #a05050;
    color: #f0c8c8;
}
.admin-resources-table .res-table-image-upload.res-table-image-upload--empty:hover {
    background: rgba(150, 54, 54, 0.45);
    border-color: #c06060;
}
.admin-resources-table .res-table-drop-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.12rem;
}
.admin-resources-table .res-table-drop-row .res-drop-item {
    min-width: 95px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-resources-table .res-table-drop-row .res-drop-amount {
    width: 2.5em;
    padding: 0.1rem 0.15rem;
    font-size: 0.82rem;
}
.admin-resources-table .res-add-drop-in-row {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    margin-top: 0.05rem;
}

/* Fishing-bronnen: smalle ID, naam/tool/beschrijving in verhouding; drops krijgt de rest */
.admin-resources-fishing-intro {
    font-size: 0.82rem;
    margin: 0.1rem 0 0.45rem 0;
    max-width: 52rem;
    line-height: 1.45;
}
.admin-resources-section .admin-resources-table.admin-resources-table--fishing {
    table-layout: auto;
    width: 100%;
    --res-col-id-w: 3.4rem;
}
.admin-resources-section .admin-resources-table--fishing td.res-drops-cell--fishing,
.admin-resources-section .admin-resources-table--fishing th.res-col-drops-fishing {
    vertical-align: top;
}
.admin-resources-section .admin-resources-table--fishing td.res-col-del,
.admin-resources-section .admin-resources-table--fishing th.res-col-del,
.admin-resources-section .admin-resources-table--fishing td.res-col-id,
.admin-resources-section .admin-resources-table--fishing th.res-col-id,
.admin-resources-section .admin-resources-table--fishing td.res-col-name,
.admin-resources-section .admin-resources-table--fishing th.res-col-name,
.admin-resources-section .admin-resources-table--fishing td.res-fishing-tool-item-cell,
.admin-resources-section .admin-resources-table--fishing th.res-col-tool,
.admin-resources-section .admin-resources-table--fishing td.res-desc-cell--fishing,
.admin-resources-section .admin-resources-table--fishing th.res-col-desc,
.admin-resources-section .admin-resources-table--fishing td.res-image-cell,
.admin-resources-section .admin-resources-table--fishing th.res-col-image {
    vertical-align: middle;
}
.admin-resources-section .admin-resources-table--fishing td.res-col-id,
.admin-resources-section .admin-resources-table--fishing th.res-col-id {
    width: var(--res-col-id-w);
    min-width: var(--res-col-id-w);
    max-width: 3.65rem;
    overflow: hidden;
    text-align: center;
}
.admin-resources-section .admin-resources-table--fishing .res-col-id .res-input-id {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 0.12rem;
    padding-right: 0.12rem;
}
.admin-resources-section .admin-resources-table--fishing .res-col-name {
    width: auto;
    min-width: 10rem;
    max-width: 16rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    box-sizing: border-box;
}
.admin-resources-section .admin-resources-table--fishing .res-col-name .res-input-name {
    width: 100%;
    min-width: 0;
}
.admin-resources-table--fishing .res-fishing-tool-item-cell,
.admin-resources-table--fishing th.res-col-tool {
    width: auto;
    min-width: 9.5rem;
    max-width: 14rem;
    overflow: hidden;
}
.admin-resources-table--fishing .res-fishing-tool-item-cell select,
.admin-resources-table--fishing .res-fishing-tool-item-cell .admin-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-resources-table--fishing td.res-desc-cell--fishing,
.admin-resources-table--fishing th.res-col-desc {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    box-sizing: border-box;
}
.admin-resources-table--fishing .res-desc-cell--fishing .res-desc-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.admin-resources-table .res-drops-cell--fishing {
    min-width: 14rem;
    width: auto;
    max-width: none;
}
.admin-resources-table--fishing .res-drops-inner {
    max-width: none;
}
.admin-resources-table--fishing th.res-col-image,
.admin-resources-table--fishing td.res-image-cell {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    box-sizing: border-box;
}
.admin-resources-table td.res-draw-size-cell {
    vertical-align: top;
    white-space: nowrap;
}
.admin-resources-table .res-draw-size-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    flex-wrap: nowrap;
}
.admin-resources-table .res-draw-size-x {
    opacity: 0.85;
    font-size: 0.85em;
}
.admin-resources-table .res-table-drop-row--fish {
    display: block;
    margin-bottom: 0.35rem;
}
.admin-resources-table .res-drop-fish-panel {
    border: 1px solid rgba(201, 176, 55, 0.28);
    border-radius: 6px;
    padding: 0.3rem 0.4rem 0.35rem;
    background: rgba(0, 0, 0, 0.22);
}
.admin-resources-table .res-drop-fish-compact {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.admin-resources-table .res-drop-fish-line1,
.admin-resources-table .res-drop-fish-line2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem 0.4rem;
    width: 100%;
    min-width: 0;
}
.admin-resources-table .res-drop-fish-line1 .res-drop-item {
    flex: 1 1 9rem;
    min-width: 7rem;
    max-width: 100%;
}
.admin-resources-table .res-drop-fish-mini {
    font-size: 0.72rem;
    white-space: nowrap;
}
.admin-resources-table .res-drop-fish-line1 .res-drop-time-min,
.admin-resources-table .res-drop-fish-line1 .res-drop-time-max {
    width: 3.1rem;
}
.admin-resources-table .res-drop-map-parts-ui .res-part-add-select {
    flex: 0 1 12rem;
    min-width: 8rem;
    max-width: 100%;
    font-size: 0.82rem;
}
.admin-resources-table .res-part-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 8rem;
    min-width: 0;
}
.admin-resources-table .res-part-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.1rem 0.35rem 0.1rem 0.45rem;
    border-radius: 4px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 176, 55, 0.35);
    font-size: 0.76rem;
    line-height: 1.2;
    max-width: 100%;
}
.admin-resources-table .res-part-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}
.admin-resources-table .res-part-chip-remove {
    flex-shrink: 0;
    padding: 0 0.2rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary, #a8b5a8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.admin-resources-table .res-part-chip-remove:hover {
    color: var(--danger, #c44);
}
.admin-resources-table .res-drop-fish-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 0.65rem;
    margin-top: 0.4rem;
}
.admin-resources-table .res-drop-fish-row:first-child {
    margin-top: 0;
}
.admin-resources-table .res-drop-fish-label {
    flex: 0 0 6.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #a8b5a8);
    padding-top: 0.18rem;
}
.admin-resources-table .res-drop-fish-item-line,
.admin-resources-table .res-drop-fish-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 10rem;
    min-width: 0;
}
.admin-resources-table .res-drop-fish-item-line .res-drop-item {
    min-width: 9rem;
    max-width: 100%;
}
.admin-resources-table .res-drop-fish-hint {
    font-size: 0.7rem;
    line-height: 1.35;
    display: block;
    margin: 0;
    max-width: 100%;
}
.admin-resources-table .res-drop-fish-row--parts .res-drop-fish-label {
    align-self: flex-start;
}

/* NPC-tabel: compacte vaste kolombreedtes (geen 100% breedte → geen massa ruimte) */
.admin-npcs-table {
    table-layout: fixed;
    width: auto;
    max-width: 100%;
}
.admin-npcs-table .npc-del-th,
.admin-npcs-table .npc-del-cell {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    vertical-align: middle;
}
.admin-npcs-table .npc-id-cell {
    width: 3rem;
    min-width: 3rem;
}
.admin-npcs-table th:first-child,
.admin-npcs-table td:first-child {
    white-space: nowrap;
}
.admin-npcs-table .npc-id-input {
    width: 2.6rem;
    min-width: 2.6rem;
    max-width: 2.6rem;
    background: var(--bg-primary, #333);
    padding: 0.08rem 0.1rem;
    font-size: 0.82rem;
    box-sizing: border-box;
}
.admin-npcs-table .npc-name-cell {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
    white-space: nowrap;
}
.admin-npcs-table .npc-name-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-npcs-table .npc-shop-cell {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
}
.admin-npcs-table .npc-sprite-cell {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-npcs-table .npc-table-sprite-picker {
    position: relative;
    display: inline-block;
}
.admin-npcs-table .npc-table-sprite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    background: var(--bg-secondary, #2a3030);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    font-size: 0.8rem;
}
.admin-npcs-table .npc-table-sprite-btn:hover {
    border-color: var(--accent, #6b9);
    background: var(--bg-tertiary, #353d3a);
}
.admin-npcs-table .npc-table-sprite-thumb {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: var(--bg-primary, #333);
    border-radius: 4px;
    overflow: hidden;
    line-height: 36px;
    text-align: center;
}
.admin-npcs-table .npc-table-sprite-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.admin-npcs-table .npc-table-sprite-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-primary, #1e2524);
    border: 2px solid var(--border, #444);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    z-index: 1000;
    padding: 4px;
}
.admin-npcs-table .npc-table-sprite-dropdown[hidden] {
    display: none !important;
}
.admin-npcs-table .npc-table-sprite-option {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary, #eee);
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
}
.admin-npcs-table .npc-table-sprite-option:hover {
    background: var(--bg-secondary, #2a3030);
}
.admin-npcs-table .npc-table-sprite-option img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg-tertiary, #333);
}
.admin-npcs-table .npc-table-sprite-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-npcs-table .npc-table-sprite-option--none span {
    font-style: italic;
    color: var(--muted, #888);
}
.admin-npcs-table .npc-quests-cell {
    width: 200px;
    min-width: 160px;
    max-width: 240px;
}
/* Quests eerst naast elkaar, pas naar volgende regel als er geen plaats meer is */
.admin-npcs-table .npc-quests-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.admin-npcs-table .npc-quest-row {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.admin-npcs-table .npc-quest-row .npc-quest-select {
    min-width: 100px;
    max-width: 160px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-npcs-table .npc-quest-add {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
}

/* Quest editor refresh: align with current admin look */
.admin-quest-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-quest-editor > .admin-panel-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.admin-quest-editor .quest-section {
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 8px;
    background: rgba(18, 34, 28, 0.45);
    margin-bottom: 0.7rem;
    padding: 0.35rem 0.5rem;
}
.admin-quest-editor .quest-section > summary {
    cursor: pointer;
    color: var(--text-primary);
    padding: 0.2rem 0.1rem;
}
.admin-quest-editor .quest-section > summary strong {
    color: var(--accent);
}
.admin-quest-editor button:not(.admin-btn) {
    border: 1px solid var(--border, #4a5a50);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #d8dfd2);
    border-radius: 6px;
    padding: 0.22rem 0.52rem;
    font-size: 0.86rem;
    line-height: 1.2;
    cursor: pointer;
}
.admin-quest-editor button:not(.admin-btn):hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(201, 162, 39, 0.12);
}
.admin-quest-editor #quest-objectives-list > li {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
}
.admin-quest-editor #quest-obj-target-list > li .admin-btn,
.admin-quest-editor #quest-objectives-list .admin-btn {
    padding: 2px 7px;
    font-size: 0.82rem;
}
.admin-npcs-table .npc-shop-select {
    min-width: 4rem;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-npcs-section .npc-shop-buy-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.35rem 0.75rem;
    margin-top: 0.35rem;
}
.admin-npcs-section .npc-shop-buy-skill-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
}
.admin-npcs-section .npc-shop-admin-item-thumb {
    width: 40px;
    min-width: 40px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-npcs-section .npc-shop-admin-thumb-empty {
    color: var(--text-muted, #888);
    font-size: 12px;
}

/* Monsters-tabel: leesbare kolommen (ID, Naam, stats, Style, Image) */
.admin-monsters-table {
    table-layout: fixed;
    width: 100%;
}
.admin-monsters-table .mon-del-th,
.admin-monsters-table .mon-del-cell {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    vertical-align: middle;
}
.admin-monsters-table th:first-child,
.admin-monsters-table td:first-child {
    white-space: nowrap;
}
/* Kolombreedtes via th + td zodat headers niet overlappen */
.admin-monsters-table .mon-th-id,
.admin-monsters-table .mon-id-cell {
    width: 3.5rem;
    min-width: 3.5rem;
}
.admin-monsters-table .mon-th-drops,
.admin-monsters-table .mon-drops-cell {
    width: 5.6rem;
    min-width: 5.6rem;
    text-align: center;
}
.admin-monsters-table .mon-drops-toggle {
    width: 5.1rem;
    min-width: 5.1rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    line-height: 1;
    font-size: 0.73rem;
}
.admin-monsters-table .mon-th-name,
.admin-monsters-table .mon-name-cell {
    width: 180px;
    min-width: 150px;
    max-width: 260px;
}
.admin-monsters-table .mon-th-desc,
.admin-monsters-table .mon-desc-cell {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    box-sizing: border-box;
}
.admin-monsters-table .mon-id-input {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    background: var(--bg-primary, #333);
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.admin-monsters-table .mon-name-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
}
.admin-monsters-table .mon-desc-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.2rem 0.25rem;
    font-size: 0.8rem;
}
/* Stat-kolommen: duidelijk leesbaar, niet op elkaar geplakt */
.admin-monsters-table .mon-th-stat,
.admin-monsters-table .mon-stat-cell {
    width: 3.2rem;
    min-width: 3rem;
    padding: 0 0.25rem;
    text-align: center;
}
.admin-monsters-table .mon-stat-cell .mon-hp-input,
.admin-monsters-table .mon-stat-cell .mon-attack-input,
.admin-monsters-table .mon-stat-cell .mon-str-input,
.admin-monsters-table .mon-stat-cell .mon-def-input,
.admin-monsters-table .mon-stat-cell .mon-xp-input,
.admin-monsters-table .mon-stat-cell .mon-respawn-input {
    width: 2.8rem;
    min-width: 2.5rem;
    padding: 0.2rem 0.15rem;
    font-size: 0.85rem;
    box-sizing: border-box;
    text-align: center;
}
.admin-monsters-table .mon-th-style,
.admin-monsters-table .mon-style-cell {
    width: 5.5rem;
    min-width: 5rem;
    padding: 0 0.25rem;
}
.admin-monsters-table .mon-style-cell .mon-style-select {
    width: 100%;
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
}
.admin-monsters-table .mon-th-image,
.admin-monsters-table .mon-cell-image {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
    box-sizing: border-box;
}
.admin-monsters-table .mon-th-draw,
.admin-monsters-table .mon-cell-draw {
    width: 84px;
    min-width: 84px;
    text-align: center;
}
.admin-monsters-table .mon-cell-image {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}
.admin-monsters-table .mon-cell-image .mon-row-image {
    flex: 1;
    min-width: var(--admin-image-select-min);
    padding: 0.2rem 0.25rem;
    font-size: 0.8rem;
    box-sizing: border-box;
}
.admin-monsters-table .mon-cell-image .mon-row-image-select {
    min-width: var(--admin-image-select-min) !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-monsters-table .mon-cell-image .mon-table-image-upload {
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}
.admin-monsters-table .mon-cell-draw .mon-draw-size-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.admin-monsters-table .mon-cell-draw .mon-row-draw-w,
.admin-monsters-table .mon-cell-draw .mon-row-draw-h {
    width: 2.7rem;
    min-width: 2.5rem;
    padding: 0.14rem 0.2rem;
    font-size: 0.78rem;
    text-align: center;
    box-sizing: border-box;
}
.admin-monsters-table .mon-stat-cell .mon-stat-label {
    display: inline-block;
    min-width: 2.5rem;
    margin-right: 0.15rem;
    font-size: 0.75rem;
    color: var(--muted, #888);
}
.admin-monsters-table .mon-stat-cell--empty {
    min-width: 3rem;
}
/* Tweede rij: drops editor per monster (inklapbaar) */
.admin-monsters-table .mon-drops-row-cell {
    padding: 0.35rem 0.5rem;
    background: var(--bg-primary, #1a1d1a);
    border-top: 0;
    vertical-align: top;
}
.admin-monsters-table .mon-drops-row-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    flex-wrap: wrap;
    align-items: start;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.45rem 0.5rem;
}
.admin-monsters-table .mon-drops-block {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.02);
}
.admin-monsters-table .mon-drop-mini-head {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 52px 58px 36px 36px 24px;
    gap: 0.2rem;
    font-size: 0.67rem;
    color: var(--muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
    padding: 0 0.05rem;
}
.admin-monsters-table .mon-drops-row-inner .mon-drops-label {
    font-weight: 600;
    color: var(--muted, #888);
    margin-right: 0.2rem;
}
.admin-monsters-table .mon-drops-pct {
    font-size: 0.76rem;
    color: var(--muted, #888);
}
.admin-monsters-table .mon-drops-row-inner .mon-always-drop-select {
    min-width: 100px;
    padding: 0.08rem 0.1rem;
    font-size: 0.78rem;
}
.admin-monsters-table .mon-drops-row-inner .mon-always-amount {
    width: 2.5em;
    padding: 0.06rem 0.08rem;
    font-size: 0.78rem;
}
.admin-monsters-table .mon-drops-row-inner .mon-sec-chance,
.admin-monsters-table .mon-drops-row-inner .mon-tert-chance {
    width: 3em;
    min-width: 3em;
    padding: 0.06rem 0.08rem;
    font-size: 0.78rem;
    box-sizing: border-box;
}
.admin-monsters-table .mon-sec-drop-row,
.admin-monsters-table .mon-tert-drop-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 52px 58px 36px 36px 24px;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.18rem;
}
.admin-monsters-table .mon-sec-drop-row .mon-common-item-select,
.admin-monsters-table .mon-tert-drop-row .mon-rare-item-select {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.06rem 0.1rem;
    font-size: 0.76rem;
}
.admin-monsters-table .mon-sec-drop-row .mon-common-rarity,
.admin-monsters-table .mon-tert-drop-row .mon-rare-rarity,
.admin-monsters-table .mon-sec-drop-row .mon-common-split,
.admin-monsters-table .mon-tert-drop-row .mon-rare-split {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    padding: 0.04rem 0.06rem;
    font-size: 0.76rem;
}
.admin-monsters-table .mon-sec-drop-row .mon-common-min,
.admin-monsters-table .mon-sec-drop-row .mon-common-max,
.admin-monsters-table .mon-tert-drop-row .mon-rare-min,
.admin-monsters-table .mon-tert-drop-row .mon-rare-max {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    padding: 0.04rem 0.06rem;
    font-size: 0.76rem;
}
.admin-monsters-table .mon-sec-drop-row .admin-btn,
.admin-monsters-table .mon-tert-drop-row .admin-btn {
    width: 100%;
    min-width: 0;
    padding: 0.04rem 0;
    font-size: 0.7rem;
}
.admin-monsters-table .mon-sec-drops-list,
.admin-monsters-table .mon-tert-drops-list {
    width: 100%;
}
.admin-monsters-table .mon-sec-add,
.admin-monsters-table .mon-tert-add {
    padding: 0.06rem 0.2rem;
    font-size: 0.72rem;
}
.admin-monsters-table .mon-table-drops-label {
    color: var(--muted, #888);
    font-size: 0.75rem;
    margin-right: 0.1rem;
}
.admin-monsters-table .mon-common-item-select,
.admin-monsters-table .mon-rare-item-select {
    min-width: 5rem;
    max-width: 8rem;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-monsters-table .mon-drops-summary {
    font-size: 0.75rem;
    color: var(--muted, #888);
}
@media (max-width: 1200px) {
    .admin-monsters-table .mon-drops-row-inner {
        grid-template-columns: 1fr;
    }
}

/* Items-tabel: compacte stijl, smalle ID; kolom verwijderen (owner) links van ID */
.admin-items-table .item-del-th,
.admin-items-table .item-del-cell {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    vertical-align: middle;
}

/* Bronnen-tabel: checkbox-kolom (owner) links van ID — zelfde patroon als Items */
.admin-resources-table .res-del-cell {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    text-align: center;
    vertical-align: middle;
}

.admin-items-table th:first-child,
.admin-items-table td:first-child {
    width: 1%;
    white-space: nowrap;
    max-width: 2.8rem;
}
.admin-items-table td:has(.item-id-input) {
    width: 1%;
    white-space: nowrap;
    max-width: 2.8rem;
}
.admin-items-table .item-id-input {
    width: 2.6rem;
    min-width: 2.6rem;
    max-width: 2.6rem;
    background: var(--bg-primary, #333);
    padding: 0.08rem 0.1rem;
    font-size: 0.82rem;
    box-sizing: border-box;
}
.admin-items-table .item-name-input {
    min-width: 90px;
    max-width: 160px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-items-table .item-recipe-toggle-btn {
    margin-left: 6px;
    padding: 0 3px;
    min-width: 16px;
    height: 16px;
    line-height: 14px;
    font-size: 11px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #8f9a8c);
    cursor: pointer;
    border-radius: 3px;
    vertical-align: middle;
}
.admin-items-table .item-recipe-toggle-btn:hover {
    color: var(--accent, #c9a227);
    background: rgba(201, 162, 39, 0.12);
}
.admin-items-table .item-type-select {
    min-width: 95px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-items-table .item-value-input {
    width: 6ch;
    min-width: 6ch;
    max-width: 8ch;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
    box-sizing: border-box;
}
.admin-items-table .item-category-select {
    min-width: 100px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-items-table .item-image-cell {
    vertical-align: top;
    max-width: 5.5rem;
}
.admin-items-table .item-image-field-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 0;
}
.admin-items-table .item-image-field-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.admin-items-table .item-image-cell .item-row-image,
.admin-items-table .item-image-cell .item-row-map-image {
    flex: 1;
    min-width: 0;
    max-width: 140px;
    padding: 0.1rem 0.2rem;
    font-size: 0.82rem;
}
.admin-items-table .item-image-cell .item-table-image-upload,
.admin-items-table .item-image-cell .item-table-map-image-upload {
    align-self: flex-start;
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
}

/* Admin: ID kolommen verbergen (IDs blijven intern bewaard voor updates/import/export) */
.admin-items-table th.item-id-th,
.admin-items-table td.item-id-cell,
.admin-resources-table th.res-col-id,
.admin-resources-table td.res-col-id,
.admin-monsters-table th.mon-th-id,
.admin-monsters-table td.mon-id-cell,
.admin-achievements-table th:nth-child(2),
.admin-achievements-table td:has(.ach-id-input) {
    display: none;
}

/* Afbeeldingsbron (URL / assets / data / emoji) — zie adminImageHelper.js */
.admin-image-field-row {
    min-width: 0;
}
.admin-image-source-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--bg-tertiary, #333);
    color: var(--text-secondary, #bbb);
    border: 1px solid var(--border-color, #444);
}
.admin-image-source-badge[data-source-kind='http'] {
    background: rgba(100, 149, 237, 0.22);
    color: #a8c4ff;
    border-color: rgba(100, 149, 237, 0.45);
}
.admin-image-source-badge[data-source-kind='assets'],
.admin-image-source-badge[data-source-kind='path'] {
    background: rgba(143, 188, 143, 0.22);
    color: #b8d9b8;
    border-color: rgba(143, 188, 143, 0.4);
}
.admin-image-source-badge[data-source-kind='embed'] {
    background: rgba(220, 140, 80, 0.28);
    color: #e8b896;
    border-color: rgba(220, 140, 80, 0.45);
}
.admin-image-source-badge[data-source-kind='empty'] {
    opacity: 0.72;
}

/* Alleen upload zichtbaar; pad op title (hover). Zie adminImageHelper.syncAdminImageRowPresentation */
.admin-page .admin-image-field-row {
    position: relative;
}
.admin-page .admin-image-field-row .admin-image-source-badge {
    display: none !important;
}
.admin-page .admin-image-field-row input.admin-image-ref-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Bronnen: opslaan-balk bij bewerken + groepen per skill */
.admin-resources-save-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--accent);
    color: var(--bg-primary, #1a1d1b);
    border-radius: 6px;
}
.admin-resources-save-bar-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.admin-resources-save-bar-label {
    font-weight: 600;
    flex: 1;
}
.admin-resources-save-bar .admin-btn--primary {
    background: var(--bg-primary, #1a1d1b);
    color: var(--accent);
}
.admin-resources-group {
    margin-bottom: 1.5rem;
}
.admin-resources-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.admin-resources-group-title {
    margin: 0;
    font-size: 1rem;
    color: var(--accent);
}
.admin-btn--danger {
    background: #c23;
    color: #fff;
    border: none;
}
.admin-btn--danger:hover {
    background: #e35;
}

.admin-chat-mod-table {
    table-layout: fixed;
    width: 100%;
}
.admin-chat-mod-table th.admin-chat-mod-time,
.admin-chat-mod-table td.admin-chat-mod-time {
    width: 9.5rem;
    max-width: 9.5rem;
    white-space: nowrap;
    vertical-align: top;
}
.admin-chat-mod-table th.admin-chat-mod-from,
.admin-chat-mod-table td:nth-child(2) {
    width: 11rem;
    max-width: 18%;
    word-break: break-word;
    vertical-align: top;
}
.admin-chat-mod-text {
    width: auto;
    max-width: none;
    word-break: break-word;
    white-space: pre-wrap;
    vertical-align: top;
}

/* Items: uploadknop groen = image aanwezig, rood = nog geen image (URL zit in hidden input) */
.admin-btn--image-ok {
    background: #2d6a4f;
    color: #fff;
    border: 1px solid #3d8a6a;
}
.admin-btn--image-ok:hover {
    background: #347a5a;
    color: #fff;
}
.admin-btn--image-missing {
    background: #6b2a2a;
    color: #fff;
    border: 1px solid #8a3a3a;
}
.admin-btn--image-missing:hover {
    background: #7d3333;
    color: #fff;
}
.admin-items-section .item-image-cell {
    white-space: normal;
}

/* Image library: sorteerkoppen = compacte knoppen in thead */
.admin-media-library-table thead .ml-sort-btn {
    font: inherit;
    font-weight: 600;
    padding: 0.2rem 0.35rem;
    margin: 0;
    border: 1px solid rgba(201, 162, 39, 0.35);
    background: rgba(0, 0, 0, 0.25);
    color: var(--accent, #c9a227);
    cursor: pointer;
    white-space: nowrap;
}
.admin-media-library-table thead .ml-sort-btn:hover {
    border-color: rgba(201, 162, 39, 0.55);
    background: rgba(201, 162, 39, 0.08);
}
.admin-media-library-table thead .ml-sort-btn.ml-sort-btn--icon {
    padding: 0.15rem 0.35rem;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.admin-media-library-table .ml-status-cell {
    text-align: center;
    vertical-align: middle;
    width: 2.75rem;
    padding: 0.25rem;
}
.admin-media-library-table .ml-status-cell svg {
    display: block;
    margin: 0 auto;
}
.admin-media-library-table .ml-status-cell--on {
    color: var(--success, #7a9e5c);
}
.admin-media-library-table .ml-status-cell--off {
    color: var(--muted, #888);
}
.admin-media-library-table .ml-actions-cell {
    white-space: nowrap;
    padding: 0.2rem 0.3rem;
    vertical-align: middle;
    width: 1%;
}
.admin-media-library-table .ml-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.35rem;
    min-width: 1.75rem;
    line-height: 0;
}
.admin-media-library-table .ml-icon-action svg {
    flex-shrink: 0;
}
.admin-media-library-table .ml-icon-action + .ml-icon-action {
    margin-left: 0.12rem;
}

/* Loading cursor tijdens opslaan */
body.admin-loading {
    cursor: wait !important;
}
body.admin-loading * {
    cursor: wait !important;
}

/* Wereldkaart-layout editor */
.admin-world-map-viewport {
    max-height: calc(100vh - 260px);
    overflow: auto;
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    background: #0d0f14;
}
.admin-world-map-viewport.admin-world-map-viewport--pannable {
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.admin-world-map-viewport.admin-world-map-viewport--pannable::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.admin-world-map-viewport.admin-world-map-viewport--pannable.world-map-overview-viewport--dragging {
    cursor: grabbing;
    user-select: none;
}
.admin-world-map-viewport .world-map-overview-hit-tip {
    position: fixed;
    z-index: 20050;
    max-width: 300px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #f0f4f8;
    background: rgba(12, 18, 26, 0.94);
    border: 1px solid rgba(200, 180, 100, 0.45);
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.admin-world-map-board {
    position: relative;
    margin: 0;
    background: #0a0c10;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}
.admin-world-map-part {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: grab;
    overflow: hidden;
    user-select: none;
}
.admin-world-map-part:hover {
    outline: 1px dashed rgba(100, 180, 255, 0.5);
    outline-offset: 0;
}
.admin-world-map-part__cv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.admin-world-map-part__chrome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 6px 8px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    pointer-events: none;
}
.admin-world-map-part:active {
    cursor: grabbing;
}
.admin-world-map-part--active {
    outline: 2px solid rgba(136, 204, 255, 0.75);
    outline-offset: 0;
    box-shadow: none;
    z-index: 4;
}
.admin-world-map-part__title {
    font-weight: 600;
    font-size: 12px;
    margin: 0;
    color: #e8f0ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.admin-world-map-part__meta {
    font-size: 10px;
    opacity: 0.9;
    margin: 2px 0 0;
    color: #b8c8e0;
}
.admin-world-map-label {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, -50%);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px dashed rgba(246, 219, 160, 0.5);
    background: rgba(7, 10, 16, 0.4);
    color: #f8dd9c;
    font-family: "Uncial Antiqua", "Cinzel Decorative", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    cursor: grab;
    user-select: none;
    white-space: nowrap;
}
.admin-world-map-label:hover {
    border-color: rgba(255, 237, 180, 0.85);
}
.admin-world-map-label:active {
    cursor: grabbing;
}
.admin-world-map-label--active {
    border-style: solid;
    border-color: rgba(150, 220, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(100, 190, 255, 0.4);
}

/* Wapen-statistieken: smalle cijfervelden (max. 3 digits) */
.admin-weapon-stat-input {
    width: 2.6rem;
    min-width: 0;
    max-width: 3.25rem;
    box-sizing: border-box;
    padding: 0.2rem 0.25rem;
    text-align: right;
    font-size: 0.8rem;
}
.admin-weapon-th-icon {
    text-align: center;
    width: 2.25rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* Wapen-tabel: duidelijkere kolommen (lijntjes + 2 regels in header) */
.admin-items-table--weapon {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border, #555);
    border-radius: 6px;
    overflow: hidden;
}
.admin-items-table--weapon thead th,
.admin-items-table--weapon tbody td {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: middle;
}
.admin-items-table--weapon thead th:first-child,
.admin-items-table--weapon tbody td:first-child {
    border-left: none;
}
.admin-items-table--weapon tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.12);
}
.admin-items-table--weapon tbody tr:hover {
    background: rgba(201, 162, 39, 0.06);
}
.admin-items-table--weapon .admin-weapon-th {
    text-align: center;
    font-weight: 600;
    padding: 0.35rem 0.2rem;
    min-width: 2.6rem;
    max-width: 4.2rem;
    line-height: 1.15;
    white-space: normal;
    hyphens: auto;
}
.admin-items-table--weapon .admin-weapon-th--wide {
    min-width: 4.5rem;
    max-width: none;
}
.admin-items-table--weapon .admin-weapon-th__l1 {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: var(--text-primary, #e8e4dc);
}
.admin-items-table--weapon .admin-weapon-th__l2 {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-secondary, #a8a8a0);
    margin-top: 0.1rem;
    text-transform: none;
}

/*
 * Alleen echte wapen-/resource-kolommen (niet armour/material): material heeft eigen raster (.admin-items-table--material).
 * kolommen: … Skill → Description → Slot … Dur → Image (global .item-image-cell max-width wordt hier overschreven).
 */
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) {
    table-layout: fixed;
    width: 100%;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) .item-name-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 8rem;
    max-width: none;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) .item-recipe-toggle-btn {
    margin-left: 4px;
    flex-shrink: 0;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) td.item-name-cell {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.3rem;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) th.item-th-name,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) td.item-name-cell {
    width: 15%;
    min-width: 10rem;
    max-width: none;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(4),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(4) {
    width: 4.85rem;
    max-width: 4.85rem;
    min-width: 4.85rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) .item-value-input {
    width: 100%;
    max-width: 4.75ch;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) th.item-th-name,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) td.item-name-cell {
    width: 15%;
    min-width: 10rem;
    max-width: none;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(3),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(3) {
    width: 4.85rem;
    max-width: 4.85rem;
    min-width: 4.85rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) .item-value-input {
    width: 100%;
    max-width: 4.75ch;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(5),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(5),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(4),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(4) {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding: 0.12rem 0.06rem;
    box-sizing: border-box;
    vertical-align: middle;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) .item-category-icon-btn,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) .item-category-icon-btn {
    width: 1.8rem;
    height: 1.8rem;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) th.item-th-weapon-desc,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) td.item-weapon-desc-cell,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) th.item-th-weapon-desc,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) td.item-weapon-desc-cell {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    text-align: left;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table .item-th-resource-desc,
.admin-items-table td.item-resource-desc-cell {
    width: var(--admin-desc-col-width);
    min-width: var(--admin-desc-col-min);
    max-width: var(--admin-desc-col-max);
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table td.item-resource-desc-cell .item-resource-description {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.82rem;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(7),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(7),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(6),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(6) {
    width: 4.75rem;
    min-width: 4.6rem;
    max-width: 5.1rem;
    padding: 0.12rem 0.1rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(8),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(8),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(7),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(7) {
    width: 6.25rem;
    min-width: 6rem;
    max-width: 6.85rem;
    padding: 0.15rem 0.14rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(9),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(9),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(8),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(8) {
    width: 3.6rem;
    min-width: 3.35rem;
    max-width: 3.95rem;
    padding: 0.15rem 0.14rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(10),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(10),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(9),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(9) {
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 3.1rem;
    padding: 0.15rem 0.1rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(n + 11):nth-child(-n + 15),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(n + 11):nth-child(-n + 15),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(n + 10):nth-child(-n + 14),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(n + 10):nth-child(-n + 14) {
    width: 2.95rem;
    max-width: 3.15rem;
    min-width: 2.85rem;
    padding: 0.12rem 0.28rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) thead tr > th:nth-child(16),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(16),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) thead tr > th:nth-child(15),
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(15) {
    width: 4.35rem;
    min-width: 4.35rem;
    max-width: 4.85rem;
    padding: 0.12rem 0.42rem;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):has(thead .item-del-th) tbody tr.item-data-row > td:nth-child(16) .item-durability-min,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(:has(thead .item-del-th)) tbody tr.item-data-row > td:nth-child(15) .item-durability-min {
    width: 100%;
    min-width: 3.8rem;
    max-width: 4.65rem;
    box-sizing: border-box;
    padding: 0.18rem 0.42rem;
    text-align: right;
    font-size: 0.82rem;
}
/*
 * Image-kolom (wapens e.a., niet armour/tool): td.item-image-cell — geen nth-child.
 * Globaal .item-image-cell max-width 5.5rem + inline min-width:0 op library-wrap knellen de combobox weg.
 */
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) thead tr > th.admin-weapon-th--wide:last-child {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max);
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max) !important;
    vertical-align: top;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell .item-image-field-inner {
    min-width: 0 !important;
    max-width: none;
    width: 100%;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell .item-image-lib-filter-wrap {
    min-width: 0 !important;
    width: 100%;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell .item-image-field-line {
    flex-wrap: nowrap;
    min-width: 0 !important;
    width: 100%;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) .item-image-cell .item-row-image,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) .item-image-cell .item-row-map-image {
    max-width: 100%;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell select.item-row-image-select,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell .item-row-image-select {
    min-width: var(--admin-image-select-min) !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material):not(.admin-items-table--tool) tbody tr.item-data-row > td.item-image-cell .item-row-image.admin-input {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) select.item-weapon-slot,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) select.item-weapon-combat,
.admin-items-table--weapon:not(.admin-items-table--armour):not(.admin-items-table--material) select.item-weapon-handed {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 0.76rem;
    padding: 0.12rem 0.42rem 0.12rem 0.38rem;
    box-sizing: border-box;
}

/* Items — Materials: zelfde probleem als armour — `.admin-items-table--weapon .admin-weapon-th { max-width: 4.2rem }`
 * kneep Skill/Use/Heal + fixed layout; daarom auto layout + expliciete kolombreedtes. */
.admin-items-table--material.admin-items-table--weapon {
    overflow: visible;
}
.admin-items-table--material {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}
.admin-items-table--material .admin-weapon-th {
    max-width: none;
    min-width: 2.75rem;
    white-space: normal;
}
.admin-items-table--material td.item-name-cell {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.3rem;
}
.admin-items-table--material th.item-th-name,
.admin-items-table--material td.item-name-cell {
    min-width: 10rem;
    width: 13rem;
    max-width: 18rem;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table--material .item-name-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-items-table--material thead .item-th-value,
.admin-items-table--material td.item-value-cell {
    width: 5.25rem;
    min-width: 4.85rem;
    max-width: 6.5rem;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table--material .item-value-cell .item-value-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-items-table--material .item-category-icon-cell {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    padding: 0.12rem 0.08rem;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table--material .item-category-icon-btn {
    width: 1.85rem;
    height: 1.85rem;
}
.admin-items-table--material .item-category-icon-img {
    width: 1.05rem;
    height: 1.05rem;
}
.admin-items-table--material .item-category-icon-glyph {
    font-size: 0.72rem;
}
.admin-items-table--material .item-material-food-th,
.admin-items-table--material .item-material-food-cell {
    width: 3rem;
    min-width: 2.75rem;
    max-width: 3.5rem;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table--material .item-material-food-cell .item-material-food {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 auto;
    vertical-align: middle;
}
.admin-items-table--material .item-material-heal-th,
.admin-items-table--material .item-material-heal-cell {
    width: 4.5rem;
    min-width: 4rem;
    max-width: 6rem;
    box-sizing: border-box;
}
.admin-items-table--material thead tr > th.admin-weapon-th--wide:last-child,
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell {
    width: var(--admin-image-col-width);
    min-width: var(--admin-image-col-min);
    max-width: var(--admin-image-col-max) !important;
    vertical-align: top;
    box-sizing: border-box;
}
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell .item-image-field-inner {
    min-width: 0 !important;
    max-width: none;
    width: 100%;
}
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell .item-image-lib-filter-wrap {
    min-width: 0 !important;
    width: 100%;
}
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell .item-image-field-line {
    flex-wrap: nowrap;
    min-width: 0 !important;
    width: 100%;
}
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell select.item-row-image-select,
.admin-items-table--material tbody tr.item-data-row > td.item-image-cell .item-row-image-select {
    min-width: var(--admin-image-select-min) !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box;
}

/* Items — Tools: hardcoded, single source, no nth-child fallbacks. */
.admin-items-table--tool {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border, #555);
    border-radius: 6px;
    overflow: hidden;
}
.admin-items-table--tool th,
.admin-items-table--tool td {
    white-space: nowrap;
    vertical-align: middle;
}
.admin-items-table--tool thead th,
.admin-items-table--tool tbody td { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.admin-items-table--tool thead th:first-child,
.admin-items-table--tool tbody td:first-child { border-left: none; }
.admin-items-table--tool tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.12); }
.admin-items-table--tool tbody tr:hover { background: rgba(201, 162, 39, 0.06); }

.admin-items-table--tool th.item-th-tool-name,
.admin-items-table--tool td.item-name-cell { width: 13.5rem !important; min-width: 13.5rem !important; max-width: 13.5rem !important; }
.admin-items-table--tool th.item-th-tool-value,
.admin-items-table--tool td.item-value-cell { width: 4.5rem !important; min-width: 4.5rem !important; max-width: 4.5rem !important; }
.admin-items-table--tool th.item-th-tool-skillico,
.admin-items-table--tool td.item-category-icon-cell { width: 3rem !important; min-width: 3rem !important; max-width: 3rem !important; padding: 0.12rem 0.08rem; text-align: center; }
.admin-items-table--tool th.item-th-tool-description,
.admin-items-table--tool td.item-tool-desc-cell { width: 11.5rem !important; min-width: 11.5rem !important; max-width: 11.5rem !important; }
.admin-items-table--tool th.item-th-tool-tskill,
.admin-items-table--tool td.item-tool-skill-cell { width: 7.8rem !important; min-width: 7.8rem !important; max-width: 7.8rem !important; }
.admin-items-table--tool th.item-th-tool-ttype,
.admin-items-table--tool td.item-tool-type-cell { width: 6.4rem !important; min-width: 6.4rem !important; max-width: 6.4rem !important; }
.admin-items-table--tool th.item-th-tool-reqlvl,
.admin-items-table--tool td.item-tool-req-cell { width: 3.2rem !important; min-width: 3.2rem !important; max-width: 3.2rem !important; }
.admin-items-table--tool th.item-th-tool-timepct,
.admin-items-table--tool td.item-tool-time-cell { width: 5.4rem !important; min-width: 5.4rem !important; max-width: 5.4rem !important; }
.admin-items-table--tool th.item-th-tool-dbl,
.admin-items-table--tool td.item-tool-double-cell { width: 2.2rem !important; min-width: 2.2rem !important; max-width: 2.2rem !important; text-align: center; }
.admin-items-table--tool th.item-th-tool-durmin,
.admin-items-table--tool td.item-tool-dur-cell { width: 3.6rem !important; min-width: 3.6rem !important; max-width: 3.6rem !important; }
.admin-items-table--tool th.admin-weapon-th--wide-tool,
.admin-items-table--tool td.item-image-cell { width: 12.5rem !important; min-width: 12.5rem !important; max-width: 12.5rem !important; }

.admin-items-table--tool .item-name-input,
.admin-items-table--tool .item-value-cell .item-value-input,
.admin-items-table--tool .item-tool-desc-cell .admin-input,
.admin-items-table--tool .item-tool-skill-cell select,
.admin-items-table--tool .item-tool-type-cell select,
.admin-items-table--tool .item-image-cell .item-row-image-select,
.admin-items-table--tool .item-image-cell select.item-row-map-image-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.admin-items-table--tool .item-category-icon-btn { width: 1.85rem; height: 1.85rem; }
.admin-items-table--tool .item-tool-time-cell {
    display: table-cell !important;
    text-align: center !important;
    overflow: visible !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}
.admin-items-table--tool .item-tool-time-cell .item-tool-time-reduction {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 0.9rem !important;
    padding: 0.1rem 0.2rem !important;
    box-sizing: border-box !important;
}
.admin-items-table--tool .item-tool-req-cell .item-tool-min-level,
.admin-items-table--tool .item-tool-dur-cell .item-durability-min {
    width: 100% !important;
    min-width: 0 !important;
}

/* Items — Armour: geen weapon-th max-width (anders stapelen alle koppen); tabel breed genoeg + horizontaal scrollen */
.admin-items-table--armour.admin-items-table--weapon {
    overflow: visible;
}
.admin-items-table--armour {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}
/* Weapon-deel deelt `.admin-weapon-th { max-width: 4.2rem }` — dat breekt Armour (15+ kolommen). */
.admin-items-table--armour .admin-weapon-th {
    max-width: none;
    min-width: 2.75rem;
    white-space: normal;
}
.admin-items-table--armour .admin-weapon-th--wide-armour {
    min-width: var(--admin-image-col-min);
}
.admin-items-table--armour th.item-th-name,
.admin-items-table--armour td.item-name-cell {
    max-width: 12rem;
    width: 9rem;
}
.admin-items-table--armour .item-name-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-items-table--armour .item-value-cell {
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}
.admin-items-table--armour .item-value-cell .item-value-input {
    width: 7ch;
    min-width: 7ch;
}
.admin-items-table--armour .item-category-icon-cell {
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 2.85rem;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.admin-items-table--armour .item-category-icon-btn {
    width: 1.95rem;
    height: 1.95rem;
}
.admin-items-table--armour th.item-th-armour-desc,
.admin-items-table--armour td.item-armour-desc-cell {
    min-width: var(--admin-desc-col-min);
    width: var(--admin-desc-col-width);
    max-width: var(--admin-desc-col-max);
    vertical-align: middle;
}
.admin-items-table--armour th.item-th-armour-image,
.admin-items-table--armour td.item-image-cell {
    min-width: var(--admin-image-col-min);
    width: var(--admin-image-col-width);
    max-width: var(--admin-image-col-max);
    vertical-align: top;
}
.admin-items-table--armour .item-armour-desc-cell .admin-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.82rem;
}
.admin-items-table--armour .item-image-cell .item-row-image-select,
.admin-items-table--armour select.item-row-image-select {
    min-width: var(--admin-image-select-min);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.admin-items-table--armour tbody tr.item-data-row > td .item-armour-slot,
.admin-items-table--armour tbody tr.item-data-row > td .item-armour-combat {
    min-width: 5.5rem;
    font-size: 0.76rem;
}
.admin-items-table--armour tbody tr.item-data-row .admin-weapon-stat-input {
    min-width: 2.75rem;
}
.admin-items-table--armour tbody tr.item-data-row .item-durability-min {
    min-width: 3.25rem;
    width: 3.75rem;
    box-sizing: border-box;
}
.admin-items-table--armour .item-image-cell .item-row-image,
.admin-items-table--armour .item-image-cell .item-row-map-image {
    max-width: none;
}

/* Armour / Wapens recept: zelfde expandable banden; td niet clippen */
tr.item-recipe-row[data-parent-type='armour'] td.item-recipe-armour-td,
tr.item-recipe-row[data-parent-type='weapon'] td.item-recipe-armour-td,
.admin-items-table--armour tr.item-recipe-row td,
.admin-items-table--weapon tr.item-recipe-row td {
    overflow: visible;
    vertical-align: top;
}
.item-recipe-armour-pack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.item-recipe-armour-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 1.25rem;
}
.item-recipe-line-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    flex: 1 1 min(100%, 26rem);
}
.recipe-ingredients-armour {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    gap: 0.4rem 0.65rem;
    flex: 1 1 min(14rem, 100%);
}
.recipe-ingredient-rows-armour {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 min(12rem, 100%);
}
.recipe-ingredient-row-armour {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.recipe-ingredient-row-armour .recipe-item-select-armour {
    flex: 1;
    min-width: 11rem;
    max-width: 26rem;
    font-size: 0.82rem;
}
.recipe-ingredient-row-armour .recipe-amount-input-armour {
    flex-shrink: 0;
}
.recipe-add-ingredient-armour {
    flex: 0 0 auto;
    align-self: flex-end;
}
.item-armour-bonus-in-recipe {
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}
.item-armour-bonus-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent, #c9a227);
    margin-bottom: 0.35rem;
}
.item-armour-bonus-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
}
.item-armour-bonus-grid label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.item-category-select--hidden {
    display: none;
}
.item-category-icon-cell {
    position: relative;
    text-align: center;
    min-width: 2.2rem;
    padding: 0.2rem 0.1rem;
}
.item-category-icon-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.item-category-icon-btn:hover {
    border-color: rgba(255, 235, 170, 0.5);
    background: rgba(255, 235, 170, 0.08);
}
.item-category-icon-img {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
    display: block;
}
.item-category-icon-glyph {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-primary, #f0ece1);
}
.item-category-icon-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.2rem;
    padding: 0.25rem;
    min-width: 8.8rem;
    background: rgba(9, 23, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.45rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.item-category-icon-menu.hidden {
    display: none;
}
.item-category-option {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.item-category-option:hover {
    border-color: rgba(255, 235, 170, 0.55);
    background: rgba(255, 235, 170, 0.1);
}

/* Media Library: bulk upload voortgang */
.ml-bulk-upload-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}
.ml-bulk-upload-modal {
    width: min(420px, 100%);
    padding: 1.25rem 1.35rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 235, 170, 0.28);
    background: var(--bg-secondary, #252a28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.ml-bulk-upload-modal h3 {
    margin: 0 0 0.65rem 0;
    font-size: 1.05rem;
    color: var(--text-primary, #f0ece1);
}
.ml-bulk-upload-status {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #f0ece1);
}
.ml-bulk-upload-bar-wrap {
    height: 10px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin-bottom: 0.55rem;
}
.ml-bulk-upload-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    background: linear-gradient(90deg, #c9a227, #f0d060);
    transition: width 0.2s ease-out;
}
.ml-bulk-upload-current {
    margin: 0 0 0.85rem 0;
    font-size: 0.82rem;
    word-break: break-all;
    min-height: 1.2em;
    color: var(--text-secondary, #b8b3a8);
}
.ml-bulk-upload-current.ml-bulk-upload-current--error {
    color: #f08080;
}
.ml-bulk-upload-current.ml-bulk-upload-current--skipped {
    color: #9aa89a;
}
.ml-bulk-upload-summary {
    margin: 0 0 0.85rem 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary, #f0ece1);
}
.ml-bulk-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Image library: live zoekfilter naast dropdown (legacy; combobox vervangt dit op meeste plekken) */
.admin-image-lib-name-filter {
    width: 100%;
    max-width: 260px;
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    box-sizing: border-box;
}

/* Media Library: doorzoekbare combobox (typ in veld, Enter kiest) */
.admin-media-lib-combobox {
    position: relative;
    flex: 1;
    min-width: 0;
    width: 100%;
}
.admin-media-lib-combobox-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
}
.admin-media-lib-combobox-input {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    border-radius: 4px 0 0 4px;
    border-right: none;
}
.admin-media-lib-combobox-btn {
    flex-shrink: 0;
    width: 2rem;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--border-color, #555);
    background: var(--bg-primary, #333);
    color: var(--text-secondary, #c8c4bc);
}
.admin-media-lib-combobox-btn:hover {
    color: var(--text-primary, #f0ece1);
    background: var(--bg-secondary, #3a403c);
}
.admin-media-lib-combobox-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 200;
    margin: 2px 0 0 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: min(240px, 40vh);
    overflow-y: auto;
    border-radius: 4px;
    border: 1px solid var(--border-color, #555);
    background: var(--bg-secondary, #252a28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.admin-media-lib-combobox-option {
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--text-primary, #ebe6dc);
}
.admin-media-lib-combobox-option.is-highlighted {
    background: rgba(80, 140, 220, 0.35);
    outline: none;
}
.admin-media-lib-combobox-group {
    padding: 0.2rem 0.55rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--admin-accent-muted, #d4c896);
    pointer-events: none;
}
.admin-media-lib-combobox-native-select {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
    opacity: 0;
    pointer-events: none !important;
}
.admin-media-lib-combobox-list--above {
    top: auto;
    bottom: 100%;
    margin: 0 0 2px 0;
}