.column-helpdocs_status {
    width: 100px;
}

.helpdocs_status {
    vertical-align: top !important;
}

.helpdocs-status-toggle {
    display: flex;
    align-items: center;
    border-radius: .75rem;
    border: 1px solid #e4e9eb;
    gap: .25rem;
    padding-block: 0.0625rem;
    padding-inline: 0.375rem 0.5rem;
    transition: all ease-in-out .2s;
    white-space: nowrap;
    width: auto;
    cursor: pointer;
    color: #000;
}

.helpdocs-status-toggle.is-active {
    background: #eefcf0;
    border-color: #57c091;
}

.helpdocs-status-toggle.is-active:hover {
    background: #d1f3db;
    border-color: #57c091;
}

.helpdocs-status-toggle.is-inactive {
    background: #fbeaea;
    border-color: #dc3545;
}

.helpdocs-status-toggle.is-inactive:hover {
    background: #f5d6d6;
    border-color: #dc3545;
}

.helpdocs-status-toggle:before {
    background: #dc3545;
    block-size: 0.375rem;
    border-radius: 50%;
    content: "";
    display: inline-block;
    inline-size: 0.375rem;
    transition: all ease-in-out .2s;
}

.helpdocs-status-toggle.is-active:before {
    background: #57c091;
}

.helpdocs-status-toggle.is-inactive:before {
    background: #dc3545;
}

.helpdocs-post-status {
    font-weight: 500;
    font-size: .75rem;
    line-height: 1.5;
}

/* Processing state */
.helpdocs-status-toggle.updating {
    opacity: 0.8 !important;
    cursor: wait;
    pointer-events: none;
}

.helpdocs-status-toggle.updating:before {
    background: transparent !important;
    border: 2px solid #ccd0d4;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: helpdocs-spin 0.8s linear infinite;
    inline-size: 0.5rem; 
    block-size: 0.5rem;
}

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

/* Active animation */
.helpdocs-success-pulse {
    position: relative;
    overflow: hidden;
}

.helpdocs-success-pulse::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba( 255, 255, 255, 0.6 ),
        transparent
    );
    transition: none;
    animation: helpdocs-sweep 0.5s ease-out;
}

.helpdocs-success-pulse.is-active:before {
    animation: helpdocs-dot-flash 0.5s ease-out;
}

@keyframes helpdocs-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes helpdocs-dot-flash {
    0% { transform: scale( 1 ); filter: brightness( 1 ); }
    50% { transform: scale( 1.5 ); filter: brightness( 1.5 ); }
    100% { transform: scale( 1 ); filter: brightness( 1 ); }
}