/* Toolbar: two flex rows, icon-only main actions, preset row below */
.toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.toolbar-actions {
    gap: 0.25rem;
}

.toolbar-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid #a08b6e;
    border-radius: 0.25rem;
    background: #e8e0d4;
    color: #522;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.toolbar-btn-icon:hover {
    background: #c9a227;
    border-color: #a8831e;
    color: #fff;
}

.toolbar-btn-icon .bi {
    font-size: 1.15em;
}

.toolbar-preset-label {
    margin: 0 0.25rem 0 0;
    font-weight: 500;
    white-space: nowrap;
}

.toolbar-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    border: 1px solid #a08b6e;
    border-radius: 0.25rem;
    background: #e8e0d4;
    color: #522;
    cursor: pointer;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: #c9a227;
    border-color: #a8831e;
    color: #fff;
}

.toolbar-btn-primary {
    font-weight: 500;
    background: #c9a227;
    border-color: #a8831e;
    color: #fff;
}

.toolbar-btn-primary:hover {
    background: #a8831e;
    border-color: #8a6b18;
    color: #fff;
}

.toolbar-btn-secondary {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
}

.preset-group .ts-wrapper {
    margin-right: 0;
}

.indent {
    text-indent: 1rem;
}

.reverse-indent {
    text-indent: -1rem;
    padding-left: 1rem;
}

.removable-list-item:hover {
    color: red;
    text-decoration: line-through;
    cursor: pointer;
}

.statblock-image {
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.statblock-list {
    text-align: left;
    margin: 4px 4px .5rem;
    padding-left: 16px;
}

#stat-block-wrapper {
    margin: 20px;
    box-shadow: 0 0 1.5rem #867453;
    display: inline-block;
}

.monster-loading {
    margin-right: 0.5rem;
}

.monster-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: monster-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.35rem;
}

@keyframes monster-spin {
    to { transform: rotate(360deg); }
}

.monster-error {
    margin-right: 0.5rem;
    color: #c00;
    font-size: 0.9em;
}

.monster-error-hidden {
    display: none;
}

/* Monster preset dropdown (Tom Select) */
.preset-group .ts-wrapper {
    min-width: 14rem;
    max-width: 22rem;
    margin-right: 0.5rem;
    display: inline-block;
}

.preset-group .ts-control,
.preset-group .ts-control input,
.preset-group .ts-dropdown .option {
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.35rem 0.5rem;
}

/* Single line: no wrap, clear button stays on right, long text ellipsis */
.preset-group .ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
    align-items: center;
}

/* Selected name: take available space, ellipsis if long, never collide with clear button */
.preset-group .ts-wrapper.single.has-items .ts-control [data-ts-item] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 1.75rem; /* room for the × button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When closed, hide the search input from taking flex space so the selected name gets room */
.preset-group .ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input {
    flex: 0 0 0;
    min-width: 0;
    max-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Clear button: always visible when something is selected, fixed on the right, no overlap */
.preset-group .ts-wrapper.plugin-clear_button.has-items .clear-button {
    opacity: 1;
    left: auto;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Reserve space so selected text doesn’t run under the clear button */
.preset-group .ts-wrapper.single.plugin-clear_button.has-items .ts-control {
    padding-right: 0.75rem;
}

/* Tom Select dropdown may render outside preset-group */
.ts-dropdown .ts-dropdown-content {
    max-height: min(70vh, 320px);
}

.preset-group .ts-dropdown .option {
    white-space: nowrap;
}

#monster-select-input {
    min-width: 14rem;
    margin-right: 0.5rem;
}

#understands-but-input {
    width: 8rem;
}

#other-language-input {
    width: 16rem;
}

#format-helper {
	font-style: italic;
}

#legendaries-descsection {
    margin: 8px 0 0;
}

#stat-helper tr {
    border-bottom: 1px solid;
}

#stat-helper td,
#stat-helper th {
    text-align: center;
    border-left: 1px solid;
    min-width: 3rem;
    padding: 0 .5rem;
}

#stat-helper .left-td {
    border-left: none;
    text-align: left;
    padding-left: 0px;
    font-weight: bold;
}

@media screen and (min-width: 992px) {
    #stat-block-body {
        background-image: url("../dndimages/statblockbkg.jpg");
    }
}