.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--net-spacing-xs);
    /* Block padding via --ctrl-pad-y for the same reason as the min-height
       below: 0.5rem top and bottom is 16px, most of a compact box. Partials
       zero it whenever they set an explicit height. */
    padding: var(--ctrl-pad-y, var(--net-spacing-sm)) var(--net-spacing-md);
    border: none;
    border-radius: var(--net-border-radius-base);
    font-size: var(--net-font-size-base);
    font-family: var(--net-font-family-base);
    font-weight: 500;
    cursor: pointer;
    transition: var(--net-transition-fast);
    text-decoration: none;
    user-select: none;
    /* --ctrl-h: see ui.dropdown.css. An explicit height passed to
       button.php lost to this floor, because min-height always outranks
       height. The size modifiers below carry their own floor, so they
       read the same variable or .btn-lg would re-floor a sized button. */
    min-height: var(--ctrl-h, 24px);
    white-space: nowrap !important;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--net-shadow-base);
}

.btn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Button variants */
.btn-primary {
    background: var(--net-color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--net-color-primary-hover);
}

.btn-secondary {
    background: var(--net-color-secondary);
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--net-color-secondary-hover);
}

.btn-success {
    background: var(--net-color-success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--net-color-success-hover);
}

.btn-warning {
    background: var(--net-color-warning);
    color: var(--net-text-primary);
}

.btn-warning:hover:not(:disabled) {
    background: var(--net-color-warning-hover);
}

.btn-danger {
    background: var(--net-color-danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: var(--net-color-danger-hover);
}

.btn-info {
    background: var(--net-color-info);
    color: var(--net-color-text);
}

.btn-info:hover:not(:disabled) {
    background: var(--net-color-info-hover);
}

/* Semantic aliases used by some pages */
.btn-edit { background: var(--net-color-warning); color: var(--net-text-primary); }
.btn-delete { background: var(--net-color-danger); color: white; }
.btn-preview { background: var(--net-color-info); color: white; }

/* Button sizes */
.btn-xs,.btn-small,.xs-btn {
    /*padding: var(--net-spacing-xs) var(--net-spacing-sm);*/
    padding: 2px 6px;
    font-size: var(--net-font-size-xs);
    min-height: 8px;
    text-decoration: none;
}
.btn-sm,.btn-small,.sm-btn {
    padding: var(--net-spacing-xs) var(--net-spacing-sm);
    font-size: var(--net-font-size-sm);
    min-height: var(--ctrl-h, 24px);
    text-decoration: none;
}

.btn-lg, .btn-large {
    padding: var(--net-spacing-md) var(--net-spacing-lg);
    font-size: var(--net-font-size-lg);
    min-height: var(--ctrl-h, 48px);
    text-decoration: none;
}

/* Button groups */
.btn-group {
    display: flex;
    gap: var(--net-spacing-xs);
}

.btn-group .btn {
    flex: 1;
}


button {
  white-space: nowrap;
  cursor:pointer;
}

/* ── #export_ai_ref_btn — hard stop on label overflow ─────────────────────
   exportAiRef() streams NDJSON progress into this button ("☁ 6/11 lookups",
   "⚠ No API key"), and those run wider than the static "📤 Export Ref" the
   button is sized for. Without a clamp the text spills past the border and
   over the neighbouring button, which just reads as broken.

   Same shape as .err-actions .btn in ui.threats.css: min-width:0 is what
   actually lets a flex item shrink below its own text, and the clamp sits on
   .btn-label because the handler writes to that span rather than replacing
   btn.textContent. Scoped to the id so no other toolbar button is touched —
   the full text is always on the button's title tooltip and in the log. */
#export_ai_ref_btn { min-width: 0; overflow: hidden; max-width: 100%; }
#export_ai_ref_btn .btn-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}