/* ==========================================
   BUTTONS.CSS - Unified Button System
   NGM HUB WEB

   Load order: styles.css -> buttons.css -> module CSS
   ========================================== */

/* ------------------------------------------
   1. BUTTON TOKENS
   ------------------------------------------ */
:root {
    /* Sizing scale */
    --btn-padding-sm: 6px 12px;
    --btn-padding-md: 8px 16px;
    --btn-padding-lg: 10px 20px;

    --btn-font-sm: 12px;
    --btn-font-md: 13px;
    --btn-font-lg: 14px;

    /* Shared */
    --btn-radius: var(--radius-md);
    --btn-weight: 500;
    --btn-weight-strong: 600;
    --btn-disabled-opacity: 0.5;
    --btn-gap: 6px;

    /* Transition */
    --btn-transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glass / Glow effects */
    --btn-glass-border: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --btn-focus-ring: 0 0 0 3px rgba(61, 202, 139, 0.15);
    --btn-primary-glow: 0 0 12px rgba(61, 202, 139, 0.35);
    --btn-primary-gradient: linear-gradient(135deg, var(--accent), var(--accent-hover));

    /* Liquid Glass tokens */
    --glass-bg: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-blur: blur(20px) saturate(1.4);
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.15);
    --glass-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.2);

    /* Liquid Glass — bubble variant (chat messages, lightweight) */
    --glass-bubble-bg: rgba(255, 255, 255, 0.04);
    --glass-bubble-blur: blur(12px) saturate(1.3);
    --glass-bubble-border: 1px solid rgba(255, 255, 255, 0.06);
    --glass-bubble-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.12);

    /* Liquid Glass — surface variant (topbars, headers) */
    --glass-surface-bg: rgba(26, 26, 26, 0.82);
    --glass-surface-blur: blur(20px) saturate(1.4);
    --glass-surface-border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------
   2. BASE .btn
   ------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-md);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    font-size: var(--btn-font-md);
    font-weight: var(--btn-weight);
    cursor: pointer;
    transition: var(--btn-transition);
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.2;
}

/* ------------------------------------------
   3. SIZE MODIFIERS
   ------------------------------------------ */
.btn--sm,
.btn-small,
.btn-primary-small {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
}

.btn--lg {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-lg);
}

/* ------------------------------------------
   4. VARIANT: PRIMARY (Liquid Glass — green accent)
   ------------------------------------------ */
.btn-primary {
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.12) 0%,
            rgba(61, 202, 139, 0.05) 50%,
            rgba(61, 202, 139, 0.09) 100%);
    border: 1px solid rgba(61, 202, 139, 0.22);
    color: #6ee7a0;
    font-weight: var(--btn-weight-strong);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(61, 202, 139, 0.1);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(61, 202, 139, 0.25),
        transparent);
    pointer-events: none;
}

.btn-primary:hover {
    color: #86efac;
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.20) 0%,
            rgba(61, 202, 139, 0.10) 50%,
            rgba(61, 202, 139, 0.16) 100%);
    border-color: rgba(61, 202, 139, 0.40);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(61, 202, 139, 0.18),
        0 0 0 1px rgba(61, 202, 139, 0.08);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(61, 202, 139, 0.10);
}

/* ------------------------------------------
   5. VARIANT: SECONDARY (Liquid Glass)
   ------------------------------------------ */
.btn-secondary {
    background: var(--glass-bg);
    border: var(--glass-border);
    color: var(--text-primary, #ededed);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.btn-secondary:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow-hover);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--glass-shadow);
}

/* ------------------------------------------
   6. VARIANT: DANGER (Liquid Glass — red accent)
   ------------------------------------------ */
.btn-danger {
    background:
        linear-gradient(135deg,
            rgba(239, 68, 68, 0.10) 0%,
            rgba(239, 68, 68, 0.04) 50%,
            rgba(239, 68, 68, 0.07) 100%);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.20);
    padding: var(--btn-padding-md);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-md);
    font-weight: var(--btn-weight);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(239, 68, 68, 0.08);
}

.btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(239, 68, 68, 0.2),
        transparent);
    pointer-events: none;
}

.btn-danger:hover {
    background:
        linear-gradient(135deg,
            rgba(239, 68, 68, 0.18) 0%,
            rgba(239, 68, 68, 0.08) 50%,
            rgba(239, 68, 68, 0.14) 100%);
    border-color: rgba(239, 68, 68, 0.40);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(239, 68, 68, 0.15),
        0 0 0 1px rgba(239, 68, 68, 0.06);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(239, 68, 68, 0.10);
}

/* ------------------------------------------
   7. TOOLBAR BUTTONS
   ------------------------------------------ */
.btn-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-lg);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-md);
    font-weight: var(--btn-weight);
    cursor: pointer;
    transition: var(--btn-transition);
    height: 38px;
    white-space: nowrap;
    line-height: 1;
}

.btn-toolbar:hover {
    transform: translateY(-1px);
}

.btn-toolbar:active {
    transform: translateY(0);
}

/* Toolbar Primary (Liquid Glass — green) */
.btn-toolbar-primary {
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.12) 0%,
            rgba(61, 202, 139, 0.05) 50%,
            rgba(61, 202, 139, 0.09) 100%);
    border: 1px solid rgba(61, 202, 139, 0.22);
    color: #6ee7a0;
    font-weight: var(--btn-weight-strong);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(61, 202, 139, 0.1);
}

.btn-toolbar-primary:hover:not(:disabled) {
    color: #86efac;
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.20) 0%,
            rgba(61, 202, 139, 0.10) 50%,
            rgba(61, 202, 139, 0.16) 100%);
    border-color: rgba(61, 202, 139, 0.40);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(61, 202, 139, 0.18),
        0 0 0 1px rgba(61, 202, 139, 0.08);
}

/* Toolbar Secondary (Liquid Glass) */
.btn-toolbar-secondary {
    background: var(--glass-bg);
    border: var(--glass-border);
    color: var(--text-primary, #ededed);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.btn-toolbar-secondary:hover:not(:disabled) {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: var(--glass-shadow-hover);
}

/* Toolbar Ghost — transparent, lives inside .toolbar-group */
.btn-toolbar-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.7);
}

.btn-toolbar-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #ededed);
}

.btn-toolbar-ghost:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------
   7b. TOOLBAR GROUPS — Liquid Glass Containers
   ------------------------------------------ */
.toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    border: var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.toolbar-group .btn-toolbar {
    height: 32px;
    padding: 6px 14px;
    font-size: var(--btn-font-sm);
    border-radius: 10px;
}

.toolbar-group .btn-toolbar-primary {
    height: 32px;
    padding: 6px 16px;
    border-radius: 10px;
}

/* QBO group — purple tint */
.toolbar-group-qbo {
    border-color: rgba(139, 92, 246, 0.15);
    background:
        linear-gradient(135deg,
            rgba(139, 92, 246, 0.06) 0%,
            rgba(139, 92, 246, 0.02) 50%,
            rgba(139, 92, 246, 0.05) 100%);
}

/* ------------------------------------------
   8. TOOLBAR QBO (Purple brand)
   ------------------------------------------ */
.btn-toolbar-qbo {
    border: 1px solid transparent;
    background: transparent;
    color: #a78bfa;
}

.btn-toolbar-qbo:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
}

.btn-toolbar-qbo:active:not(:disabled) {
    transform: translateY(0);
}

.btn-toolbar-qbo-danger {
    color: #f87171;
}

.btn-toolbar-qbo-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* ------------------------------------------
   9. UNIVERSAL STATES
   ------------------------------------------ */

/* Disabled */
.btn:disabled,
.btn-toolbar:disabled,
.btn-danger:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Focus-visible (keyboard navigation) */
.btn:focus-visible,
.btn-toolbar:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring);
}

/* ------------------------------------------
   10. SMALL BUTTON VARIANTS
   ------------------------------------------ */
.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-sm);
    border-radius: var(--btn-radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%);
    color: var(--text-tertiary, #6b7280);
    font-size: var(--btn-font-sm);
    font-weight: var(--btn-weight);
    cursor: pointer;
    transition: var(--btn-transition);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.btn-small:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-primary, #ededed);
    transform: translateY(-1px);
}

.btn-small:active {
    transform: translateY(0);
}

.btn-small:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
}

.btn-small.delete-btn {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.18);
    background:
        linear-gradient(135deg,
            rgba(239, 68, 68, 0.06) 0%,
            rgba(239, 68, 68, 0.02) 100%);
}

.btn-small.delete-btn:hover {
    background:
        linear-gradient(135deg,
            rgba(239, 68, 68, 0.14) 0%,
            rgba(239, 68, 68, 0.06) 100%);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.btn-primary-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-sm);
    border-radius: var(--btn-radius);
    border: 1px solid rgba(61, 202, 139, 0.22);
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.12) 0%,
            rgba(61, 202, 139, 0.05) 50%,
            rgba(61, 202, 139, 0.09) 100%);
    color: #6ee7a0;
    font-size: var(--btn-font-sm);
    font-weight: var(--btn-weight-strong);
    cursor: pointer;
    transition: var(--btn-transition);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(61, 202, 139, 0.1);
}

.btn-primary-small:hover {
    color: #86efac;
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.20) 0%,
            rgba(61, 202, 139, 0.10) 50%,
            rgba(61, 202, 139, 0.16) 100%);
    border-color: rgba(61, 202, 139, 0.40);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(61, 202, 139, 0.18);
}

.btn-primary-small:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(61, 202, 139, 0.10);
}

/* ------------------------------------------
   11. TOOLBAR DROPDOWN (Liquid Glass Menu)
   Follows same pattern as .ngm-analytics-tab
   ------------------------------------------ */
.toolbar-dropdown {
    position: relative;
    display: inline-flex;
}

/* ── Trigger button (neutral glass, like Analytics but gray) ── */
.toolbar-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
    transition:
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s;
}

/* Top glass highlight edge */
.toolbar-dropdown-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent);
    pointer-events: none;
}

.toolbar-dropdown-trigger:hover {
    color: #ededed;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.toolbar-dropdown-trigger:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

.toolbar-dropdown-trigger.active {
    color: #ededed;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 12px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* SVG sizing inside trigger */
.toolbar-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
}

.toolbar-dropdown-trigger .chevron-icon {
    width: 10px !important;
    height: 10px !important;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.toolbar-dropdown-trigger.active .chevron-icon {
    transform: rotate(180deg);
}

/* ── Dropdown menu panel (dark glass) ── */
.toolbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg,
            rgba(28, 28, 30, 0.92) 0%,
            rgba(20, 20, 22, 0.95) 50%,
            rgba(24, 24, 26, 0.92) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.toolbar-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Dropdown items ── */
.toolbar-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
    white-space: nowrap;
    line-height: 1.3;
}

.toolbar-dropdown-menu .dropdown-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #ededed;
}

.toolbar-dropdown-menu .dropdown-item:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
}

.toolbar-dropdown-menu .dropdown-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* SVG icons inside dropdown items */
.toolbar-dropdown-menu .dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.45;
}

.toolbar-dropdown-menu .dropdown-item:hover:not(:disabled) svg {
    opacity: 0.75;
}

.toolbar-dropdown-menu .dropdown-divider {
    height: 1px;
    margin: 4px 8px;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Primary CTA glass button (green accent) ── */
.btn-toolbar-primary-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(61, 202, 139, 0.22);
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.12) 0%,
            rgba(61, 202, 139, 0.05) 50%,
            rgba(61, 202, 139, 0.09) 100%);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    color: #6ee7a0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(61, 202, 139, 0.1);
    transition:
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s;
}

.btn-toolbar-primary-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(61, 202, 139, 0.25),
        transparent);
    pointer-events: none;
}

.btn-toolbar-primary-glass:hover:not(:disabled) {
    color: #86efac;
    background:
        linear-gradient(135deg,
            rgba(61, 202, 139, 0.20) 0%,
            rgba(61, 202, 139, 0.10) 50%,
            rgba(61, 202, 139, 0.16) 100%);
    border-color: rgba(61, 202, 139, 0.40);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(61, 202, 139, 0.18),
        0 0 0 1px rgba(61, 202, 139, 0.08);
}

.btn-toolbar-primary-glass:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(61, 202, 139, 0.10);
}

.btn-toolbar-primary-glass:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}