/**
 * ==========================================================================
 * Standard Button System — Datanomics Privacy Platform
 * ==========================================================================
 *
 * Outline-first design: default state shows bordered outline with transparent
 * background. On hover the background fills with the semantic color.
 *
 * Class system: .dp-btn (base) + .dp-btn--{variant} + optional .dp-btn--{size}
 * Bootstrap bridge: overrides .btn.btn-* for existing markup without .dp-btn
 *
 * Table action buttons (.dp-action-btn, .btn-sm, .btn-group-sm .btn) are
 * deliberately excluded from the bridge selectors — see data-grid.css.
 *
 * Token rules:
 *   - All colors via --dp-* tokens
 *   - All transitions via --motion-* / --ease-* tokens
 *   - All radii via --radius-* tokens
 *   - All shadows via --shadow-* tokens where available
 *   - box-shadow rgba values are the only permitted non-token color usage
 *
 * Import order: after components.css (line 69 in App.razor)
 */


/* ==========================================================================
   BASE .dp-btn
   ========================================================================== */

.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;

    border: 1.5px solid;
    border-radius: var(--radius-md, 10px);

    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;

    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.dp-btn:focus-visible {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

/* Icon inside button */
.dp-btn i,
.dp-btn .bi,
.dp-btn .fas,
.dp-btn .far,
.dp-btn .fal,
.dp-btn svg {
    font-size: 0.875em;
    line-height: 1;
    flex-shrink: 0;
}


/* ==========================================================================
   SIZES
   ========================================================================== */

.dp-btn--sm {
    padding: 5px 12px;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm, 6px);
}

.dp-btn--lg {
    padding: 11px 24px;
    font-size: 1rem;
    border-radius: var(--radius-lg, 14px);
}


/* ==========================================================================
   SHAPE MODIFIER
   ========================================================================== */

.dp-btn--pill {
    border-radius: var(--radius-full, 9999px);
}


/* ==========================================================================
   VARIANTS — Outline-first (default: outline, hover: fill)
   ========================================================================== */

/* --- Primary (Teal) --- */
.dp-btn--primary {
    background: transparent;
    border-color: var(--dp-interactive-primary);
    color: var(--dp-interactive-primary);
}

.dp-btn--primary:hover {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 122, 130, 0.25);
    transform: translateY(-1px);
}

.dp-btn--primary:active {
    background: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    color: var(--dp-text-on-primary);
    transform: translateY(0);
    box-shadow: none;
}

/* --- Secondary (Neutral) --- */
.dp-btn--secondary {
    background: transparent;
    border-color: var(--dp-border-strong);
    color: var(--dp-text-secondary);
}

.dp-btn--secondary:hover {
    background: var(--dp-surface-hover);
    border-color: var(--dp-border-strong);
    color: var(--dp-text-primary);
    box-shadow: var(--shadow-l1, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    transform: translateY(-1px);
}

.dp-btn--secondary:active {
    background: var(--dp-surface-active);
    transform: translateY(0);
    box-shadow: none;
}

/* --- Destructive (Red) --- */
.dp-btn--destructive {
    background: transparent;
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-interactive-destructive);
}

.dp-btn--destructive:hover {
    background: var(--dp-interactive-destructive);
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

.dp-btn--destructive:active {
    background: var(--dp-interactive-destructive-hover);
    border-color: var(--dp-interactive-destructive-hover);
    color: var(--dp-text-on-danger);
    transform: translateY(0);
    box-shadow: none;
}

/* --- Success (Green) --- */
.dp-btn--success {
    background: transparent;
    border-color: var(--dp-status-success);
    color: var(--dp-status-success);
}

.dp-btn--success:hover {
    background: var(--dp-status-success);
    border-color: var(--dp-status-success);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
    transform: translateY(-1px);
}

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

/* --- Warning (Amber) --- */
.dp-btn--warning {
    background: transparent;
    border-color: var(--dp-status-warning);
    color: var(--dp-status-warning);
}

.dp-btn--warning:hover {
    background: var(--dp-status-warning);
    border-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
    transform: translateY(-1px);
}

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

/* --- Info (Blue) --- */
.dp-btn--info {
    background: transparent;
    border-color: var(--dp-status-info);
    color: var(--dp-status-info);
}

.dp-btn--info:hover {
    background: var(--dp-status-info);
    border-color: var(--dp-status-info);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
    transform: translateY(-1px);
}

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

/* --- Accent (Steel Blue / CTA secondary; amber is reserved for warnings) --- */
.dp-btn--accent {
    background: transparent;
    border-color: var(--dp-interactive-accent);
    color: var(--dp-interactive-accent);
}

.dp-btn--accent:hover {
    background: var(--dp-interactive-accent);
    border-color: var(--dp-interactive-accent);
    color: var(--dp-text-on-accent);
    box-shadow: 0 4px 12px rgba(73, 107, 155, 0.24);
    transform: translateY(-1px);
}

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

/* --- Ghost (text-only, no border background) --- */
.dp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--dp-text-secondary);
}

.dp-btn--ghost:hover {
    background: var(--dp-interactive-ghost-hover);
    border-color: transparent;
    color: var(--dp-text-primary);
    transform: none;
    box-shadow: none;
}

.dp-btn--ghost:active {
    background: var(--dp-surface-active);
    transform: none;
    box-shadow: none;
}


/* ==========================================================================
   FILLED MODIFIER — Explicit filled variant for CTA buttons
   Combine: class="dp-btn dp-btn--primary dp-btn--filled"
   ========================================================================== */

/* Primary filled */
.dp-btn--primary.dp-btn--filled {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
}

.dp-btn--primary.dp-btn--filled:hover {
    background: var(--dp-interactive-primary-hover);
    border-color: var(--dp-interactive-primary-hover);
    color: var(--dp-text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 122, 130, 0.3);
    transform: translateY(-1px);
}

.dp-btn--primary.dp-btn--filled:active {
    background: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    transform: translateY(0);
    box-shadow: none;
}

/* Destructive filled */
.dp-btn--destructive.dp-btn--filled {
    background: var(--dp-interactive-destructive);
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
}

.dp-btn--destructive.dp-btn--filled:hover {
    background: var(--dp-interactive-destructive-hover);
    border-color: var(--dp-interactive-destructive-hover);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.dp-btn--destructive.dp-btn--filled:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Accent filled */
.dp-btn--accent.dp-btn--filled {
    background: var(--dp-interactive-accent);
    border-color: var(--dp-interactive-accent);
    color: var(--dp-text-on-warning);
}

.dp-btn--accent.dp-btn--filled:hover {
    background: var(--dp-interactive-accent-hover);
    border-color: var(--dp-interactive-accent-hover);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(255, 202, 0, 0.35);
    transform: translateY(-1px);
}

.dp-btn--accent.dp-btn--filled:active {
    transform: translateY(0);
    box-shadow: none;
}


/* ==========================================================================
   DISABLED STATE
   ========================================================================== */

.dp-btn:disabled,
.dp-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}


/* ==========================================================================
   LOADING STATE
   ========================================================================== */

.dp-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.dp-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dp-btn-spin 0.6s linear infinite;
}

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


/* ==========================================================================
   BUTTON GROUP
   ========================================================================== */

.dp-btn-group {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .dp-btn {
        padding: 7px 14px;
        font-size: 0.8125rem;
    }

    .dp-btn--lg {
        padding: 9px 20px;
        font-size: 0.9375rem;
    }

    .dp-btn--full-mobile {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   DARK MODE — .dp-btn variants
   ========================================================================== */

[data-bs-theme="dark"] .dp-btn--primary {
    border-color: var(--dp-interactive-primary);
    color: var(--dp-interactive-primary);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--primary:hover {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary); /* #0F172A on bright cyan — 10.5:1 */
    box-shadow: 0 4px 12px rgba(51, 214, 219, 0.25);
}

[data-bs-theme="dark"] .dp-btn--primary:active {
    background: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    color: var(--dp-text-on-primary);
}

[data-bs-theme="dark"] .dp-btn--secondary {
    border-color: var(--dp-border-strong);
    color: var(--dp-text-secondary);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--secondary:hover {
    background: var(--dp-surface-hover);
    color: var(--dp-text-primary);
}

[data-bs-theme="dark"] .dp-btn--destructive {
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-interactive-destructive);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--destructive:hover {
    background: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.25);
}

[data-bs-theme="dark"] .dp-btn--success {
    border-color: var(--dp-status-success);
    color: var(--dp-status-success);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--success:hover {
    background: var(--dp-status-success);
    color: var(--dp-text-inverse, #0F172A);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.25);
}

[data-bs-theme="dark"] .dp-btn--warning {
    border-color: var(--dp-status-warning);
    color: var(--dp-status-warning);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--warning:hover {
    background: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

[data-bs-theme="dark"] .dp-btn--info {
    border-color: var(--dp-status-info);
    color: var(--dp-status-info);
    background: transparent;
}

[data-bs-theme="dark"] .dp-btn--info:hover {
    background: var(--dp-status-info);
    color: var(--dp-text-inverse, #0F172A);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

[data-bs-theme="dark"] .dp-btn--ghost {
    color: var(--dp-text-secondary);
}

[data-bs-theme="dark"] .dp-btn--ghost:hover {
    background: var(--dp-interactive-ghost-hover);
    color: var(--dp-text-primary);
}

/* Filled dark mode variants */
[data-bs-theme="dark"] .dp-btn--primary.dp-btn--filled {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
}

[data-bs-theme="dark"] .dp-btn--primary.dp-btn--filled:hover {
    background: var(--dp-interactive-primary-hover);
    border-color: var(--dp-interactive-primary-hover);
    box-shadow: 0 4px 12px rgba(51, 214, 219, 0.3);
}


/* ==========================================================================
   BOOTSTRAP BRIDGE — Outline-first for standard .btn classes
   ==========================================================================
   Strategy: target .btn.btn-* that are NOT small/table-action buttons.
   Table action buttons always use .btn-sm or .dp-action-btn, so
   :not(.btn-sm):not(.dp-action-btn) is sufficient to exclude them.
   This leaves all .btn-group-sm, td .btn-sm, .dp-action-btn untouched.
   ========================================================================== */

/* --- btn-primary bridge --- */
.btn.btn-primary:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-interactive-primary);
    color: var(--dp-interactive-primary);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-primary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 122, 130, 0.25);
    transform: translateY(-1px);
}

.btn.btn-primary:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    color: var(--dp-text-on-primary);
    transform: translateY(0);
    box-shadow: none;
}

.btn.btn-primary:not(.btn-sm):not(.dp-action-btn):focus-visible {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.btn.btn-primary:not(.btn-sm):not(.dp-action-btn):disabled,
.btn.btn-primary:not(.btn-sm):not(.dp-action-btn).disabled {
    background: transparent;
    border-color: var(--dp-interactive-primary-disabled);
    color: var(--dp-interactive-primary-disabled);
    opacity: 0.6;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* --- btn-outline-primary bridge (already outline — enhance hover to fill) --- */
.btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    box-shadow: 0 4px 12px rgba(0, 122, 130, 0.25);
    transform: translateY(-1px);
}

.btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-interactive-primary-active);
    border-color: var(--dp-interactive-primary-active);
    color: var(--dp-text-on-primary);
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-secondary bridge --- */
.btn.btn-secondary:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-border-strong);
    color: var(--dp-text-secondary);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-secondary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-surface-hover);
    border-color: var(--dp-border-strong);
    color: var(--dp-text-primary);
    box-shadow: var(--shadow-l1, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    transform: translateY(-1px);
}

.btn.btn-secondary:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-surface-active);
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-outline-secondary bridge --- */
.btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-color: var(--dp-border-strong);
    color: var(--dp-text-secondary);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-surface-hover);
    border-color: var(--dp-border-strong);
    color: var(--dp-text-primary);
    box-shadow: var(--shadow-l1, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
    transform: translateY(-1px);
}

.btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-surface-active);
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-danger bridge --- */
.btn.btn-danger:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-interactive-destructive);
    color: var(--dp-interactive-destructive);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-danger:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-destructive);
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

.btn.btn-danger:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-interactive-destructive-hover);
    border-color: var(--dp-interactive-destructive-hover);
    color: var(--dp-text-on-danger);
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-outline-danger bridge --- */
.btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-destructive);
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

.btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn):active {
    background: var(--dp-interactive-destructive-hover);
    border-color: var(--dp-interactive-destructive-hover);
    color: var(--dp-text-on-danger);
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-success bridge --- */
.btn.btn-success:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-status-success);
    color: var(--dp-status-success);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-success:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-success);
    border-color: var(--dp-status-success);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
    transform: translateY(-1px);
}

.btn.btn-success:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-outline-success bridge --- */
.btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-success);
    border-color: var(--dp-status-success);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
    transform: translateY(-1px);
}

.btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-warning bridge --- */
.btn.btn-warning:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-status-warning);
    color: var(--dp-status-warning);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-warning:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-warning);
    border-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
    transform: translateY(-1px);
}

.btn.btn-warning:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-outline-warning bridge --- */
.btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-warning);
    border-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
    transform: translateY(-1px);
}

.btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-info bridge --- */
.btn.btn-info:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border: 1.5px solid var(--dp-status-info);
    color: var(--dp-status-info);
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-info:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-info);
    border-color: var(--dp-status-info);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
    transform: translateY(-1px);
}

.btn.btn-info:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- btn-outline-info bridge --- */
.btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn) {
    border-width: 1.5px;
    border-radius: var(--radius-md, 10px);
    font-weight: 500;
    transition: all var(--motion-base, 200ms) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-info);
    border-color: var(--dp-status-info);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
    transform: translateY(-1px);
}

.btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn):active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Bootstrap bridge: shared focus-visible for all bridged buttons --- */
.btn.btn-primary:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-secondary:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-danger:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-success:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-warning:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-info:not(.btn-sm):not(.dp-action-btn):focus-visible,
.btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn):focus-visible {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- Bootstrap bridge: dark mode overrides --- */

[data-bs-theme="dark"] .btn.btn-primary:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-interactive-primary);
    color: var(--dp-interactive-primary);
}

[data-bs-theme="dark"] .btn.btn-primary:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-primary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-primary);
    border-color: var(--dp-interactive-primary);
    color: var(--dp-text-on-primary);
    box-shadow: 0 4px 12px rgba(51, 214, 219, 0.25);
}

[data-bs-theme="dark"] .btn.btn-secondary:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-border-strong);
    color: var(--dp-text-secondary);
}

[data-bs-theme="dark"] .btn.btn-secondary:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-secondary:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-surface-hover);
    color: var(--dp-text-primary);
}

[data-bs-theme="dark"] .btn.btn-danger:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-interactive-destructive);
    color: var(--dp-interactive-destructive);
}

[data-bs-theme="dark"] .btn.btn-danger:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-danger:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-interactive-destructive);
    color: var(--dp-text-on-danger);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.25);
}

[data-bs-theme="dark"] .btn.btn-success:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-status-success);
    color: var(--dp-status-success);
}

[data-bs-theme="dark"] .btn.btn-success:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-success:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-success);
    color: var(--dp-text-inverse, #0F172A);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.25);
}

[data-bs-theme="dark"] .btn.btn-warning:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-status-warning);
    color: var(--dp-status-warning);
}

[data-bs-theme="dark"] .btn.btn-warning:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-warning:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

[data-bs-theme="dark"] .btn.btn-info:not(.btn-sm):not(.dp-action-btn),
[data-bs-theme="dark"] .btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn) {
    background: transparent;
    border-color: var(--dp-status-info);
    color: var(--dp-status-info);
}

[data-bs-theme="dark"] .btn.btn-info:not(.btn-sm):not(.dp-action-btn):hover,
[data-bs-theme="dark"] .btn.btn-outline-info:not(.btn-sm):not(.dp-action-btn):hover {
    background: var(--dp-status-info);
    color: var(--dp-text-inverse, #0F172A);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}